Directus logo

Skill

rstore-nuxt

integrate rstore into Nuxt applications

Covers Nuxt Vue Frontend

Description

Use when wiring rstore into a Nuxt app end-to-end — module setup, auto-registered collections/plugins, SSR cache hydration, generated template/auto-import issues, and cross-module extension; also use before adding a custom `server/api` route, Nitro handler, or ad hoc `useFetch`/`$fetch` composable for collection data in an rstore-powered Nuxt app — prefer rstore collection APIs (`find*`, `query`, `liveQuery`) and plugin hooks over hand-rolled endpoints or fetch refs; pair with the `rstore-vue` skill for collection/query/form behavior.

SKILL.md

Rstore Nuxt

Wire @rstore/vue into Nuxt through module scanning, generated templates, SSR hydration, and devtools integration. Use this skill together with the @rstore/vue skill for collection/query/form semantics.

Documentation map

Core concepts

PrimitivePurpose
rstore.rstoreDirsPer-layer directories scanned for collections and plugins
<rstoreDir>/*.tsCollection/relations exports included in generated schema
<rstoreDir>/plugins/*.tsPlugin exports included in generated plugin list
#build/$rstore-collectionGenerated schema template from scanned collection files
#build/$rstore-pluginsGenerated plugin exports from scanned plugin files
#build/$restore-optionsGenerated options template (experimentalGarbageCollection)
Runtime plugin layerCreates store, installs plugin, serializes/hydrates cache, injects $rstore
addCollectionImport / addPluginImportPublic extension hooks for other Nuxt modules

Quick start

export default defineNuxtConfig({
  modules: ['@rstore/nuxt'],
  rstore: {
    rstoreDirs: ['rstore'],
  },
})

Expected layout:

rstore/
  todos.ts
  users.ts
  plugins/
    remote.ts

Task workflow

  1. Register @rstore/nuxt in modules.
  2. Keep collections and plugin files inside configured rstoreDirs.
  3. Ensure collection files export default or named const values intended for schema assembly.
  4. Use useStore() and auto-imports from #imports in app code, not ad hoc store singletons. Before adding a server/api/*.ts handler, a defineEventHandler, or a useFetch/$fetch composable for collection data, check whether a collection API (find*, query, liveQuery) or a plugin hook already covers it — if the data is Drizzle-backed, see the rstore-nuxt-drizzle skill for the generated endpoint + hook story.
  5. For cross-module extension, call addCollectionImport / addPluginImport from module setup.
  6. Validate generated template output when debugging scan/injection issues.
  7. For behavior inside collection APIs (find*, query, forms, hooks), use the rstore-vue skill.

Rely on the generated runtime

  • Auto-imports include withItemType, defineCollection, defineRstorePlugin, defineRstoreModule, useStore, RStoreSchema, plus related types.
  • The module generates and uses #build templates instead of requiring manual registry wiring.
  • The runtime plugin serializes cache state to nuxtApp.payload.state.$srstore on render and hydrates on client load.
  • In development, a devtools plugin is appended automatically by runtime code.
  • experimentalGarbageCollection is passed from module options into createStore.

Extending from another Nuxt module

  • addCollectionImport(nuxt, importPath) appends import sources merged into generated schema.
  • addPluginImport(nuxt, importPath) appends plugin imports merged into generated plugin list.
  • Use these APIs instead of mutating _rstoreCollectionImports/_rstorePluginImports directly.
  • Imported collection modules should export values that are valid store schema entries.

Guardrails

  1. Collection scan warns when files export neither default nor named const.
  2. Files in scanned collection directories should stay export-focused; extra exported helpers can be pulled into schema by Object.values(...).
  3. Avoid creating your own second Nuxt-side store instance; runtime plugin owns app store lifecycle.
  4. Debug missing data by inspecting generated #build/$rstore-collection and #build/$rstore-plugins.
  5. Devtools route /__rstore is module-owned and served/proxied by setupDevToolsUI; do not duplicate that wiring in app code.

References

TopicDescriptionReference
API indexFull map of Nuxt API/config referencesapi-index
rstore.rstoreDirsCollection/plugin scan directory optionapi-rstore-dirs
rstore.experimentalGarbageCollectionPass-through garbage collection optionapi-experimental-garbage-collection
addCollectionImportExtend generated collection importsapi-add-collection-import
addPluginImportExtend generated plugin importsapi-add-plugin-import
defineRstorePluginNuxt alias for definePluginapi-define-rstore-plugin
defineRstoreModuleNuxt alias for defineModuleapi-define-rstore-module
RStoreSchemaNamespaced schema helper objectapi-rstore-schema
useStore (#imports)Nuxt runtime store accessorapi-use-store
SSR cache hydration ($srstore)Payload cache serialization/hydrationapi-cache-hydration
Devtools route (/__rstore)Custom devtools UI route wiringapi-devtools-route
Base @rstore/vue skillUnderlying collection/query/form semanticsrstore-vue skill

Further reading

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