close

Building a TodoList App with Vue.js

Here is a detailed step-by-step guide with specific code examples for building a TodoList application with Vue.js:

Step 1: Setting up the Project

Start by creating a new Vue.js project using Vue CLI. Open your terminal and run the following command:

vue create todo-list-app

This will create a new directory called todo-list-app with the basic project structure and dependencies.

 

Step 2: Creating the TodoList Component

Inside the src folder, create a new file called TodoList.vue. This will be the main component for the TodoList application.

In TodoList.vue:

<template>
  <div>
    <h1>TodoList</h1>
    <!-- Render TodoItems here -->
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js', completed: false },
        { id: 2, text: 'Build a TodoList app', completed: false },
        // Add more todo items here
      ]
    };
  }
};
</script>

<style>
/* Add your custom styles here */
</style>

 

Step 3: Creating the TodoItem Component

Inside the src folder, create a new file called TodoItem.vue. This will be a child component responsible for rendering individual todo items.

In TodoItem.vue:

<template>
  <div :class="{ 'completed': todo.completed }">
    <input type="checkbox" v-model="todo.completed">
    <span>{{ todo.text }}</span>
    <button @click="deleteTodo">Delete</button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: ['todo'],
  methods: {
    deleteTodo() {
      // Emit a custom event to notify the parent component (TodoList) to delete this todo item
      this.$emit('delete', this.todo.id);
    }
  }
};
</script>

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

 

Step 4: Updating the TodoList Component

Inside TodoList.vue, update the template section to render the TodoItems using v-for directive.

In TodoList.vue:

<template>
  <div>
    <h1>TodoList</h1>
    <div v-for="todo in todos" :key="todo.id">
      <TodoItem :todo="todo" @delete="deleteTodo"></TodoItem>
    </div>
    <!-- Add a form to add new todo items -->
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoText">
      <button type="submit">Add Todo</button>
    </form>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js', completed: false },
        { id: 2, text: 'Build a TodoList app', completed: false },
        // Add more todo items here
      ],
      newTodoText: ''
    };
  },
  methods: {
    deleteTodo(id) {
      // Find the index of the todo item in the array
      const index = this.todos.findIndex(todo => todo.id === id);
      // Remove the item from the array
      this.todos.splice(index, 1);
    },
    addTodo() {
      if (this.newTodoText) {
        // Generate a unique ID for the new todo item
        const newTodoId = this.todos.length + 1;
        // Create a new todo item object and add it to the array
        this.todos.push({
          id: newTodoId,
          text: this.newTodoText,
          completed: false
        });
        // Clear the input field
        this.newTodoText = '';
      }
    }
  }
};
</script>

<style>
/* Add your custom styles here */
</style>

 

Step 5: Testing the TodoList Application


To test the TodoList application, open the "src/App.vue" file and replace the existing content with the following code:

<template>
  <div id="app">
    <TodoList></TodoList>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    TodoList
  }
};
</script>

<style>
/* Add your global styles here */
</style>

 

Step 6: Running the Application


Save all the changes and start the development server by running the following command in the terminal:

npm run serve

Visit http://localhost:8080 in your web browser to see the TodoList application in action.

This example demonstrates the basic functionality of a

TodoList application using Vue.js. Users can see a list of todo items, mark them as completed, delete them, and add new items using the provided form. The state of the todo items is managed in the TodoList component, while each individual todo item is rendered using the TodoItem component.

Please note that this is a simplified implementation, and you can customize and enhance the application further based on your specific needs.