directus/rstore/rstore-nuxt

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

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

Further reading

• Getting started (Nuxt): https://rstore.akryum.dev/guide/getting-started#nuxt
• Query docs: https://rstore.akryum.dev/guide/data/query
• Cache docs: https://rstore.akryum.dev/guide/data/cache
• Plugin hook docs: https://rstore.akryum.dev/guide/plugin/hooks