Composables: Reusable Composition Functions
Extract reactive logic into composable functions prefixed with use, share them across components, and understand how they differ from mixins.
What Are Composables?
A composable is a function that uses Composition API hooks to encapsulate and reuse stateful logic. They're the Composition API equivalent of mixins — but without namespace collisions or hidden dependencies.
A Basic Composable
Extract reactive logic into a function starting with use. It can use ref, computed, watch, and lifecycle hooks — just like setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);All lessons in this course
- ref() and reactive()
- computed() and watch()
- The setup() Function and script setup
- Composables: Reusable Composition Functions