title: Nuxt description: Deep integration for Nuxt applications.
The @ginjou/nuxt module provides first-class support for Nuxt 3 or 4, including SSR-ready composables and automatic provider configuration.
pnpm add @ginjou/nuxt @tanstack/vue-query
yarn add @ginjou/nuxt @tanstack/vue-query
npm install @ginjou/nuxt @tanstack/vue-query
bun add @ginjou/nuxt @tanstack/vue-query
To set up the Ginjou in your Nuxt application, you need to register the module in your configuration and initialize the required providers in your root component.
Add the module to your nuxt.config.ts:
export default defineNuxtConfig({
modules: [
'@ginjou/nuxt'
],
})
Ginjou uses a Context API pattern to provide configuration to your application. Instead of a single monolithic plugin, you use granular define*Context functions within the setup block of your root component.
Available setup functions:
| Function | Description |
|---|---|
defineFetchersContext | Provide your data fetchers. |
defineQueryClientContext | Provide the TanStack Query client. |
defineResourceContext | Provide resource definitions and patterns. |
defineAuthContext | Provide the authentication provider. |
defineAuthzContext | Provide the authorization provider. |
defineI18nContext | Provide the internationalization provider. |
defineNotificationContext | Provide the notification provider. |
defineRouterContext | Not need, it'll automatically configured by the module. |
Import and call your definition functions within the <script setup> block of your root component.
Here is a example of a root component (app/app.vue) configured with common providers and integrations.
<script setup lang="ts">
import { defineFetchersContext, defineQueryClientContext } from '@ginjou/vue'
import { QueryClient } from '@tanstack/vue-query'
defineQueryClientContext(
new QueryClient()
)
defineFetchersContext({
default: {
getList: async ({ resource }) => ({ data: [], total: 0 }),
getOne: async ({ resource, id }) => ({ data: {} }),
},
})
</script>
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
To fully support Server-Side Rendering (SSR), the module provides "Async" versions of standard composables
Common async composables include:
| Composable | Description |
|---|---|
useAsyncGetOne | Fetches a single record from a data source. |
useAsyncGetMany | Fetches multiple records from a data source. |
useAsyncGetList | Fetches a list of records from a data source. |
useAsyncGetInfiniteList | Fetches an infinite list of records from a data source. |
useAsyncShow | Manages state and data for detail views. |
useAsyncEdit | Manages state and data for edit forms. |
useAsyncList | Manages state and data for list views. |
useAsyncInfiniteList | Manages state and data for infinite list views. |
useAsyncSelect | Manages state and data for select views. |
useAsyncAuthenticated | Checks the current authentication status. |
useAsyncGetIdentity | Retrieves the current user's identity. |
useAsyncPermissions | Retrieves the current user's permissions. |
useAsyncCanAccess | Checks if the current user has access to a resource. |
Example:
<script setup lang="ts">
// No import needed - auto-imported by Nuxt!
const { data, isLoading } = await useAsyncGetList({
resource: 'posts'
})
</script>
<template>
<div v-if="isLoading">
Loading...
</div>
<ul v-else>
<li v-for="post in data" :key="post.id">
{{ post.title }}
</li>
</ul>
</template>