Vue

The @ginjou/vue package provides the core integration for Vue 3 applications. It uses a headless context pattern to inject configuration and state management into your app.

Installation

Add the package to your project.

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

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

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

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

Setup

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 (usually App.vue).

Context Providers

Use these functions to register specific capabilities:

Configuration Example

Import and call your definition functions within the <script setup> block of your root component.

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

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

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

// 3. Integrate the Router
defineRouterContext(
    createRouter()
)
</script>

<template>
    <RouterView />
</template>

Integrations

Use these packages to bridge Ginjou with other libraries in the Vue ecosystem.

Vue Router

The @ginjou/with-vue-router package connects Ginjou's navigation logic with vue-router.

import { defineRouterContext } from '@ginjou/vue'
import { createRouter } from '@ginjou/with-vue-router'

// In setup()
defineRouterContext(createRouter())

Vue I18n

The @ginjou/with-vue-i18n package connects Ginjou's localization features with vue-i18n.

import { defineI18nContext } from '@ginjou/vue'
import { createI18n } from '@ginjou/with-vue-i18n'

// In setup()
defineI18nContext(createI18n())