Composables for reusable logic in Vue - Mini Project: Build & Apply

Composables for reusable logic

📖 Scenario: You are building a Vue 3 app that needs to track a counter value and allow incrementing it. You want to reuse this counting logic in multiple components without repeating code.

🎯 Goal: Create a composable function that holds the counter state and an increment function. Then use this composable inside a Vue component to display and update the counter.

📋 What You'll Learn

Create a composable function named useCounter that returns a reactive counter and an increment function

Use Vue's ref to create the counter state inside the composable

Create a Vue component that imports and uses useCounter

Display the counter value and add a button to increment it using the composable's function

💡 Why This Matters

🌍 Real World

Composables help you keep your Vue app code clean by putting reusable logic in one place. This is like having a shared tool you can use in many parts of your app.

💼 Career

Knowing how to write and use composables is important for Vue developers. It shows you can write modular, maintainable code that scales well in real projects.

1

Create the composable function with counter state

Create a composable function called useCounter that uses Vue's ref to create a reactive variable named count initialized to 0. Export this function.

Vue

// Your code here to create and export useCounter composable

Need a hint?

Use ref(0) to create a reactive count variable inside useCounter.

2

Add an increment function inside the composable

Inside the useCounter function, add a function named increment that increases count.value by 1. Return increment along with count.

Vue

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  // Add increment function here
  // Your code here
  return { count }
}

Need a hint?

Define increment as a function that adds 1 to count.value.

3

Create a Vue component that uses the composable

Create a Vue component using <script setup>. Import useCounter from the composable file. Call useCounter() and destructure count and increment. Display count in a <p> and add a <button> that calls increment on click.

Vue

// Import useCounter and call it
// Your code here



  Count: {{ count }}
  Increment

Need a hint?

Use import { useCounter } from './useCounter' and call it inside <script setup>.

4

Complete the component with proper export and template

Ensure the Vue component uses the <script setup> syntax with the import and composable call. The template must have a <p> showing count and a <button> with @click calling increment. This completes the reusable logic and UI.

Vue

Need a hint?

Make sure the component uses <script setup> and the template shows the count and increment button.