Vue Js - Building To Do App

Vue (pronounced view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue is fresh and has little baggage. It has been learning from the mistakes and successes of React & Angular. The way we see it, Vue is lightweight & easy to learn. It is fresh and has little baggage. It has been learning from the mistakes and successes of React & Angular. The way we see it, Vue is lightweight & easy to learn.

Vue.js is a more flexible, less opinionated solution ( than Angular ). That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages instead of a full blown SPA.

Vue.js CLI

Lets Create a Simple To-do app POC on Vue Js CLI

Setup the Vue Js Environment

Download the Node Package Manager from Below link from node.js website

https://nodejs.org/en/download/

After completion of the installation of the Node Js

Open your CMD and install the Vue Js package from the node Manager

Enter the below command to install Vue Js libraries

“npm install --global Vue-cli”

Install Vue Js Library

After completing the installation

go to your desired folder where you want to create the Project

Example – I will create my project in D drive Todo folder

D:\Todo

There are Some templates available like below

The simplest possible Vue setup in a single HTML file

A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction

PWA template for vue-cli based on the webpack template

A simple Webpack + vue-loader setup for quick prototyping

A simple Browserify + vueify setup for quick prototyping

A full-featured Browserify + vueify setup with hot-reload, linting & unit testing

# create a new project using the "webpack" template

Enter the Below Command to create the Project .// “todo-app” is the project Name

“vue init webpack todo-app”

Create Your Vue Project

After the project get created you will get some instruction’s

Like enter the Project Name , Project Description , Author etc.

just follow as the bellow screen shot

Project Meta-data Setup

After authors Name it will ask you for install Vue related Components

Follow the instructions as below

Intructions

After finishing the steps go to the project folder

By writing the below command

cd\todo-app

Goto The Project Foolder

And then run a npm install” command

Install Packages from Npm

Now you can run the project to see what the webpack template of view consist

To run the project type the below command

“npm run dev”

Run the Project

When this command will execute it will run all the required Js file’s to run the project and after that it will show a window which will be you resultant window , which shows the information about the projects URL & compilation like below .

Now just go to the URL http://localhost:8080 hit in the browser

After Succesful Compilation

You will see the default page of the web pack template

Now just start to build your Todo App

Open Your Vue Project in the Editor(I would suggest to use a VS Code editor)

Now go to the Project Structure

It will be having the Structure like below

Project Folder Structure

Now in the Project Structure will be having a index.html

Which is the Master Layout page which acts like the app.component.html in angular 2

So we define only the layout of the project

One important thing in Vue is that view have this part in its file .

  • Template (Which will consist your HTML things)
  • Script (Which will consist of the Scripting Part )
  • Style Script (Which will consist of the Styling of the HTML markup)

And we will go to the src folder which will be containing the component folder and the APP.vue file which behaves like a app.component.ts in angular 2/4.

Now Create Three Vue File’s or Components Files which will be Having your all the things in the todo app

First you have to Create a TodoList.vue

Which will consist of your Header part of the App & the Popups of the App

In details it will have the counts of the todo’s & it will have the Success & error popups

We will be using some custom popup’s or third party popup

Paste the Code in the TodoList.vue file

TodoList.vue
<template>
    <div>
      <p class="tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
      <p class="tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
      <todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-for="todo in todos" :todo.sync="todo"></todo>
    </div>
</template>
      
<script type = "text/javascript" >
    import sweetalert from 'sweetalert';
    import Todo from './Todo';
    
    export default {
    props: ['todos'],
    components: {
      Todo,
    },
    methods: {
      deleteTodo(todo) {
        sweetalert({
          title: 'Are you sure?',
          text: 'This To-Do will be permanently deleted!',
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#DD6B55',
          confirmButtonText: 'Yes, delete it!',
          closeOnConfirm: false,
        },
        () => {
          const todoIndex = this.todos.indexOf(todo);
          this.todos.splice(todoIndex, 1);
          sweetalert('Deleted!', 'Your To-Do has been deleted.', 'success');
        });
      },
      completeTodo(todo) {
        const todoIndex = this.todos.indexOf(todo);
        this.todos[todoIndex].done = true;
        sweetalert('Success!', 'To-Do completed!', 'success');
      },
    },
    };
</script>

<style scoped>
    p.tasks {
        text-align: center;
    }
</style>      

Now we will create a another vue file Named Toto.vue which will be having the Form fields and button .

Which will add our todo task in the todo list .

For now we will be creating only two fields in todo app.

Title & Project .

Paste the Code below code in the Todo.vue file

Todo.vue
<template>
    <div class='ui centered card'>
      <div class="content" v-show="!isEditing">
        <div class='header'>
            {{ todo.title }}
        </div>
        <div class='meta'>
            {{ todo.project }}
        </div>
        <div class='extra content'>
            <span class='right floated edit icon' v-on:click="showForm">
            <i class='edit icon'></i>
          </span>
          <span class='right floated trash icon' v-on:click="deleteTodo(todo)">
            <i class='trash icon'></i>
          </span>
        </div>
      </div>
      <div class="content" v-show="isEditing">
        <div class='ui form'>
          <div class='field'>
            <label>Title</label>
            <input type='text' v-model="todo.title" >
          </div>
          <div class='field'>
            <label>Project</label>
            <input type='text' v-model="todo.project" >
          </div>
          <div class='ui two button attached buttons'>
            <button class='ui basic blue button' v-on:click="hideForm">
              Close X
            </button>
          </div>
        </div>
      </div>
      <div class='ui bottom attached green basic button' v-show="!isEditing &&todo.done" disabled>
          Completed
      </div>
      <div class='ui bottom attached red basic button' v-on:click="completeTodo(todo)" v-show="!isEditing && !todo.done">
          Pending
      </div>
    </div>
</template>

<script type="text/javascript">
    export default {
      props: ['todo'],
      data() {
        return {
          isEditing: false,
        };
      },
      methods: {
        completeTodo(todo) {
          this.$emit('complete-todo', todo);
        },
        deleteTodo(todo) {
          this.$emit('delete-todo', todo);
        },
        showForm() {
          this.isEditing = true;
        },
        hideForm() {
          this.isEditing = false;
        },
      },
    };
</script>

Now Create the Last Component of the todo project is a Createtodo.vue which will contain the main Todo app body.

This will have all the todo tasks listed in this page.

The template part will be having the the body containing part and the scripts section will be having the all pop & push functionality of the todo tasks lists.

Copy the below code into the Createtodo.vue file.

Createtodo.vue
<template>
    <div class='ui basic content center aligned segment'>
      <button class='ui basic button icon' v-on:click="openForm" v-show="!isCreating">
        <i class='plus icon'></i>
      </button>
      <div class='ui centered card' v-show="isCreating">
        <div class='content'>
          <div class='ui form'>
            <div class='field'>
              <label>Title</label>
              <input v-model="titleText" type='text'>
            </div>
            <div class='field'>
              <label>Project</label>
              <input v-model="projectText" type='text'>
            </div>
            <div class='ui two button attached buttons'>
              <button class='ui basic blue button' v-on:click="sendForm()">
                Create
              </button>
              <button class='ui basic red button' v-on:click="closeForm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
  
<script>
    export default {
        data() {
          return {
            titleText: '',
            projectText: '',
            isCreating: false,
          };
        },
    methods: {
      openForm() {
        this.isCreating = true;
      },
      closeForm() {
        this.isCreating = false;
      },
      sendForm() {
        if (this.titleText.length > 0 && this.projectText.length > 0) {
          const title = this.titleText;
          const project = this.projectText;
          this.$emit('create-todo', {
            title,
            project,
            done: false,
          });
          this.titleText = '';
          this.projectText = '';
          this.isCreating = false;
        }
      },
    },
  };
</script>     

Now lets come to the last part which will be our App.vue

Now we have to import all the components into the app.vue.

App.vue will be having the main information about the todo app like title & information about it.

Copy the below code into the App.vue file.

App.vue
<template>
    <div id="app">
      <h1 class="ui dividing centered header">My Todo App</h1>
      <div class='ui three column centered grid'>
        <div class='column'>
          <todo-list v-bind:todos="todos"></todo-list>
          <create-todo v-on:create-todo="createTodo"></create-todo>
        </div>
      </div>
    </div>
</template>
  
<script>
  import sweetalert from 'sweetalert';
  import TodoList from './components/TodoList';
  import CreateTodo from './components/CreateTodo';
  
  export default {
    name: 'app',
    components: {
      TodoList,
      CreateTodo,
    },
    data() {
      return {
        todos: [{
          title: 'Todo A',
          project: 'Project A',
          done: false,
        }, {
          title: 'Todo B',
          project: 'Project B',
          done: true,
        }, {
          title: 'Todo C',
          project: 'Project C',
          done: false,
        }, {
          title: 'Todo D',
          project: 'Project D',
          done: false,
        },
        {
          title: 'Todo C',
          project: 'Project C',
          done: false,
        }],
      };
    },
    methods: {
      createTodo(newTodo) {
        this.todos.push(newTodo);
        sweetalert('Success!', 'To-Do created!', 'success');
      },
    },
  };
</script>  

After making these files properly run the project into the CMD as per given command.

Make sure you don’t have extra Spaces in the file because the Vue js script section is Indentation Sensitive.

The Architecture of the Vue is same like the Angular 2 js .just it is not based on the MVC architecture totally.

We normally create the components & the main layout html that is it.

After running the project you will see the below screen.

This is not a dynamic todo app bcz it don’t have the DB or sme storage end.

Some Screen Shots of the Todo App here below.

My Todo App View

ON clicking on the + button you will get the below form popup

Add New Task View

Fill the form & create the new task in todo app

Successful Popup View

This will be the success popup when your task will be completed

Warning Popup View

This will be a Warning Popup to Delete the Task

Successful Deletion View

This will be a successful Deletion popup

The above were some screenshots of the todo app

All the best .Simplify your Code & Codify Your life .



up