Why the Composition API exists in Vue - See It in Action

Understanding Why the Composition API Exists in Vue

📖 Scenario: You are building a simple Vue app to manage a list of tasks. You want to organize your code clearly and reuse logic easily.

🎯 Goal: Learn why Vue introduced the Composition API by creating a small app that uses it to manage tasks and compare it with the Options API.

📋 What You'll Learn

Create a reactive list of tasks using the Composition API

Add a reactive variable to track new task input

Write a function to add new tasks to the list

Use the setup() function to organize logic clearly

💡 Why This Matters

🌍 Real World

Developers use the Composition API in Vue to write cleaner, more maintainable code especially in bigger projects with complex logic.

💼 Career

Understanding the Composition API is essential for modern Vue development roles and helps in building scalable, reusable components.

1

Set up the initial reactive data with Composition API

Create a Vue component with a setup() function. Inside it, create a reactive array called tasks with these exact strings: 'Buy groceries', 'Walk the dog', and 'Read a book'.

Vue

// Create a reactive array called tasks with 'Buy groceries', 'Walk the dog', and 'Read a book'

Need a hint?

Use ref from Vue to create reactive data inside setup().

2

Add a reactive variable for new task input

Inside the same setup() function, create a reactive string variable called newTask and set it to an empty string ''.

Vue

import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
// Create a reactive string called newTask and set it to ''

Need a hint?

Use ref again to create a reactive string for the new task input.

3

Write a function to add new tasks

Inside setup(), write a function called addTask that adds the current newTask.value to the tasks.value array, then clears newTask.value to an empty string.

Vue

import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
const newTask = ref('')
// Write addTask function to add newTask.value to tasks.value and clear newTask.value

Need a hint?

Check if newTask.value is not empty before adding. Use push to add to the array.

4

Complete the component by returning variables and function

At the end of setup(), return an object with tasks, newTask, and addTask so they can be used in the template.

Vue

import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
const newTask = ref('')

function addTask() {
  if (newTask.value.trim() !== '') {
    tasks.value.push(newTask.value.trim())
    newTask.value = ''
  }
}
// Return tasks, newTask, and addTask

Need a hint?

Return the reactive variables and function as an object from setup().