Why advanced patterns matter in Vue - See It in Action

Why advanced patterns matter

📖 Scenario: You are building a Vue 3 application that manages a list of tasks for a team. As the app grows, you want to keep your code clean, reusable, and easy to maintain. Advanced Vue patterns help you organize your code better and avoid bugs.

🎯 Goal: Build a Vue 3 component that uses advanced patterns like the Composition API with ref, computed, and watch to manage tasks. You will also use a composable function to share logic and demonstrate how these patterns improve code clarity and reusability.

📋 What You'll Learn

Create a reactive list of tasks using ref

Add a configuration variable to filter tasks by completion status

Use a computed property to get filtered tasks

Use a composable function to encapsulate task management logic

💡 Why This Matters

🌍 Real World

In real projects, managing state and logic cleanly is vital as apps grow. Advanced Vue patterns like composables and computed properties help keep code easy to read and reuse.

💼 Career

Vue developers often use these patterns to build scalable, maintainable applications. Knowing them improves your ability to work on professional Vue projects.

1

Set up reactive task list

Create a Vue 3 component with the setup() function. Inside it, create a reactive variable called tasks using ref with this exact array of objects: [{ id: 1, title: 'Write report', completed: false }, { id: 2, title: 'Email client', completed: true }, { id: 3, title: 'Update website', completed: false }].

Vue

// Create a reactive variable called tasks with the given array
// Your code here

Hint

Use ref from Vue to make the tasks array reactive inside setup().

2

Add filter configuration

Inside the setup() function, create a reactive variable called showCompleted using ref and set it to false. This will control if completed tasks are shown.

Vue

import { ref } from 'vue'

const tasks = ref([
  { id: 1, title: 'Write report', completed: false },
  { id: 2, title: 'Email client', completed: true },
  { id: 3, title: 'Update website', completed: false }
])

// Create a reactive variable called showCompleted and set it to false
// Your code here

Hint

Use ref(false) to create the showCompleted reactive variable.

3

Create computed filtered tasks

Inside setup(), create a computed property called filteredTasks that returns tasks filtered by showCompleted. If showCompleted.value is true, return all tasks; otherwise, return only tasks where completed is false.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Write report', completed: false },
  { id: 2, title: 'Email client', completed: true },
  { id: 3, title: 'Update website', completed: false }
])

const showCompleted = ref(false)

// Create a computed property filteredTasks that filters tasks based on showCompleted
// Your code here

Hint

Use computed from Vue and a ternary operator to filter tasks.

4

Use a composable for task logic

Create a composable function called useTasks outside the component that returns tasks, showCompleted, and filteredTasks. Then inside setup(), call useTasks() and use its returned values.

Vue

import { ref, computed } from 'vue'

// Create a composable function useTasks that returns tasks, showCompleted, filteredTasks
function useTasks() {
  // Your code here
}

// Inside setup, call useTasks and get tasks, showCompleted, filteredTasks
const { tasks, showCompleted, filteredTasks } = useTasks()

Hint

Define useTasks as a function returning the reactive variables and computed property. Then call it inside setup().