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.