Ginjou

Ginjou is a headless, framework-agnostic, progressive library for building admin panels, dashboards, and other data-intensive applications. It is inspired by refine and react-admin

Features

• Framework-Agnostic: Use it with Vue, Nuxt, or bring your own framework.
• Any Backend: Connect to any backend with ease. Pre-built providers for REST APIs, Supabase, and Directus are available.
• Authentication & Authorization: Manage user sessions and control access to resources.
• Realtime Streaming: Automatically update state when content changes.

Quick Start

Here's a quick example of how to use Ginjou with Vue.

1. Installation

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

2. Usage

<script setup lang="ts">
import { defineFetchersContext, defineQueryClient, useList } from '@ginjou/vue'

defineQueryClientContext(
	new QueryClient()
)
defineFetchersContext({
	default: {
		getList: ({ resource, pagination, filters }) => {
			const resp = await fetch(`/api/${resource}`, {
				filters,
				pagination,
			})
			const data = await resp.json()
			return data
		},
	},
})
</script>

<template>
	<PostList />
</template>

<!-- PostList.vue -->
<script setup lang="ts">
import { useList } from '@ginjou/vue'

const { data, isLoading, isError } = useList({ resource: 'posts' })
</script>

<template>
	<div v-if="isLoading">
		Loading...
	</div>
	<div v-if="isError">
		Error fetching posts!
	</div>
	<ul v-if="data">
		<li v-for="post in data.data" :key="post.id">
			{{ post.title }}
		</li>
	</ul>
</template>

Packages

Core

Package	Version	Downloads
@ginjou/core

Vue

Package	Version	Downloads
@ginjou/vue
@ginjou/nuxt
@ginjou/with-vue-i18n
@ginjou/with-vue-router

Integrations

Package	Version	Downloads
@ginjou/with-directus
@ginjou/with-rest-api
@ginjou/with-supabase

License

Made with ❤️

Published under the MIT License.