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
  }
}