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.