Nuxt

@ginjou/nuxt is the Nuxt module built on top of @ginjou/vue.

It adds module setup, query hydration, async composables for Nuxt data flow, and a selected set of auto imports.

Installation

Install @ginjou/nuxt, @ginjou/vue, and @tanstack/vue-query together.

The Nuxt module depends on @ginjou/vue, but Nuxt apps still import some lower-level helpers directly from @ginjou/vue, so it should stay an explicit app dependency.

pnpm add @ginjou/nuxt @ginjou/vue @tanstack/vue-query

yarn add @ginjou/nuxt @ginjou/vue @tanstack/vue-query

npm install @ginjou/nuxt @ginjou/vue @tanstack/vue-query

bun add @ginjou/nuxt @ginjou/vue @tanstack/vue-query

Setup

Add the module in nuxt.config.ts.

export default defineNuxtConfig({
    modules: ['@ginjou/nuxt'],
})

Then register the app-level contexts in app.vue.

<script setup lang="ts">
import defineAuth from '~/ginjou/auth'
import defineAuthz from '~/ginjou/authz'
import defineFetcher from '~/ginjou/fetcher'
import defineQueryClient from '~/ginjou/query'
import defineResources from '~/ginjou/resource'

defineFetcher()
defineQueryClient()
defineResources()
defineAuth()
defineAuthz()
</script>

The fetcher file can stay small.

import { defineFetchersContext } from '@ginjou/vue'
import { createFetcher } from '@ginjou/with-rest-api'

export default () => defineFetchersContext({
    default: createFetcher({
        url: '/api',
        client: $fetch as any,
    }),
})

The query client setup also stays explicit.

import { defineQueryClientContext } from '@ginjou/vue'
import { QueryClient } from '@tanstack/vue-query'

export default () => {
    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                staleTime: 5 * 60 * 1000,
            },
        },
    })

    defineQueryClientContext(queryClient)
}

The module always registers the query hydration plugin.

Fetchers, query client, and every other optional context still belong to the app.

Async Composables

Async composables exist for Nuxt's async data flow.

Each one wraps the matching Vue composable, calls the same underlying logic, and waits for query.suspense() through Nuxt-aware async handling.

Use the async version when the result should participate in Nuxt SSR and hydration.

Use the normal Vue composable when SSR-aware waiting is not needed.

There is no useAsyncCreate. Create, update, and delete flows stay on the normal mutation hooks such as useCreateOne, useUpdateOne, and useDeleteOne, because mutations are not SSR data-loading primitives.

Auto Imports

The module auto-imports three sets of helpers:

• TanStack Query primitives from @tanstack/vue-query
• Standard Ginjou composables re-exported from @ginjou/vue
• Nuxt-only async composables provided by @ginjou/nuxt

This is a convenience layer, not a separate API surface.

If a helper is not listed here, import it explicitly.

TanStack Query

Standard Ginjou Composables

Async Ginjou Composables