Sharing composables across components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a composable function in a Vue component.

Vue

<script setup>
import { [1] } from './useCounter'
const count = useCounter()
</script>

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

AuseCounter

Bcounter

CuseCount

DcounterFunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than the exported composable function.

Forgetting to import the composable before using it.

You import the composable by its exact exported name, here 'useCounter'.

2fill in blank

medium

Complete the code to define a reactive state inside a composable.

Vue

import { [1] } from 'vue'
export function useCounter() {
  const count = [1](0)
  return { count }
}

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' for a number instead of 'ref'.

Not importing 'ref' from Vue.

Use 'ref' to create a reactive primitive value like a number.

3fill in blank

hard

Fix the error in the composable export to allow sharing across components.

Vue

import { ref } from 'vue'
export function [1]() {
  const count = ref(0)
  return { count }
}

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

AcounterFunction

BuseCounter

Ccounter

Dusecounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using default export instead of named export.

Not prefixing the function name with 'use'.

Composable functions should be named with 'use' prefix and exported as named functions, not default.

4fill in blank

hard

Fill both blanks to correctly update the count in the composable and expose the increment function.

Vue

import { ref } from 'vue'
export function useCounter() {
  const count = ref(0)
  function [1]() {
    count.value[2]
  }
  return { count, [1] }
}

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

Aincrement

Bcount

C++

D--

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the function incorrectly.

Using '--' instead of '++'.

The function name is 'increment' and '++' increases the 'count' value by one.

5fill in blank

hard

Fill all three blanks to create a composable that shares a reactive message and a function to update it.

Vue

import { [1] } from 'vue'
export function useMessage() {
  const message = [1]('Hello')
  function [2](newMsg) {
    message.value = newMsg
  }
  return { message, [2] }
}

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

Aref

BupdateMessage

CsetMessage

DchangeMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the function in definition and return.

Using 'reactive' instead of 'ref' for a string.

Use 'ref' to create reactive message, and 'updateMessage' as the function name to change it.