How to Create a Composable in Vue 3: Simple Guide

To create a composable in Vue, define a function that uses Vue's Composition API features like ref or reactive and return the reactive state or methods you want to share. Then import and call this function inside your components to reuse the logic.

Syntax

A composable is a plain function that uses Vue's Composition API to create and return reactive state or functions. It usually starts with use prefix by convention.

• function useExample() {}: Defines the composable function.
• const state = ref() or reactive(): Creates reactive data.
• return { ... }: Exposes state and methods to components.

javascript

import { ref } from 'vue';

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

Example

This example shows a simple counter composable that tracks a number and provides an increment function. You can import and use it inside any Vue component to share this logic.

vue

<script setup>
import { useCounter } from './useCounter';

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

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

Output

A webpage showing "Count: 0" and a button labeled "Increase". Clicking the button increases the count number by 1 each time.

Common Pitfalls

Common mistakes when creating composables include:

• Not returning reactive state or methods, so the component can't use them.
• Using non-reactive variables inside composables, which won't update the UI.
• Sharing state directly between components without creating fresh instances, causing unexpected shared state.

Always return fresh reactive state inside the composable function to avoid shared state bugs.

javascript

/* Wrong: shared state outside function causes shared data */
import { ref } from 'vue';
const count = ref(0); // shared across all users

export function useCounter() {
  function increment() {
    count.value++;
  }
  return { count, increment };
}

/* Right: state inside function creates new instance per use */
export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

Quick Reference

• Define composable: function starting with use that returns reactive state or methods.
• Use Vue API: ref, reactive, computed, watch, etc.
• Return fresh state: create reactive variables inside the function to avoid shared state.
• Import and call: use composables inside setup() or <script setup> in components.

Key Takeaways

Create composables as functions that return reactive state or methods using Vue's Composition API.

Always define reactive variables inside the composable function to avoid shared state bugs.

Use composables by importing and calling them inside component setup functions.

Prefix composable functions with 'use' to follow Vue community conventions.

Composable logic can be reused easily across multiple components for cleaner code.