Composable naming conventions (use prefix) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use a prefix in Vue composable names?

In Vue 3, composables are functions that encapsulate reusable logic. Why is it recommended to prefix composable function names, for example, with use?

A To clearly indicate the function is a composable and to avoid naming conflicts with other functions or variables.

B To make the function run automatically when the component mounts.

C To ensure the function is only used inside the <code>setup()</code> method of a component.

D To make the function globally available without importing it.

💡 Hint

Think about how naming helps developers understand code and avoid mistakes.

Using a prefix like use helps developers recognize composables easily and prevents name clashes with other functions or variables in the codebase.

❓ component_behavior

intermediate

What is the output when using a composable with prefix?

Consider this Vue 3 composable function named useCounter that returns a reactive count and an increment function. What will be the value of count.value after calling increment() twice?

Vue

import { ref } from 'vue';

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

// In a component setup:
const { count, increment } = useCounter();
increment();
increment();
// What is count.value now?

A 0

B 2

C 1

D undefined

💡 Hint

Each call to increment() increases the count by one.

The count starts at 0 and increments twice, so its value becomes 2.

📝 Syntax

advanced

Identify the correct composable naming and export syntax

Which option correctly defines and exports a composable named with the recommended prefix?

A export function useFetchData() { /* logic */ }

B function fetchDataUse() { /* logic */ } export default fetchDataUse;

C export const fetchData = () => { /* logic */ }

D export function FetchData() { /* logic */ }

💡 Hint

Look for the function name starting with use and proper export syntax.

Option A correctly uses the use prefix and exports the function directly. Other options either lack the prefix or use incorrect naming conventions.

🔧 Debug

advanced

Why does this composable cause a naming conflict?

Given two composables in the same project, one named fetchData and another named useFetchData, importing both in a component causes a conflict error. Why?

A Because Vue does not allow more than one composable in a component.

B Because composables must always be default exports to avoid conflicts.

C Because the <code>use</code> prefix is reserved and cannot be used in multiple composables.

D Because <code>fetchData</code> and <code>useFetchData</code> are too similar and the import aliases overlap causing a naming conflict.

💡 Hint

Think about how import names and variable names in JavaScript can clash.

Importing two functions with similar names without aliasing can cause conflicts if they are imported with the same local name. The prefix helps but does not prevent conflicts if import names collide.

❓ state_output

expert

What is the final value of shared state in composables with prefix?

Two components import the same composable useSharedState which uses a reactive variable declared outside the function. What is the value of sharedCount.value after both components call increment() once?

Vue

import { ref } from 'vue';

const sharedCount = ref(0);

export function useSharedState() {
  function increment() {
    sharedCount.value++;
  }
  return { sharedCount, increment };
}

// Component A:
const { sharedCount, increment } = useSharedState();
increment();

// Component B:
const { sharedCount: sharedCountB, increment: incrementB } = useSharedState();
incrementB();

// What is sharedCount.value now?

A 1

B 0

C 2

D undefined

💡 Hint

Consider that the reactive variable is shared outside the composable function.

Because sharedCount is declared outside the composable, both components share the same reactive state. Each increment adds 1, so total is 2.

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