title: Vue description: Build data-intensive apps with Vue 3.
Set up the Ginjou in your Vue application using the headless context pattern and peripheral integration packages.
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
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. |
defineRouterContext | Provide the router integration. |
defineAuthContext | Provide the authentication provider. |
defineAuthzContext | Provide the authorization provider. |
defineI18nContext | Provide the internationalization provider. |
defineNotificationContext | Provide the notification provider. |
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'
defineQueryClientContext(
new QueryClient()
)
defineFetchersContext({
default: {
getList: async ({ resource }) => ({ data: [], total: 0 }),
getOne: async ({ resource, id }) => ({ data: {} }),
},
})
defineRouterContext(
createRouter()
)
</script>
<template>
<RouterView />
</template>
Use integration packages to bridge your favorite libraries with the framework.
Use @ginjou/with-vue-router to connect your application with vue-router.
import { defineRouterContext } from '@ginjou/vue'
import { createRouter } from '@ginjou/with-vue-router'
// In setup()
defineRouterContext(createRouter())
Use @ginjou/with-vue-i18n to connect with vue-i18n.
import { defineI18nContext } from '@ginjou/vue'
import { createI18n } from '@ginjou/with-vue-i18n'
// In setup()
defineI18nContext(createI18n())