This documentation provides a comprehensive guide to building a simple To-Do List application using Vue.js. This application allows users to add, edit, and delete tasks. Vue.js is a progressive JavaScript framework used to build interactive user interfaces and single-page applications. This guide will cover the core concepts required to develop the To-Do List application, including Vue.js fundamentals, component creation, and state management.

1. Project Setup

1.1 Installing Vue CLI

To get started, install Vue CLI globally on your system using npm:

npm install -g @vue/cli

1.2 Creating a New Vue Project

Create a new Vue project using the Vue CLI:

vue create todo-list-app

Navigate to the project directory:

cd todo-list-app

1.3 Project Structure

The default Vue CLI project structure includes the following directories:

• src/: Contains the source code.
  • components/: Contains Vue components.
  • views/: Contains view components.
• public/: Contains static assets.
• package.json: Contains project dependencies.

2. Building the To-Do List Application

2.1 Creating Components

2.1.1 TaskItem Component

Create a new file TaskItem.vue in the src/components/ directory:

<template>
  <div class="task-item">
    <input type="checkbox" v-model="task.completed" />
    <span>{{ task.text }}</span>
    <button @click="removeTask">Delete</button>
  </div>
</template>

<script>
export default {
  props: {
    task: Object
  },
  methods: {
    removeTask() {
      this.$emit('remove-task', this.task.id);
    }
  }
};
</script>

<style scoped>
.task-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>

2.1.2 TaskList Component

Create a new file TaskList.vue in the src/components/ directory:

<template>
  <div class="task-list">
    <TaskItem
      v-for="task in tasks"
      :key="task.id"
      :task="task"
      @remove-task="handleRemoveTask"
    />
  </div>
</template>

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

export default {
  components: {
    TaskItem
  },
  props: {
    tasks: Array
  },
  methods: {
    handleRemoveTask(taskId) {
      this.$emit('remove-task', taskId);
    }
  }
};
</script>

<style scoped>
.task-list {
  padding: 20px;
}
</style>

2.2 Main Application Logic

2.2.1 App Component

Modify src/App.vue to include the main application logic:

<template>
  <div id="app">
    <h1>To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <TaskList :tasks="tasks" @remove-task="removeTask" />
  </div>
</template>

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

export default {
  components: {
    TaskList
  },
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          id: Date.now(),
          text: this.newTask,
          completed: false
        });
        this.newTask = '';
      }
    },
    removeTask(taskId) {
      this.tasks = this.tasks.filter(task => task.id !== taskId);
    }
  }
};
</script>

<style scoped>
#app {
  text-align: center;
  margin-top: 60px;
}
input {
  padding: 10px;
  margin-bottom: 20px;
}
</style>

Conclusion

This documentation outlines the process of creating a basic To-Do List application using Vue.js. By setting up the project with Vue CLI and building essential components like TaskItem and TaskList, we now have a functional application that can handle basic task management features. The final step involves testing the application to ensure all functionalities work as expected and making any necessary adjustments. With this foundational knowledge, we can expand and customize your Vue.js applications further.