Composable accepting parameters in Vue - Mini Project: Build & Apply

Composable Accepting Parameters in Vue 3

📖 Scenario: You are building a Vue 3 app that tracks a user's favorite color and allows updating it. You want to create a reusable composable function that accepts the initial color as a parameter and manages the color state.

🎯 Goal: Create a composable function called useFavoriteColor that accepts an initial color parameter and returns a reactive color state and a function to update it. Then use this composable in a Vue component to display and change the favorite color.

📋 What You'll Learn

Create a composable function useFavoriteColor that accepts a parameter initialColor.

Inside the composable, create a reactive variable color initialized with initialColor.

Create a function updateColor inside the composable to change the color value.

Return color and updateColor from the composable.

Use the composable inside a Vue component to show the current color and a button to change it.

💡 Why This Matters

🌍 Real World

Creating composable functions that accept parameters helps you write reusable and flexible code in Vue apps, making it easier to manage state and logic across components.

💼 Career

Understanding composables and parameter passing is essential for modern Vue development, improving code organization and maintainability in professional projects.

1

Create the composable function with a parameter

Create a composable function called useFavoriteColor that accepts a parameter named initialColor. Inside it, create a reactive variable called color initialized with initialColor. Use Vue's ref to make color reactive.

Vue

import { ref } from 'vue'

// Create the composable function useFavoriteColor with initialColor parameter
// Your code here

Hint

Use ref(initialColor) to create a reactive variable inside the composable.

2

Add a function to update the color inside the composable

Inside the useFavoriteColor composable, add a function called updateColor that accepts a parameter newColor and sets color.value to newColor. Return updateColor along with color.

Vue

import { ref } from 'vue'

export function useFavoriteColor(initialColor) {
  const color = ref(initialColor)
  // Add updateColor function here
  // Your code here
  return { color, updateColor }
}

Hint

Define updateColor as a function that changes color.value.

3

Create a Vue component that uses the composable

Create a Vue component using <script setup>. Import useFavoriteColor and call it with the initial color 'blue'. Destructure color and updateColor from the composable. Display the current color inside a <p> tag and add a button that calls updateColor('red') when clicked.

Vue

// Import useFavoriteColor and call it with 'blue'
// Destructure color and updateColor
// Your code here



  Favorite color: {{ color }}
  Change to Red

Hint

Use @click on the button to call updateColor('red').

4

Add accessibility and finalize the component

Add an aria-label attribute to the button with the value 'Change favorite color to red' for accessibility. Also, add a role="region" and aria-live="polite" to the <p> tag to announce color changes to screen readers.

Vue

import { useFavoriteColor } from './useFavoriteColor'
const { color, updateColor } = useFavoriteColor('blue')



  
  Favorite color: {{ color }}
  
  Change to Red

Hint

Use aria-label on the button and aria-live on the paragraph for accessibility.

Practice

1.

What is the main purpose of passing parameters to a Vue composable function?

easy

A. To customize the composable's behavior for different uses

B. To make the composable function run only once

C. To prevent the composable from using Vue's reactivity

D. To automatically render a template inside the composable

Solution

1. Step 1: Understand composable functions

   Composable functions are reusable pieces of logic in Vue that can be shared across components.

2. Step 2: Role of parameters in composables

   Parameters allow passing different inputs to the composable so it can behave differently depending on the need.

3. Final Answer:

   To customize the composable's behavior for different uses -> Option A

4. Quick Check:

   Parameters customize composables = A [OK]

Hint: Parameters let composables adapt to different inputs [OK]

Common Mistakes:

• Thinking composables run only once
• Believing parameters disable reactivity
• Confusing composables with templates

2.

Which of the following is the correct way to define a composable that accepts a parameter initialCount?

function useCounter(???) {
  const count = ref(initialCount)
  return { count }
}

easy

A. useCounter((initialCount))

B. useCounter()

C. useCounter(initialCount)

D. useCounter(initialCount: number)

Solution

1. Step 1: Check JavaScript function parameter syntax

   In JavaScript, function parameters are named without types or parentheses inside the parentheses.

2. Step 2: Match parameter name with usage

   The parameter initialCount must be declared inside the parentheses as initialCount.

3. Final Answer:

   useCounter(initialCount) -> Option C

4. Quick Check:

   Function parameter syntax = D [OK]

Hint: Function parameters go inside parentheses without types [OK]

Common Mistakes:

• Adding types like in TypeScript without syntax
• Using parentheses inside parameter list
• Leaving parameters empty when needed

3.

Given this composable and usage, what will be logged?

import { ref } from 'vue'
function useGreeting(name) {
  const greeting = ref(`Hello, ${name}!`)
  return { greeting }
}

const { greeting } = useGreeting('Alice')
console.log(greeting.value)

medium

A. undefined

B. "Hello, Alice!"

C. "Hello, name!"

D. Error: greeting is not defined

Solution

1. Step 1: Understand parameter passing

   The composable receives 'Alice' as the name parameter, so the greeting string becomes "Hello, Alice!".

2. Step 2: Accessing the ref value

   The greeting is a ref, so to get the string, we use greeting.value, which logs "Hello, Alice!".

3. Final Answer:

   "Hello, Alice!" -> Option B

4. Quick Check:

   Ref .value logs "Hello, Alice!" = C [OK]

Hint: Use .value to get ref content in Vue composables [OK]

Common Mistakes:

• Logging the ref object instead of its value
• Confusing parameter name with string literal
• Forgetting to import ref from 'vue'

4.

Identify the error in this composable that accepts a parameter start:

import { ref } from 'vue'
function useTimer(start) {
  const time = ref(start)
  function increment() {
    time++
  }
  return { time, increment }
}

medium

A. Cannot increment a ref directly with ++ operator

B. Missing return statement for increment function

C. Parameter start is not reactive

D. Ref should be initialized with 0, not start

Solution

1. Step 1: Check how ref values are updated

   Refs hold their value inside the .value property, so you cannot increment the ref itself.

2. Step 2: Identify correct increment syntax

   The increment function should update time.value++ instead of time++.

3. Final Answer:

   Cannot increment a ref directly with ++ operator -> Option A

4. Quick Check:

   Update ref via .value, not ref itself = B [OK]

Hint: Use .value to update ref, not the ref variable itself [OK]

Common Mistakes:

• Trying to increment ref without .value
• Thinking parameters must be reactive
• Forgetting to return functions from composable

5.

You want a composable useFilteredList that accepts an array and a filter function as parameters. Which implementation correctly applies the filter reactively?

import { computed } from 'vue'

function useFilteredList(list, filterFn) {
  const filtered = computed(() => ??? )
  return { filtered }
}

What should replace ????

hard

A. list.filter(filterFn)

B. filterFn(list)

C. computed(() => list.filter(filterFn))

D. list.value.filter(filterFn)

Solution

1. Step 1: Understand composable parameters

   The list parameter is expected to be a ref(array) for proper reactivity in Vue composables.

2. Step 2: Reactive filtering with computed

   Inside the computed, access the array value with list.value.filter(filterFn) to apply the filter reactively whenever the list changes.

3. Final Answer:

   list.value.filter(filterFn) -> Option D

4. Quick Check:

   computed(() => list.value.filter(filterFn)) = C [OK]

Hint: Use computed(() => list.value.filter(fn)) for reactive filtering [OK]

Common Mistakes:

• Using list.filter(filterFn) without .value when list is ref
• Calling filterFn(list) instead of list.filter(filterFn)
• Unnecessarily nesting computed inside computed