Production Project: Task Dashboard

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Break a feature down into components
Design the state flow
Apply a production checklist

Let's break it down simply

Split the project into TaskForm, TaskList, TaskItem, and FilterBar components. Store tasks in a Pinia store and compute filteredTasks as a getter. Add dashboard and task detail routes in Router, and check form accessibility, the empty state, and error handling.

javascript

// stores/tasks.js
import { defineStore } from 'pinia'

export const useTasksStore = defineStore('tasks', {
  state: () => ({ tasks: [], filter: 'all' }),
  getters: {
    visible: (state) => state.tasks.filter((task) =>
      state.filter === 'all' ||
      (state.filter === 'done' ? task.done : !task.done)
    )
  },
  actions: {
    add(title) {
      this.tasks.push({ id: crypto.randomUUID(), title, done: false })
    },
    toggle(id) {
      const task = this.tasks.find((item) => item.id === id)
      if (task) task.done = !task.done
    }
  }
})

You should see

A filterable task dashboard with persistent component state

Try it yourself

Finish building task add/toggle/delete, all/open/done filters, a detail route, and localStorage persistence.

Vue Best Practices — Vue.js

Easy traps

Writing all the store logic inside a UI component
Skipping keyboard focus and form labels
Not testing empty/error states

Exercise

Finish building task add/toggle/delete, all/open/done filters, a detail route, and localStorage persistence.

You'll know it worked when: A filterable task dashboard with persistent component state