Building a Todo App in Vue.js with Local Storage Integration

Building a Todo app is one of the most common projects for beginners to practice Vue.js. In this tutorial, we will build a simple Todo application where users can add, edit, delete, and mark tasks as completed. We will also integrate Local Storage to persist the todo list across page reloads. Local Storage is a browser feature that allows you to store data on the client side, which will make our app retain its data even if the page is refreshed.

This guide will walk you step-by-step through the process of building the app, including the Local Storage integration.

1. Setting Up the Vue Project

First, if you don’t already have a Vue.js project, create one. You can use Vue CLI or Vite to set up your project. Here’s how to create a Vue app using Vue CLI:

npm install -g @vue/cli
vue create todo-app
cd todo-app
npm run serve

2. Creating the Basic Todo App Structure

Start by creating the basic structure of your Vue component. In this case, we will use a single component for simplicity.

Example:

<template>
  <div id="app">
    <h1>Todo App</h1>
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo" 
      placeholder="Add a new todo" 
      type="text" />
    
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = '';  // Clear input after adding
        this.saveTodos();
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    },
    loadTodos() {
      const savedTodos = localStorage.getItem('todos');
      if (savedTodos) {
        this.todos = JSON.parse(savedTodos);
      }
    }
  },
  mounted() {
    this.loadTodos();
  }
};
</script>

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

3. Breaking Down the Code

newTodo: This variable binds to the input field, allowing the user to type new todo items.
todos: This array holds the list of todo objects. Each todo object has a text (the todo text) and a completed (a boolean indicating whether the todo is completed).
addTodo: This method adds a new todo item to the list when the user presses the "Enter" key.
deleteTodo: This method deletes a todo item from the list.
saveTodos: This method saves the current state of the todo list to Local Storage every time a todo is added or deleted.
loadTodos: This method loads the todo list from Local Storage when the app is mounted (on page load).

4. Adding Styles

In the <style> section, a simple style is added for the completed tasks. The completed class applies a line-through to the text to visually indicate which tasks are marked as completed.

5. Persisting Data with Local Storage

When the user adds or deletes a todo, the saveTodos method is called, which saves the current todos array to Local Storage.
When the component is mounted, the loadTodos method retrieves the todo list from Local Storage and populates the todos array, ensuring that the data persists across page reloads.

6. Testing the App

Run your Vue app with:

npm run serve

Open your app in the browser. You should be able to:

Add new todos by typing in the input field and pressing "Enter."
Mark todos as completed by checking the checkbox.
Delete todos by clicking the "Delete" button next to each todo.
The todo list should persist even after you refresh the page, thanks to Local Storage.

Conclusion

In this tutorial, we have built a simple Todo App in Vue.js, with functionality to add, delete, and mark tasks as completed. We also integrated Local Storage to make sure the todo list is saved across page reloads. By leveraging Vue.js’s reactive data system and Local Storage, you can create applications that persist user data and enhance user experience. This is a great foundation for building more complex applications that require client-side data storage.