Extract and reuse stateful logic across your app.
1What is a Composable?
In the context of Vue applications, a 'composable' is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic. If you are familiar with React, this is identical in concept to a 'Custom Hook'.
2Conventions
Composables are standard JavaScript/TypeScript files (not .vue files). By convention, their names always start with use, such as useFetch or useDarkTheme. They typically return an object containing refs or functions.
3Why not just classes/mixins?
Vue 2 relied on Mixins for logic reuse, but mixins caused naming collisions and made it hard to trace where a variable came from. Composables use explicit imports and destructuring (const { x } = useMouse()), making the source of every variable 100% clear.
