Options API vs Composition API decision in Vue - Hands-On Comparison

Options API vs Composition API decision

📖 Scenario: You are building a simple Vue 3 app to display a list of fruits and their colors. You want to practice two ways of writing Vue components: the Options API and the Composition API. This will help you understand how to organize your code and decide which style to use in your projects.

🎯 Goal: Create a Vue 3 component that shows a list of fruits with their colors. First, set up the data using the Options API. Then, add a configuration variable to filter fruits by color. Next, implement the filtering logic using the Composition API. Finally, complete the component template to display the filtered fruits.

📋 What You'll Learn

Use Vue 3 with the Options API for initial data setup

Add a filter color variable to select fruits by color

Use the Composition API to filter the fruits list based on the selected color

Complete the template to render the filtered fruits with their colors

Follow Vue 3 best practices with <script setup> and reactive variables

💡 Why This Matters

🌍 Real World

Vue developers often choose between Options API and Composition API to organize their code. Understanding both helps in maintaining and scaling projects.

💼 Career

Knowing how to write Vue components in both styles is valuable for frontend developer roles, especially when working on existing codebases or new projects.

1

DATA SETUP with Options API

Create a Vue component using the Options API. Define a data function that returns an object with a fruits array. The array should have these exact objects: { name: 'Apple', color: 'Red' }, { name: 'Banana', color: 'Yellow' }, and { name: 'Grape', color: 'Purple' }.

Vue

  



export default {
  data() {
    // Your code here
  }
}

Need a hint?

Remember, in the Options API, data is a function that returns an object with your reactive data.

2

CONFIGURATION: Add filterColor variable

Inside the same Vue component, add a new data property called filterColor and set it to the string 'Red'. This will be used to filter fruits by their color.

Vue

  



export default {
  data() {
    return {
      fruits: [
        { name: 'Apple', color: 'Red' },
        { name: 'Banana', color: 'Yellow' },
        { name: 'Grape', color: 'Purple' }
      ],
      // Your code here
    }
  }
}

Need a hint?

Add filterColor inside the object returned by the data function.

3

CORE LOGIC: Filter fruits with Composition API

Rewrite the component using the <script setup> block and the Composition API. Import ref and computed from 'vue'. Create a fruits ref with the same array of fruit objects. Create a filterColor ref set to 'Red'. Then create a filteredFruits computed property that returns fruits filtered by filterColor.value.

Vue

  



// Your code here

Need a hint?

Use ref for reactive variables and computed for derived data in the Composition API.

4

COMPLETION: Display filtered fruits in template

In the template, use a <ul> element. Inside it, use v-for with fruit and index to loop over filteredFruits. For each fruit, display a <li> showing the fruit's name and color. Add a :key attribute with index for list rendering.

Vue

  



import { ref, computed } from 'vue'

const fruits = ref([
  { name: 'Apple', color: 'Red' },
  { name: 'Banana', color: 'Yellow' },
  { name: 'Grape', color: 'Purple' }
])

const filterColor = ref('Red')

const filteredFruits = computed(() => fruits.value.filter(fruit => fruit.color === filterColor.value))

Need a hint?

Use v-for to loop over filteredFruits and display each fruit's name and color inside a list item.