Building a Dynamic To-Do List Application with Vue.js A Step-by-Step Guide

Introduction

In the world of web development, creating a simple yet functional application is a great way to grasp the fundamentals of a framework. In this tutorial, we will build a dynamic To-Do List application using Vue.js, one of the most popular JavaScript frameworks. This project will help you understand the core concepts of Vue.js, including data binding, components, and reactivity.

Prerequisites

Before we dive in, make sure you have the following:

• Basic knowledge of HTML, CSS, and JavaScript.
• Node.js and npm installed on your machine.
• A code editor (like VSCode) for writing your code.

Step 1: Setting Up the Project

First, let’s create a new Vue.js project using Vue CLI. If you haven’t installed Vue CLI yet, you can do so with npm:

npm install -g @vue/cli

Now, create a new project:

vue create todo-app

Follow the prompts to set up your project. Once created, navigate to the project directory:

cd todo-app

To start the development server, run:

npm run serve

Open your browser and navigate to http://localhost:8080 to see your Vue.js app in action!

Step 2: Creating the To-Do List Component

Now that we have our Vue app running, let’s create a new component for our To-Do List. Inside the src/components directory, create a file named TodoList.vue.

<template>
 <div>
 <h1>My To-Do List</h1>
 <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task" />
 <ul>
  <li v-for="(task, index) in tasks" :key="index">
  <input type="checkbox" v-model="task.completed" />
  <span :class="{ completed: task.completed }">{{ task.text }}</span>
  <button @click="removeTask(index)">Delete</button>
  </li>
 </ul>
 </div>
</template>

<script>
export default {
 data() {
 return {
  newTask: '',
  tasks: [],
 };
 },
 methods: {
 addTask() {
  if (this.newTask.trim()) {
  this.tasks.push({ text: this.newTask, completed: false });
  this.newTask = '';
  }
 },
 removeTask(index) {
  this.tasks.splice(index, 1);
 },
 },
};
</script>

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

Step 3: Using the Component in Your App

Next, we need to use our TodoList component in the main application. Open src/App.vue and replace the default content with the following:

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

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

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

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Step 4: Styling Your Application

To give your To-Do List a more appealing look, you can add some CSS styles in the App.vue or the TodoList.vue component. Here’s a simple style you can add to TodoList.vue:

input {
 margin: 10px 0;
 padding: 10px;
 width: 80%;
}

button {
 margin-left: 10px;
}

Step 5: Adding Local Storage Functionality

To make our application more useful, let’s save the tasks in the browser’s local storage. Update the mounted and beforeDestroy lifecycle hooks in your TodoList.vue component:

mounted() {
 const savedTasks = JSON.parse(localStorage.getItem('tasks'));
 if (savedTasks) {
 this.tasks = savedTasks;
 }
},
beforeDestroy() {
 localStorage.setItem('tasks', JSON.stringify(this.tasks));
},

Conclusion

Congratulations! You’ve just built a simple To-Do List application using Vue.js. This project has introduced you to the basics of Vue.js, including components, data binding, and local storage. You can further enhance your application by adding features such as editing tasks, filtering completed tasks, or even integrating a backend service.

Feel free to share your thoughts in the comments below or let us know if you have any questions. Happy coding!

This tutorial not only provides a hands-on approach to learning Vue.js but also encourages creativity and further exploration of the framework’s capabilities.