majiayu000 Nuxt Features
Domain-based feature modules with three-layer pattern: queries, mutations, actions.
Core Concepts
queries.md - Reactive data fetching with filters mutations.md - Pure API operations with loading states actions.md - Business logic with UI feedback
Pattern Flow
Component → Action → Mutation → Repository → API
↓
Query (reactive data fetching)
Directory Structure
features/{domain}/
├── queries/
│ ├── get-posts-query.ts # List with filters
│ └── get-post-query.ts # Single item
├── mutations/
│ ├── create-post-mutation.ts
│ ├── update-post-mutation.ts
│ └── delete-post-mutation.ts
└── actions/
├── create-post-action.ts
├── update-post-action.ts
└── delete-post-action.ts
Quick Examples
Query - Reactive data fetching:
export default function getPostsQueryFactory() {
const postApi = useRepository('posts')
return (filters: MaybeRef<GetPostsFilters>) => {
return useFilterQuery('posts', () => postApi.list(params), filters)
}
}
Mutation - Pure API call:
export default function createPostMutationFactory() {
const postApi = useRepository('posts')
const { start, stop, waitingFor } = useWait()
return async (data: CreatePostData) => {
start(waitingFor.posts.creating)
try { return (await postApi.create(data)).data }
finally { stop(waitingFor.posts.creating) }
}
}
Action - Business logic + UI:
export default function createPostActionFactory() {
const createPost = createPostMutationFactory()
const flash = useFlash()
return async (data: CreatePostData) => {
const post = await createPost(data)
flash.success('Post created!')
return post
}
}