Directus logo

Skill

rstore-nuxt-monospace

integrate Monospace into Nuxt applications

Covers Nuxt Vue Directus API Development

Description

Use when wiring Monospace into a Nuxt app with @rstore/nuxt-monospace, including rstoreMonospace config, remote or local OpenAPI generation, generated #build templates, runtime plugin setup, auto-imported useMonospace, runtimeApiKey handling, primaryKeys, and generated rstore collections. Pair with rstore-monospace for shared REST/OpenAPI behavior, rstore-nuxt for Nuxt store integration, and rstore-vue for query/form usage.

SKILL.md

Rstore Nuxt Monospace

Use @rstore/nuxt-monospace to generate Monospace-backed rstore collections and register the runtime REST plugin in Nuxt.

Setup

Register the Nuxt module:

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

Use generated collections through useStore():

const store = useStore()

const { data } = await store.Todos.query(q => q.many({
  fields: ['id', 'title'],
  limit: 20,
}))

Use the auto-imported REST client when direct Monospace access is intentional:

const monospace = useMonospace()
const todos = await monospace.readMany('Todos', { limit: 10 })

Options

OptionPurpose
urlMonospace API URL
projectMonospace project identifier
schemaApiKeyBuild-time key for remote schema loading (needs openApiSchema:read + dataModel:read)
inputLocal OpenAPI JSON path, resolved from Nuxt root
metadataInputLocal schema metadata snapshot JSON path, resolved from Nuxt root
runtimeApiKeyRuntime API key emitted into generated config
scopeIdrstore plugin scope id, defaulting to rstore-monospace
primaryKeysExplicit primary key overrides by collection name

Generated Nuxt Templates

  • $rstore-monospace-collections.js contains runtime collection definitions.
  • $rstore-monospace-items.d.ts contains generated item interfaces.
  • $rstore-monospace-collections.d.ts contains typed collection declarations.
  • $rstore-monospace-config.js contains runtime URL, project, optional API key, and scope id.

Module Behavior

  • The module depends on @rstore/nuxt.
  • It adds generated collections through addCollectionImport.
  • It adds the runtime plugin through addPluginImport.
  • It registers runtime type references and auto-imports useMonospace().
  • Missing url or project skips collection generation with a warning.

Guardrails

  1. Keep schemaApiKey server-side/build-time.
  2. Configure runtimeApiKey only when the value is safe to expose through generated runtime config.
  3. Use input plus metadataInput for checked-in or separately generated schemas; generation needs both the OpenAPI document and the schema metadata.
  4. Prefer generated rstore collections and plugin wiring over custom Nuxt API routes for generated collections.
  5. Use rstore-monospace for shared OpenAPI, REST, query, and mutation behavior.
  6. Use rstore-nuxt for base Nuxt rstore module behavior and rstore-vue for query/form/cache semantics.

© 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.