Creating a custom composable in Vue - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this custom composable return?

Consider this Vue 3 custom composable that tracks window width. What is the output when you call useWindowWidth()?

Vue

import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowWidth() {
  const width = ref(window.innerWidth);

  function updateWidth() {
    width.value = window.innerWidth;
  }

  onMounted(() => {
    window.addEventListener('resize', updateWidth);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWidth);
  });

  return { width };
}

A A function that returns the current window width when called

B A number representing the window width at the time of calling

C An object with a reactive property 'width' that updates on window resize

D An array containing the window width and a function to update it

💡 Hint

Think about what ref returns and how the event listeners affect it.

The composable returns an object with a reactive width property. This property updates automatically when the window is resized because of the event listener.

❓ state_output

intermediate

What is the value of count.value after calling useCounter() and incrementing twice?

Given this custom composable for a counter, what is 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 };
}

// Usage example:
const { count, increment } = useCounter();
increment();
increment();

A 0

B undefined

C 1

D 2

💡 Hint

Remember that count is a ref and increments by 1 each time increment() is called.

The count starts at 0 and increments by 1 each time increment() is called. After two calls, it becomes 2.

📝 Syntax

advanced

Which option correctly defines a composable that returns a reactive boolean toggled by a function?

Select the option that correctly defines a Vue 3 composable returning a reactive boolean isActive and a function toggle to flip its value.

A

import { ref } from 'vue';
export function useToggle() {
  const isActive = ref(false);
  function toggle() {
    isActive.value = !isActive.value;
  }
  return { isActive, toggle };
}

B

import { ref } from 'vue';
export function useToggle() {
  let isActive = false;
  function toggle() {
    isActive = !isActive;
  }
  return { isActive, toggle };
}

C

import { reactive } from 'vue';
export function useToggle() {
  const state = reactive({ isActive: false });
  function toggle() {
    state.isActive = !state.isActive;
  }
  return { isActive: state.isActive, toggle };
}

D

import { ref } from 'vue';
export function useToggle() {
  const isActive = ref(false);
  function toggle() {
    isActive = !isActive;
  }
  return { isActive, toggle };
}

💡 Hint

Remember to use .value to access or update refs.

Option A correctly uses ref and updates isActive.value. Option A returns a non-reactive primitive. Option A uses a plain variable, not reactive. Option A tries to toggle the ref itself, not its value.

🔧 Debug

advanced

Why does this composable not update the reactive property on button click?

This composable is intended to toggle a boolean on button click, but the UI does not update. What is the cause?

Vue

<template>
  <button @click="toggle">Toggle</button>
  <p>{{ isActive }}</p>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(false);

function toggle() {
  isActive.value = !isActive.value;
}
</script>

A The ref is not imported from 'vue'

B The toggle function assigns a new value to the ref variable instead of updating its .value property

C The button click event is not bound correctly

D The template does not use double curly braces to display isActive

💡 Hint

Check how you update reactive refs inside functions.

The toggle function tries to assign a boolean directly to the ref variable isActive, which breaks reactivity. It should update isActive.value instead.

🧠 Conceptual

expert

What is the main advantage of using a custom composable in Vue 3?

Why do developers create custom composables in Vue 3? Choose the best explanation.

A To reuse reactive logic across multiple components without repeating code

B To replace Vue components with simpler functions

C To automatically generate UI templates from JavaScript code

D To avoid using the Composition API and stick to Options API

💡 Hint

Think about code reuse and organization in Vue 3.

Custom composables let you share reactive logic easily between components, improving code reuse and clarity.