majiayu000 Nuxt Composables
Creating reusable stateful logic via Vue Composition API.
Core Concepts
composables.md - Patterns, naming, state management, best practices
Singleton Pattern (Shared State)
State defined outside function persists across all callers:
// app/composables/useUser.ts
let user = ref<User>() // Singleton - shared across app
export default function useUser() {
const setUser = (data: BaseEntity) => {
user.value = User.hydrate(data)
}
const clearUser = () => { user.value = undefined }
return { user, setUser, clearUser }
}
Factory Pattern (Fresh State)
State defined inside function - new instance per call:
// app/composables/useCounter.ts
export default function useCounter(initial = 0) {
const count = ref(initial) // Fresh per call
const increment = () => count.value++
const decrement = () => count.value--
return { count, increment, decrement }
}
Naming & File Conventions
| Convention | Example |
|---|---|
| File name | useUser.ts, useCategories.ts |
| Function | export default function useUser() |
| Return | Always object { state, methods } |
| Refs | Reactive: user, not userRef |