Composable naming conventions (use prefix) in Vue - Step-by-Step Execution

Concept Flow - Composable naming conventions (use prefix)

Create composable function

↓

Add prefix 'use' to name

↓

Export composable

↓

Import composable in component

↓

Call composable to get reactive data

↓

Use reactive data in template

This flow shows how to create a composable function with a 'use' prefix, export it, import it in a Vue component, and use its reactive data.

Execution Sample

Vue

import { ref } from 'vue'

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

Defines a composable named 'useCounter' that provides a reactive count and an increment function.

Execution Table

Step	Action	Name Used	Result	Notes
1	Define composable function	useCounter	Function created	Prefix 'use' signals composable
2	Inside composable, create reactive state	count	Ref with initial 0	Reactive state ready
3	Define increment function	increment	Function increments count	Updates reactive state
4	Return reactive state and function	count, increment	Returned as object	Composable API exposed
5	Import composable in component	useCounter	Composable imported	Ready to use in component
6	Call composable in setup()	useCounter()	Get count and increment	Reactive data available
7	Use count in template	count	Displays current count	Reactive updates reflected
8	Call increment on event	increment()	count.value increases	UI updates automatically
9	Exit	N/A	Composable used successfully	Naming convention helps clarity

💡 Composable usage ends after reactive data is used and updated in component

Variable Tracker

Variable	Start	After 1	After 2	Final
count.value	0	0	0	2
increment	function	function	function	function

Key Moments - 3 Insights

Why do we prefix composable functions with 'use'?

The 'use' prefix clearly identifies the function as a composable, making it easy to recognize in the code. See execution_table step 1 where 'useCounter' is defined.

What happens if we don't use the 'use' prefix?

Without the prefix, it is harder to tell if a function is a composable or a regular function, which can confuse developers. The naming convention in step 1 helps avoid this.

How does the reactive state 'count' update in the component?

The 'count' is a ref returned by the composable. When 'increment' is called (step 8), 'count.value' increases and Vue automatically updates the UI. See variable_tracker for count changes.

Visual Quiz - 3 Questions

Look at the execution_table step 6. What does calling useCounter() return?

A An object with reactive count and increment function

B A number representing the count

C A string with the name 'useCounter'

D Nothing, it just runs code

💡 Hint

Check the 'Result' column in step 6 of execution_table

At which step does the reactive count value increase?

A Step 3

B Step 5

C Step 8

D Step 2

💡 Hint

Look for when increment() is called in execution_table

If we rename 'useCounter' to 'counter', what is the main impact?

A No impact, code works the same

B It becomes harder to identify it as a composable

C It breaks the reactive state

D The increment function stops working

💡 Hint

Refer to key_moments about the importance of the 'use' prefix

Concept Snapshot

Composable functions in Vue should start with 'use' prefix.
This naming helps identify them as reusable reactive logic.
They return reactive state and functions.
Import and call them inside setup() of components.
Use returned reactive data in templates for automatic updates.

Full Transcript

This visual execution shows how to create and use a Vue composable function with the 'use' prefix. First, we define a function named 'useCounter' that creates a reactive count variable and an increment function. We export this composable. Then, in a Vue component, we import and call 'useCounter' inside the setup function to get reactive data. The count value is used in the template and updates automatically when increment is called. The 'use' prefix helps developers quickly recognize composables in code, improving clarity and maintainability.

Practice

1. Why should composable functions in Vue start with the prefix use?

easy

A. To make them private and inaccessible outside the file

B. To make them run faster in the browser

C. To clearly indicate they are composables and follow Vue conventions

D. To prevent them from being imported accidentally

Solution

1. Step 1: Understand Vue composable naming conventions

   Vue recommends starting composable function names with use to clearly identify them as composables.

2. Step 2: Recognize the purpose of the prefix

   The prefix helps developers quickly know the function is a composable and follows community standards.

3. Final Answer:

   To clearly indicate they are composables and follow Vue conventions -> Option C

4. Quick Check:

   Composable prefix = use [OK]

Hint: Composable names start with 'use' to show their purpose [OK]

Common Mistakes:

• Thinking prefix affects performance
• Believing prefix hides the function
• Ignoring naming conventions

2. Which of the following is the correct syntax for naming a composable that fetches user data?

easy

A. useFetchUserData()

B. fetchUserData()

C. getUserData()

D. userDataFetch()

Solution

1. Step 1: Identify the composable prefix

   The composable should start with use to follow Vue naming conventions.

2. Step 2: Check the full function name

   useFetchUserData clearly shows it is a composable fetching user data.

3. Final Answer:

   useFetchUserData() -> Option A

4. Quick Check:

   Composable name starts with 'use' [OK]

Hint: Composable names always start with 'use' [OK]

Common Mistakes:

• Omitting the 'use' prefix
• Using verbs without 'use'
• Confusing composable with normal functions

3. Given this composable code:

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

What will be the output of console.log(counter.count.value) after calling counter.increment() twice?

medium

A. 1

B. 2

C. 0

D. undefined

Solution

1. Step 1: Understand the initial state

   The count ref starts at 0.

2. Step 2: Apply the increment function twice

   Each call to increment() increases count.value by 1, so after two calls, count.value is 2.

3. Final Answer:

   2 -> Option B

4. Quick Check:

   Increment twice = count 2 [OK]

Hint: Increment twice means count.value becomes 2 [OK]

Common Mistakes:

• Forgetting to access .value of ref
• Assuming count resets
• Confusing function call effects

4. Identify the error in this composable naming:

export function fetchData() {
  // composable logic
}

medium

A. Composable functions cannot be exported

B. Function should be a class, not a function

C. Function name is too long

D. Missing 'use' prefix in function name

Solution

1. Step 1: Check naming conventions for composables

   Composable functions must start with use to be recognized as such.

2. Step 2: Identify the missing prefix

   The function fetchData lacks the use prefix, so it breaks the convention.

3. Final Answer:

   Missing 'use' prefix in function name -> Option D

4. Quick Check:

   Composable names need 'use' prefix [OK]

Hint: Composable names must start with 'use' prefix [OK]

Common Mistakes:

• Ignoring naming conventions
• Thinking export is disallowed
• Confusing function types

5. You have multiple composables related to authentication: useAuthLogin, useAuthLogout, and useAuthStatus. Why is using the useAuth prefix a good practice?

hard

A. It groups related composables, making code easier to understand and maintain

B. It makes the composables run faster by grouping them

C. It hides the composables from other parts of the app

D. It automatically imports all composables with the prefix

Solution

1. Step 1: Understand prefix grouping purpose

   Using a common prefix groups related composables logically.

2. Step 2: Recognize benefits of grouping

   This grouping helps developers quickly find and understand related functions, improving maintainability.

3. Final Answer:

   It groups related composables, making code easier to understand and maintain -> Option A

4. Quick Check:

   Prefix groups related composables [OK]

Hint: Use prefixes to group related composables clearly [OK]

Common Mistakes:

• Assuming prefix affects performance
• Thinking prefix hides composables
• Believing prefix auto-imports functions