How to Use Composable in Vue: Simple Guide with Examples

In Vue 3, a composable is a function that uses Vue's reactive APIs to share reusable logic. You use it by creating a function that returns reactive state or methods, then call this function inside your component's setup() to access its features.

Syntax

A composable is a plain JavaScript function that uses Vue's reactive features like ref or reactive. It returns the reactive data or functions you want to share. You call this function inside the setup() of your component to use its logic.

Key parts:

• function useSomething(): The composable function name usually starts with use.
• ref() or reactive(): Vue's reactive APIs inside the composable.
• return: Expose reactive state or methods to the component.
• setup(): Where you call the composable in your component.

vue

import { ref } from 'vue';

function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
};

Example

This example shows a simple counter composable that tracks a number and lets you increase it. The component uses the composable inside setup() and displays the count with a button to increment it.

vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

const { count, increment } = useCounter();
</script>

Output

Count: 0 (initially)
When you click the button, the count number increases by 1 each time.

Common Pitfalls

Common mistakes when using composables include:

• Not calling the composable inside setup(), which breaks reactivity.
• Returning non-reactive values, so changes don't update the UI.
• Sharing state incorrectly by using global variables inside composables instead of creating fresh state per call.

Always return reactive references or objects and call composables inside setup() to keep state isolated per component.

vue

/* Wrong: composable called outside setup, no reactivity */
// const { count, increment } = useCounter(); // outside setup

/* Right: composable called inside setup */
export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
};

Quick Reference

• Define composable: function starting with use that returns reactive state or methods.
• Use inside setup: call composable function inside setup() to get reactive data.
• Return reactive data: use ref or reactive inside composable and return them.
• Keep state local: avoid global variables inside composables to prevent shared state bugs.

Key Takeaways

Composable is a function that shares reactive logic using Vue's reactive APIs.

Always call composables inside the component's setup() function.

Return reactive references or objects from composables for UI updates.

Avoid global state inside composables to keep state isolated per component.

Use composables to keep your code clean and reusable.