Directus logo

Skill

rstore-vite-monospace

integrate Monospace into Vite applications

Covers Vue Directus API Development Vite

Description

Use when wiring Monospace into a plain Vite/Vue app with @rstore/vite-monospace, including rstoreMonospace config, remote or local OpenAPI generation, virtual:rstore-monospace modules, generated rstore-monospace.d.ts declarations, runtimeApiKey handling, primaryKeys, and store setup with the generated schema and monospacePlugin.

SKILL.md

Rstore Vite Monospace

Use @rstore/vite-monospace to generate Monospace-backed rstore schema and plugin modules in a non-Nuxt Vite app.

Setup

Register the Vite plugin in vite.config.ts:

import { rstoreMonospace } from '@rstore/vite-monospace'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    rstoreMonospace({
      url: 'https://your-monospace-instance.com',
      project: 'your-project',
      schemaApiKey: process.env.MONOSPACE_API_KEY,
      scopeId: 'rstore-monospace',
    }),
  ],
})

Then create the store from the generated virtual module:

import { createStore, RstorePlugin } from '@rstore/vue'
import { monospacePlugin, schema } from 'virtual:rstore-monospace'

const store = await createStore({
  schema,
  plugins: [monospacePlugin],
})

app.use(RstorePlugin, { store })

Options

OptionPurpose
urlMonospace API URL used for remote schema loading and runtime client code
projectMonospace project identifier
schemaApiKeyBuild-time key for remote schema loading (needs openApiSchema:read + dataModel:read)
inputLocal OpenAPI JSON path, resolved from the Vite root
metadataInputLocal schema metadata snapshot JSON path, resolved from the Vite root
runtimeApiKeyRuntime API key emitted into generated client code
scopeIdrstore plugin scope id, defaulting to rstore-monospace
primaryKeysExplicit primary key overrides by collection name
dtsDeclaration output path, true/omitted for rstore-monospace.d.ts, or false to disable

Virtual Modules

  • virtual:rstore-monospace re-exports schema, monospace, and monospacePlugin.
  • virtual:rstore-monospace/schema exports the generated rstore schema.
  • virtual:rstore-monospace/plugin exports the Monospace REST client and rstore plugin.

Local Schema Mode

Use input plus metadataInput when the schema is checked into the project or generated separately. The metadata snapshot holds the raw items of the Monospace system schema meta collections keyed by collection name:

rstoreMonospace({
  input: './openapi.json',
  metadataInput: './schema-metadata.json',
})

With only one local file, the other schema source is loaded remotely and url/project are required.

Guardrails

  1. Keep schemaApiKey build-time only; it must not appear in generated virtual modules.
  2. Configure runtimeApiKey only when the key is safe to emit into runtime/client code.
  3. Do not hand-write replacement schema or plugin virtual modules; fix generator input/config instead.
  4. Use the generated schema and monospacePlugin together in the same store.
  5. Use rstore-monospace for OpenAPI, REST, query, and mutation behavior.
  6. Use rstore-vue for component query/form/cache patterns.

© 2026 YourAI.tools. Every skill from an identity-verified publisher.

Independent catalog. Not affiliated with, endorsed by, or sponsored by Anthropic or any listed publisher. All trademarks belong to their respective owners.