Vue
@ginjou/vue is the base Vue adapter for Ginjou.
It exposes Ginjou's core contracts through Vue provide/inject, adds TanStack Query-backed data hooks, and includes the controller layer for resource-oriented pages.
@ginjou/nuxt builds on the same primitives, so this package is the foundation for both plain Vue apps and the Nuxt integration.
Installation
Install @ginjou/vue together with @tanstack/vue-query.
Ginjou uses TanStack Query for query and mutation state in Vue, so both packages are part of the base setup.
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
The smallest useful Vue setup starts with two contexts:
defineQueryClientContext()for TanStack Query state.defineFetchersContext()for data access.
Register them once near the app root so every Ginjou composable reads the same shared contexts.
<script setup lang="ts">
import { defineFetcher } from '@ginjou/core'
import { defineFetchersContext, defineQueryClientContext } from '@ginjou/vue'
import { QueryClient } from '@tanstack/vue-query'
defineQueryClientContext(new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000,
},
},
}))
defineFetchersContext({
default: defineFetcher({
async getList() {
return {
data: [],
total: 0,
}
},
async getOne({ id }) {
return {
data: { id },
}
},
}),
})
</script>
From there, add router, auth, authz, notifications, i18n, realtime, and resources only when the app needs them.
Contexts
@ginjou/vue keeps all shared contexts explicit through Vue provide/inject.
Each defineXContext() call registers one app-level implementation of a Ginjou contract. composables, controllers, and lower-level helpers read from those contexts later.
| Provider | When to add it | Guide |
|---|---|---|
defineQueryClientContext | Always for the data layer | Data |
defineFetchersContext | Always for the data layer | Data |
defineAuthContext | When the app supports login, logout, or identity | Authentication |
defineAuthzContext | When the app checks permissions or access rules | Authorization |
defineRouterContext | When navigation, current location, or controller route sync matter | Router |
defineI18nContext | When the app translates text or switches locale | I18n |
defineNotificationContext | When the app shows toast-like feedback | Notifications |
defineRealtimeContext | When queries subscribe or mutations publish realtime events | Realtime |
defineResourceContext | When the app defines shared resource metadata | Resources |
Most Vue apps start with query client and fetchers, then add the other contexts only when they become necessary.
This page only covers the integration shape. Use the linked guides for the full contract and behavior of each context.
Ecosystem
These companion packages adapt common Vue ecosystem tools to the contracts above.
Use them when you want to plug existing Vue libraries into Ginjou instead of writing the contract layer yourself.