Making a simple TODO single page web app using VueJS.

Making a simple TODO single page web app using VueJS.


3 min read

Hey! I made a TODO web app just for trying out VueJS, with not so cool design. But it's okay for me, as an experiment.

This is what I created ๐Ÿ‘จโ€๐Ÿ’ป (1).gif

Github Repo

Create these three files:

  • index.html
  • app.js
  • style.css


Things wrapped in {{ }} are data coming from the Vue app component.

v-bind:class binds to see if the state is true, then it sets the class.

v-on:click attaches an event listener to the button.

v-for iterates over an array of "todos" present in the data object of the Vue app.

    <div class="container">
      <div id="app">
        <ol type="1">
          <li v-for="todo in todos">{{ todo }}</li>
        <br />
        <input v-bind:class="{'text-warn': shouldWarn}" v-model="newTodo" />
        <button v-on:click="createNewTodo">Add</button>


body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

li {
  margin: 0;
  padding: 0;

.container {
  margin: 0 10vw;

.text-warn {
  border: 2px solid red;


In the below example, el:"#app" sets the initialized Vue app to the DOM element with id="app"

var app = new Vue({
  el: "#app",
  data: {
    title: "My Todo List",
    shouldWarn: false,
    newTodo: "",
    todos: ["Learn Vue", "Learn CI/CD", "Eat dinner", "Play GTA V"],
  methods: {
    createNewTodo: function () {
      if (this.newTodo) {
        this.newTodo = "";
        this.shouldWarn = false;
      } else {
        console.log("newTodo doesn't exists.");
        this.shouldWarn = true;

PS: you can fork the GitHub repo, and try styling it, and use localStorage() for storing the todos.

See ya! ๐Ÿ˜ƒ

Article Cover credits: Andre Madarang's video thumbnail: Vue.js Todo App - Basics - Part 1