Build a Simple To-Do App with Vue.js – Beginner Friendly

This article provides a step-by-step guide to building a functional to-do app using the popular JavaScript framework, Vue.js. Perfect for beginners, this tutorial will walk you through the process of creating a simple to-do list application from scratch, covering essential front-end development concepts.

Learning to build applications like this is a great way to build your understanding of front-end development and JavaScript. This guide will focus on the practical aspects of the process, keeping the theoretical explanations to a minimum.

Whether you're a complete newcomer to programming or have some basic knowledge of JavaScript, this tutorial will provide a solid foundation for your front-end development journey.

Setting Up the Project

Before diving into the code, let's set up the project environment. We'll use Vite, a fast and reliable build tool for Vue.js projects.

Installing Vite

• Open your terminal and navigate to the directory where you want to create your project.
• Run the command: npm create vite@latest my-todo-app -- --template vue
• This command will create a new project folder named my-todo-app using the Vite template for Vue.js.

Project Structure

Vite creates a basic project structure with necessary files and folders. You'll find the main application code in the src directory, especially the App.vue file.

Creating the To-Do List Component

Now, let's create the core component for our to-do list. This component will handle tasks like adding, displaying, and removing items from the list.

Defining the Component

Create a new file named ToDoList.vue in the src/components directory. This file will contain the Vue component for managing the to-do list.

Template

<template>
  <div class="todo-list">
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.text }}
        <button @click="removeTask(task.id)">Remove</button>
      </li>
    </ul>
    <input type="text" v-model="newTask">
    <button @click="addTask">Add Task</button>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const tasks = ref([]);
    const newTask = ref('');
    const addTask = () => {
      if (newTask.value) {
        tasks.value.push({ id: Date.now(), text: newTask.value });
        newTask.value = '';
      }
    };
    const removeTask = (id) => {
      tasks.value = tasks.value.filter(task => task.id !== id);
    };
    return { tasks, newTask, addTask, removeTask };
  },
};
</script>

This template defines the structure of the to-do list, including input fields for adding new tasks and buttons for removing them.

Integrating the Component

Now, let's integrate the ToDoList.vue component into our main application.

App.vue

In the App.vue file, import and use the ToDoList component.

<template>
  <ToDoList />
</template>

<script>
import ToDoList from './components/ToDoList.vue';
export default {
  components: {
    ToDoList
  }
};
</script>

Styling the Application

Adding some basic styling will enhance the presentation of your to-do list.

CSS

Create a new CSS file (e.g., style.css) and add the following styles.

.todo-list {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

Testing and Deployment

After implementing the code, you can run the application using Vite and test its functionality. For deployment, you can use platforms like Netlify or Vercel.

This comprehensive guide has demonstrated how to construct a simple to-do app with Vue.js. This example provides a foundational understanding of front-end development, using Vue.js to create interactive user interfaces.

By following these steps, you've successfully built a basic to-do list application using Vue.js. This project provides a valuable starting point for further development and exploration of front-end technologies. You can easily expand upon this to create more complex and sophisticated applications.