Vue.js is an open-source JavaScript framework for building user interfaces like angular and react. Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. I’m also very interesting about vue js and easy learning curve it has. If you have interesting  vue js, I would prefer to follow udemy tutorials.

I’m using vue2 with webpack for develop todo application. node js have to installed in your machine. now we have to install vue cli first

$ npm install -g vue-cli

now we are going to create our first vue js project mytodo

$ vue init webpack-simple mytodot

navigate to the project folder

cd mytodo

install and run project

$ npm install

$ npm run dev

{
  "name": "mytodo",
  "description": "Simple todo application",
  "version": "1.0.0",
  "author": "kushan",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-particles": "^1.0.9",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

now we are creating our todo snippet inside the template part. remove all other default content from template part

<template>
<div class="row">
<form @submit.prevent='addTodo' class="form-inline">
<div class="col-md-10">
      <textarea name="name" class="myinput" v-model='todoname' @keyup.enter='addTodo'></textarea>
  </div>
<div class="col-md-2">
     <button type="submit" class="btn bgm-cyan waves-effect">add todo</button>
  </div>
</form>
</div>
</template>

now we have to create method to addTodo

 data() {
    return {
      todoname:'',
      alltodos:[]
    }
  },
  methods:{
    addTodo() {
      if(this.todoname !='') {
        this.allTodos.push(this.todoname);
        this.todoname = '';
      }
    }
  }

then create template part to show all todos as list

<div class='row'>
<div class='list-items'>
<ul>
<li v-for='(TodoItem, index) in allTodos'>{{TodoItem.todo}}</li>
    </ul>
  </div>
</div>

Following Simple Todo Application Created by Vue JS Which is front end ui development framework. Im Using Vuex for state management technology for this application.

this is some complete todo example using vue vuex. don’t think about vuexI will explain in future tutorials about state management techniques for vue js.

by kushan