
Skill
rstore-vite-directus
integrate Directus into Vite applications
Description
Use when wiring Directus into a plain Vite/Vue app with @rstore/vite-directus, including rstoreDirectus config, virtual:rstore-directus modules, generated rstore-directus.d.ts declarations, build-time Directus introspection, and store setup with the generated schema and directusPlugin. Pair with rstore-directus for shared Directus adapter behavior and rstore-vue for collection/query/form usage.
SKILL.md
Rstore Vite Directus
Use @rstore/vite-directus to generate Directus-backed rstore schema and plugin modules in a non-Nuxt Vite app.
Setup
Register the Vite plugin in vite.config.ts:
import { rstoreDirectus } from '@rstore/vite-directus'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
rstoreDirectus({
url: 'https://your-directus-instance.com',
adminToken: process.env.DIRECTUS_TOKEN,
scopeId: 'rstore-directus',
}),
],
})
Then create the store from the generated virtual module:
import { createStore, RstorePlugin } from '@rstore/vue'
import { directusPlugin, schema } from 'virtual:rstore-directus'
const store = await createStore({
schema,
plugins: [directusPlugin],
})
app.use(RstorePlugin, { store })
Options
| Option | Purpose |
|---|---|
url | Directus API URL used for schema loading and runtime client code |
adminToken | Build-time Directus admin token for introspection |
scopeId | rstore plugin scope id, defaulting to rstore-directus |
dts | Declaration output path, true/omitted for rstore-directus.d.ts, or false to disable |
Virtual Modules
virtual:rstore-directusre-exportsschema,directus, anddirectusPlugin.virtual:rstore-directus/schemaexports the generated rstore schema.virtual:rstore-directus/pluginexports the Directus SDK client and rstore plugin.
Generated Declarations
- The plugin writes
rstore-directus.d.tsin the Vite root by default. - Use
dts: 'src/rstore-directus.d.ts'to choose another output. - Use
dts: falseonly when the app provides compatible virtual module declarations another way.
Guardrails
- Keep
adminTokenserver-side/build-time. The Vite plugin should not emit it into generated modules. - Do not hand-write replacement schema or plugin virtual modules; fix generator input/config instead.
- Use the generated
schemaanddirectusPlugintogether in the same store. - Use
rstore-directusfor Directus query, schema, singleton, and mutation behavior. - Use
rstore-vuefor component query/form/cache patterns.
More skills from the rstore repository
View all 8 skillsrstore-directus
integrate rstore with Directus
Jul 12API DevelopmentDatabaseDirectusrstore-monospace
integrate rstore with Monospace REST APIs
Jul 12OpenAPIREST APIrstore-nuxt
integrate rstore into Nuxt applications
Jul 12FrontendNuxtVuerstore-nuxt-drizzle
expose Drizzle data in Nuxt applications
Jul 12API DevelopmentDatabaseDrizzleNuxtrstore-nuxt-monospace
integrate Monospace into Nuxt applications
Jul 12API DevelopmentDirectusNuxtVuerstore-vite-monospace
integrate Monospace into Vite applications
Jul 12API DevelopmentDirectusViteVue