In this tutorial I'm going to show how to create a simple To-Do list app without database, and you can add a database to the app so it can save the added TO-DO item for the next time you run the app.

Let's start
All we need is to create two files :
First, index.html        //  The main page of the app
Second, style.css        //  The CSS style codes

<!DOCTYPE html>
 <title>TO-DO List using vueJs - Munaf Aqeel Mahdi</title>
 <script src="[email protected]/dist/vue.js"></script>
 <link rel="stylesheet" href="">
 <link rel="stylesheet" type="text/css" href="">
 <link rel="stylesheet" type="text/css" href="style.css">
 <div id="main">
 <div class="topDiv"></div>
 <input type="text" id="input" v-model="newName" placeholder="Add new task" @keyup.enter="addName" />
 <div class="addBtnDiv">
  <button class="addBtn" @click="addName"><span class="fa fa-plus"></span></button>

  <li v-for="name in names">
  <label class="container">{{name}}
    <input type="checkbox">
    <span class="checkmark"></span>

 <script type="text/javascript">
 var app = new Vue({
  el : '#main',
   newName : null,
   names : ['Listening to a music',
      'watching a movie',
      'Learning VueJs',
      'Build vueJs app']
    var input = document.getElementById("input").value;
    if (input != '') {
     this.newName = '';
What we did here in this file, we included the JS and CSS files at the head element (vueJS, bulma,font-awesome,style) and at the body element we added the main elements of this app like the list card and list item and like so, after that we added the vueJS code.
The vueJS code that we added is so easy to understand .. at first we defined the main app id, data and methods in this app .. we have only one method which is addName(), This used to push data to the app and it only used on plus button (Add button) and when enter pressed on input.

 background-color: rgba(243, 243, 243, 0.4) !important;
 min-height: 100% !important;
    background: #fff;
    max-width: 230px;
    width: auto;
    margin: auto;
    padding: 15px;
    border-radius: 5px;
    margin-top: 13%;
    position: relative;
    box-shadow: 0px 6px 15px rgba(156, 39, 176, 0.09);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right,#3F51B5,#9C27B0,#FF5722);
    border-radius: 10px 10px 0px 0px;
 position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    text-align: center;
 border: 0;
    padding: 9px 10px;
    border-radius: 100%;
    color: #fff;
    background: linear-gradient(to right,#3F51B5,#9C27B0);
    cursor: pointer;
    height: 35px;
    font-size: 16px;
    width: 35px;
    box-shadow: 3px 6px 15px rgba(102, 102, 102, 0.37);
    outline: none;
    width: 100%;
    border: none;
    background: white;
    padding: 6px 8px;
    border-radius: 20px;
    box-shadow: 0px 3px 15px rgba(103, 58, 183, 0.1);
    outline: none;
    color: #8c8c8c;
 color: #bfbfbf;
 margin-top: 10px;
/* The container */
.container {
 color: #8c8c8c;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 0px rgba(63, 81, 181, 0.22);
    transition: box-shadow 0.3s;

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
   /* TODO.. */

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background: linear-gradient(to right,#2196F3,#00BCD4);

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 7.5px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

/* =======================[Mobile responsive design]==========================*/
@media only screen and (max-width:400px) {
 max-width: none !important;
 margin-top: 0 !important;
This is our app style file.

That's all :)

Source Code
open the link below and click in the green button "clone or download" and then download ZIP :
Download now