Sharing composables across components in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a composable in Vue 3?

A composable is a reusable function that uses Vue's Composition API to share reactive state and logic across components.

beginner

How do you share a composable between multiple Vue components?

You create a composable function in a separate file and import it into any component that needs the shared logic or state.

intermediate

Why should composables be pure functions without side effects?

Pure composables are easier to reuse and test because they don't depend on or change external state unexpectedly.

intermediate

What Vue 3 feature allows composables to share reactive state across components?

Vue 3's reactive and ref functions allow composables to create reactive state that components can use and update.

advanced

How can you avoid creating multiple independent states when using a composable in different components?

You can create a shared reactive state outside the composable function or use a singleton pattern so all components use the same state instance.

What is the main purpose of a composable in Vue 3?

A To share reusable logic and state across components

B To style components with CSS

C To define routes in the app

D To create templates for components

Composable functions let you share logic and reactive state easily between components.

How do you use a composable in a Vue component?

A Add it as a component property

B Import the composable function and call it inside the setup() function

C Use it only in the main.js file

D Write the composable code inside the template

You import the composable and call it inside setup() to access its reactive state and functions.

If you want all components to share the same reactive state from a composable, what should you do?

A Use a different composable for each component

B Define the reactive state inside each component separately

C Use Vuex instead of composables

D Define the reactive state outside the composable function

Defining reactive state outside the composable function creates a shared singleton state.

Which Vue 3 API is commonly used inside composables to create reactive variables?

A watch()

B computed()

C ref()

D provide()

ref() creates reactive variables that composables can return and components can use.

What is a benefit of using composables over mixins in Vue 3?

A Composables avoid naming conflicts and are easier to read

B Mixins are faster to load

C Composables require less code than mixins

D Mixins support reactive state better

Composables provide clearer, more flexible code without the naming conflicts common in mixins.

Explain how you would create and share a composable that tracks a counter value across multiple Vue components.

Think about how reactive state and functions can be reused by importing.

Describe the difference between having reactive state inside a composable function versus outside it when sharing across components.

Consider how JavaScript closures and imports affect state instances.

Practice

1. What is the main purpose of a composable in Vue 3?
function useCounter() { const count = ref(0); return { count }; }

easy

A. To register global Vue directives

B. To define a new component template

C. To style components with CSS

D. To share reusable reactive logic across multiple components

Solution

1. Step 1: Understand what a composable function does

   A composable is a function that returns reactive state or methods to be reused.

2. Step 2: Identify the purpose of the example composable

   The example returns a reactive count variable to share logic across components.

3. Final Answer:

   To share reusable reactive logic across multiple components -> Option D

4. Quick Check:

   Composable = reusable logic [OK]

Hint: Composable functions return reactive state for reuse [OK]

Common Mistakes:

• Thinking composables define templates
• Confusing composables with CSS styling
• Assuming composables register directives

2. Which is the correct way to import and use a composable named useTimer inside a Vue component's setup() function?

easy

A. import { useTimer } from './composables'; const { time } = useTimer();

B. import useTimer from './composables'; const time = useTimer;

C. const useTimer = require('./composables'); const { time } = useTimer();

D. import useTimer from './composables'; setup() { return useTimer; }

Solution

1. Step 1: Import the composable correctly

   Use ES module import syntax with curly braces if composable is a named export.

2. Step 2: Call the composable function inside setup()

   Call useTimer() to get reactive state, then destructure needed properties.

3. Final Answer:

   import { useTimer } from './composables'; const { time } = useTimer(); -> Option A

4. Quick Check:

   Import named + call function = correct usage [OK]

Hint: Import named composable and call it inside setup() [OK]

Common Mistakes:

• Using require() instead of import
• Not calling the composable function
• Importing default when composable is named export

3. Given this composable and component code, what will be logged?

// composable.js
import { ref } from 'vue';
export function useCount() {
  const count = ref(0);
  function increment() { count.value++; }
  return { count, increment };
}

// Component.vue
import { useCount } from './composable';
export default {
  setup() {
    const { count, increment } = useCount();
    increment();
    increment();
    console.log(count.value);
    return {};
  }
}

medium

A. 2

B. 0

C. undefined

D. Error: count is not defined

Solution

1. Step 1: Analyze composable logic

   Count starts at 0 and increments by 1 each time increment() is called.

2. Step 2: Trace component setup execution

   Increment is called twice, so count.value becomes 2, then logged.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   Two increments = count 2 [OK]

Hint: Count increments twice, so value is 2 [OK]

Common Mistakes:

• Forgetting to call increment()
• Confusing ref with plain variable
• Expecting count to be 0 without increments

4. Identify the error in this composable usage:

import { ref } from 'vue';
export function useData() {
  const data = ref(null);
  fetch('/api').then(res => res.json()).then(json => data = json);
  return { data };
}

medium

A. Using ref instead of reactive

B. Missing await keyword before fetch

C. Reassigning the ref variable instead of its value

D. Not returning the data variable

Solution

1. Step 1: Check how ref is updated

   Ref variables must update their .value, not be reassigned.

2. Step 2: Identify the mistake in the fetch callback

   The code assigns data = json instead of data.value = json.

3. Final Answer:

   Reassigning the ref variable instead of its value -> Option C

4. Quick Check:

   Update ref.value, not ref itself [OK]

Hint: Update ref.value, not the ref variable [OK]

Common Mistakes:

• Assigning directly to ref variable
• Forgetting to handle async properly
• Confusing reactive with ref usage

5. You want to share a composable that tracks a user's online status across multiple components. Which approach ensures each component has its own independent reactive state?

hard

A. Export a single reactive object and import it directly in all components

B. Export a function that returns new refs each call, then import and call it in each component

C. Define reactive state inside a global variable outside the composable

D. Use a Vuex store instead of composables for reactive state

Solution

1. Step 1: Understand independent reactive state per component

   Each component needs its own fresh reactive refs to avoid shared state.

2. Step 2: Identify correct composable pattern

   Exporting a function that returns new refs each call creates isolated state per component.

3. Final Answer:

   Export a function that returns new refs each call, then import and call it in each component -> Option B

4. Quick Check:

   Function returns fresh state per call [OK]

Hint: Return new refs inside function for isolated state [OK]

Common Mistakes:

• Sharing a single reactive object causing shared state
• Using global variables outside composables
• Confusing Vuex with composables for local state