| name | nuxt-composables |
| description | Vue composables for reusable stateful logic. Use when understanding core composables (useWait, useFlash, useReactiveFilters, usePermissions), creating custom composables, or managing shared state. |
Nuxt Composables
Reusable stateful logic via Vue Composition API.
Core Concepts
composables.md - Core composables, patterns, custom composables
Core Composables (from layers)
| Composable | Purpose |
|---|---|
useRepository(name) |
Get typed repository instance |
useWait() |
Global loading state management |
useFlash() |
Toast notification system |
usePermissions() |
Permission checking |
useReactiveFilters(defaults) |
URL-synced reactive filters |
useRealtime() |
WebSocket subscriptions |
useSlideover(name) |
Slideover control |
useModal(name) |
Modal control |
useConfirmationToast() |
Confirm/cancel toasts |
Quick Examples
// Loading states
const { start, stop, is, waitingFor } = useWait()
start(waitingFor.posts.creating)
// ... work
stop(waitingFor.posts.creating)
// Flash messages
const flash = useFlash()
flash.success('Post created!')
flash.error('Failed to create post')
// Permissions
const { can, cannot } = usePermissions()
if (can('posts.create')) { /* ... */ }
// Reactive filters
const { filters, hasFilters, resetFilters } = useReactiveFilters({
status: undefined,
page: 1,
}, { syncWithUrl: true })
Custom Composable Pattern
// app/composables/useUser.ts
let user = ref<User>()
export default function useUser() {
const setUser = (data: BaseEntity) => {
user.value = User.hydrate(data)
}
const clearUser = () => { user.value = undefined }
return { user, setUser, clearUser }
}