Building a Simple Todo List App with Vue.js

Introduction to Vue.js Todo List App

In this tutorial, we will build a simple Todo List application using Vue.js. This application will allow users to add, remove, and mark tasks as completed.

Step 1: Setting up the Project

First, we need to set up a new Vue.js project. We can do this by running the following command in our terminal:

npm install -g @vue/cli
vue create todo-list-app

Step 2: Creating the Todo List Component

Next, we need to create a new component for our Todo List. We can do this by creating a new file called TodoList.vue in the src/components directory:

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for='todo in todos' :key='todo.id'>
        <input type='checkbox' v-model='todo.completed'>
        <span :class='{ completed: todo.completed }'>{{ todo.text }}</span>
        <button @click='removeTodo(todo)'>Remove</button>
      </li>
    </ul>
    <input type='text' v-model='newTodo' @keyup.enter='addTodo'>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo, completed: false, id: Math.random() });
      this.newTodo = '';
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(t => t.id !== todo.id);
    }
  }
}
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

Step 3: Adding the Todo List Component to the App

Finally, we need to add the Todo List component to our App component. We can do this by modifying the App.vue file:

<template>
  <div>
    <TodoList/>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  components: { TodoList }
}
</script>

Now we can run our application using npm run serve and see our Todo List in action.