Composable naming conventions (use prefix) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a composable function with the correct prefix.

Vue

export function [1]Counter() {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
}

Drag options to blanks, or click blank then click option'

Afetch

Bget

Cuse

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using prefixes like 'get' or 'set' which are not standard for composables.

Omitting the prefix entirely.

Composable functions in Vue should start with the prefix 'use' to clearly indicate their purpose.

2fill in blank

medium

Complete the code to import a composable with the correct naming convention.

Vue

import { [1]Auth } from '@/composables/useAuth.js'

const { user } = [1]Auth()

Drag options to blanks, or click blank then click option'

Aset

Bget

Cfetch

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' or 'fetch' as prefixes which are not standard.

Not matching the prefix in both import and usage.

When importing composables, the function name should start with 'use' to follow Vue conventions.

3fill in blank

hard

Fix the error in the composable function name to follow Vue naming conventions.

Vue

export function [1]Counter() {
  const count = ref(0)
  return { count }
}

Drag options to blanks, or click blank then click option'

Aget

Buse

Ccounter

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Naming composables without the 'use' prefix.

Using unrelated prefixes like 'get' or 'set'.

Composable functions must start with 'use' to be recognized properly in Vue.

4fill in blank

hard

Fill both blanks to correctly define and export a composable with the proper prefix.

Vue

export function [1]Theme() {
  const theme = ref('light')
  function toggle() {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
  return { theme, [2] }
}

Drag options to blanks, or click blank then click option'

Ause

Btoggle

Cswitch

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong prefixes like 'switch' or 'change'.

Returning a function name that does not exist.

The composable function must start with 'use' and the returned function should be named 'toggle' as defined.

5fill in blank

hard

Fill all three blanks to correctly create a composable that manages a boolean state with proper naming conventions.

Vue

export function [1]Toggle() {
  const state = ref(false)
  function [2]() {
    state.value = !state.value
  }
  return { [3]: state, toggle }
}

Drag options to blanks, or click blank then click option'

Ause

Btoggle

Cstate

Dswitch

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prefixes like 'switch'.

Mismatching returned keys and variable names.

The composable uses the 'use' prefix, defines a 'toggle' function, and returns the 'state' variable properly named.

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