Creating a custom composable in Vue - Visual Walkthrough

Concept Flow - Creating a custom composable

Define composable function

↓

Inside: create reactive state

↓

Inside: define functions to update state

↓

Return state and functions

↓

Use composable in component

↓

Component reacts to state changes

This flow shows how to create a composable function that holds reactive state and functions, then use it inside a Vue component to share logic.

Execution Sample

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

Defines a composable that creates a reactive count and an increment function to update it.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Call useCounter()	No count	count = 0	Composable returns count and increment
2	Call increment()	count = 0	count = 1	count reactive value updated
3	Call increment()	count = 1	count = 2	count reactive value updated
4	Component reads count	count = 2	count = 2	Component shows count = 2
5	No more actions	count = 2	count = 2	Execution ends

💡 No more actions; composable usage complete

Variable Tracker

Variable	Start	After 1	After 2	Final
count.value	undefined	0	1	2

Key Moments - 3 Insights

Why do we use ref() inside the composable?

ref() creates a reactive variable so Vue tracks changes and updates the component automatically, as shown in execution_table steps 1 and 2.

What happens when increment() is called multiple times?

Each call increases count.value by 1, updating the reactive state and causing the component to re-render, as seen in steps 2 and 3.

Why do we return count and increment from the composable?

Returning them allows components to access the reactive state and functions, enabling shared logic and reactivity, demonstrated in step 1.

Visual Quiz - 3 Questions

Look at the execution table, what is count.value after the second increment call?

A 2

B 1

C 0

D Undefined

💡 Hint

Check execution_table row 3 where increment() updates count.value to 2

At which step does the component first display the count value?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at execution_table row 4 where component reads count to display

If we did not use ref() for count, what would happen?

A count would still be reactive

B increment() would not work

C count would not update the component automatically

D The composable would throw an error

💡 Hint

Recall key_moments about ref() creating reactive variables

Concept Snapshot

Creating a custom composable:
- Define a function starting with 'use'
- Inside, create reactive state with ref() or reactive()
- Define functions to update state
- Return state and functions
- Use composable in components to share reactive logic

Full Transcript

This visual trace shows how to create a custom composable in Vue. First, we define a function called useCounter that creates a reactive variable count using ref(0). We also define an increment function that increases count.value by one. The composable returns both count and increment. When the composable is used in a component, calling increment updates count.value, which triggers the component to re-render and show the new count. The execution table tracks each step: calling useCounter initializes count to 0, calling increment updates count to 1 and then 2, and the component reads count to display it. Key moments clarify why ref() is needed for reactivity, how increment updates state, and why returning state and functions is important. The quiz tests understanding of count's value changes, when the component displays count, and the role of ref(). This helps beginners see how composables share reactive logic cleanly in Vue.