The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Project 1: To-Do List Application

Next ►
►

In this project, we will build a simple yet functional To-Do List application using Vue.js. This project will help you consolidate your understanding of Vue.js basics, components, state management, and routing. By the end of this project, you will have a solid grasp of how to structure and develop a Vue.js application.

Project Overview

Features

  • Add new tasks
  • Mark tasks as completed
  • Delete tasks
  • Filter tasks (All, Active, Completed)

Technologies

  • Vue.js
  • Vue Router
  • Vuex (optional for state management)

Step 1: Setting Up the Project

1.1 Create a New Vue Project

First, ensure you have Vue CLI installed. If not, install it using the following command:

npm install -g @vue/cli

Create a new Vue project:

vue create todo-list

Navigate to the project directory:

cd todo-list

1.2 Install Vue Router

We will use Vue Router to manage navigation within our application.

vue add router

Step 2: Project Structure

2.1 Organize the Project Directory

Your project directory should look like this:

todo-list/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── TaskItem.vue
│   │   ├── TaskList.vue
│   │   └── TaskFilter.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

Step 3: Creating Components

3.1 TaskItem Component

Create a TaskItem.vue file in the components directory:

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

<script>
export default {
  props: ['task'],
  methods: {
    toggleComplete() {
      this.$emit('toggle-complete', this.task);
    },
    deleteTask() {
      this.$emit('delete-task', this.task);
    }
  }
}
</script>

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

3.2 TaskList Component

Create a TaskList.vue file in the components directory:

<template>
  <div class="task-list">
    <TaskItem
      v-for="task in filteredTasks"
      :key="task.id"
      :task="task"
      @toggle-complete="toggleComplete"
      @delete-task="deleteTask"
    />
  </div>
</template>

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

export default {
  components: { TaskItem },
  props: ['tasks', 'filter'],
  computed: {
    filteredTasks() {
      if (this.filter === 'all') return this.tasks;
      const isCompleted = this.filter === 'completed';
      return this.tasks.filter(task => task.completed === isCompleted);
    }
  },
  methods: {
    toggleComplete(task) {
      this.$emit('toggle-complete', task);
    },
    deleteTask(task) {
      this.$emit('delete-task', task);
    }
  }
}
</script>

3.3 TaskFilter Component

Create a TaskFilter.vue file in the components directory:

<template>
  <div class="task-filter">
    <button @click="setFilter('all')">All</button>
    <button @click="setFilter('active')">Active</button>
    <button @click="setFilter('completed')">Completed</button>
  </div>
</template>

<script>
export default {
  methods: {
    setFilter(filter) {
      this.$emit('set-filter', filter);
    }
  }
}
</script>

Step 4: Creating Views

4.1 Home View

Create a Home.vue file in the views directory:

<template>
  <div class="home">
    <h1>To-Do List</h1>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task">
    <TaskFilter @set-filter="setFilter" />
    <TaskList
      :tasks="tasks"
      :filter="filter"
      @toggle-complete="toggleComplete"
      @delete-task="deleteTask"
    />
  </div>
</template>

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

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

Step 5: Setting Up Routing

5.1 Configure Router

Edit the router.js file to include the Home view:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Step 6: Running the Application

6.1 Serve the Application

Run the application using the following command:

npm run serve

Visit http://localhost:8080 in your browser to see your To-Do List application in action.

Conclusion

In this project, you have learned how to:

  • Set up a Vue.js project with Vue CLI
  • Create and organize Vue components
  • Implement basic state management within components
  • Use Vue Router for navigation

This project serves as a foundation for more complex applications. Feel free to expand on this project by adding features such as task editing, due dates, and more advanced state management with Vuex.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved