Building a Simple To-Do List App with Vue.js

Introduction to Vue.js To-Do List App

Vue.js is a progressive and flexible framework for building user interfaces. In this tutorial, we will create a simple to-do list application to get you started with Vue.js.

Step 1: Setting Up the Project

First, you need to set up a new Vue.js project. You can do this by running the following command in your terminal:

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

Step 2: Creating the To-Do List Component

Create a new file called TodoList.vue in the src/components directory and add the following code:

<template>
  <div>
    <h1>To-Do List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js' },
        { id: 2, text: 'Build a to-do list app' }
      ],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: this.todos.length + 1, text: this.newTodo });
      this.newTodo = '';
    }
  }
}
</script>

Step 3: Adding the To-Do List Component to the App

Open the src/main.js file and add the following code to register the TodoList component:

import Vue from 'vue'
import App from './App.vue'
import TodoList from './components/TodoList.vue'

Vue.component('todo-list', TodoList)

new Vue({
  render: h => h(App)
}).$mount('#app')

Step 4: Running the App

Finally, run the app by executing the following command in your terminal:

npm run serve

Open your web browser and navigate to http://localhost:8080 to see your to-do list app in action.