Nuxt

The @ginjou/nuxt module provides first-class support for Nuxt, offering SSR-ready composables, automatic provider configuration, and seamless integration with the Nuxt ecosystem.

Installation

Add the module to your project.

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

Setup

To set up Ginjou in your Nuxt application, register the module in your configuration and initialize the required providers in your root component.

Configuration

Add @ginjou/nuxt to the modules array in nuxt.config.ts:

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

Providers

Use the define*Context functions within the setup block of your root component (usually app.vue) to configure your application.

Configuration Example

Here is an example app/app.vue configured with common providers.

<script setup lang="ts">
import { defineFetchersContext, defineQueryClientContext } from '@ginjou/vue'
import { QueryClient } from '@tanstack/vue-query'

// 1. Provide the QueryClient
defineQueryClientContext(
    new QueryClient()
)

// 2. Define Data Fetchers
defineFetchersContext({
    default: {
        getList: async ({ resource }) => ({ data: [], total: 0 }),
        getOne: async ({ resource, id }) => ({ data: {} }),
    },
})
</script>

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>

Async Composables

To fully support Server-Side Rendering (SSR), the module provides "Async" versions of standard Ginjou composables.

Available Composables

Usage Example

Async composables are auto-imported by Nuxt.

<script setup lang="ts">
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>