directus/rstore

The Reactive Data Store for Vue and Nuxt developers.

TypeScript

450

631 commits

updated Sep 17, 2026

See the code

README

rstore logo


Documentation | Nightly releases | Contributing guide

ci

rstore is a local-first data store for Vue and Nuxt applications.

It gives you a normalized reactive cache, a structured query and mutation API, and plugin-based integration with your own data sources.

Why rstore

  • Normalized reactive cache shared across your app
  • Queries and mutations co-located with components
  • Plugins for REST, GraphQL, local databases, and custom backends
  • Built for local-first, realtime, forms, and offline workflows
  • Strong TypeScript support
  • Nuxt module with DevTools integration

Devtools screenshot

Start here

Core workflow

  1. Define collections that describe your application data.
  2. Add collection hooks or plugins to connect those collections to your backend.
  3. Query and mutate data from components through the store.
  4. Layer on forms, subscriptions, offline support, and federation as needed.

Example

const store = useStore()

const { data: todos, loading } = await store.todos.query(q => q.many())

await store.todos.create({
  id: crypto.randomUUID(),
  title: 'Ship the docs',
  completed: false,
})

Learn more

Contributors

Akryum

621 commits

rijkvanzanten

2 commits

naitokosuke

2 commits

directus/rstore

The Reactive Data Store for Vue and Nuxt developers.

TypeScript

450

631 commits

updated Sep 17, 2026

See the code

README

rstore logo


Documentation | Nightly releases | Contributing guide

ci

rstore is a local-first data store for Vue and Nuxt applications.

It gives you a normalized reactive cache, a structured query and mutation API, and plugin-based integration with your own data sources.

Why rstore

  • Normalized reactive cache shared across your app
  • Queries and mutations co-located with components
  • Plugins for REST, GraphQL, local databases, and custom backends
  • Built for local-first, realtime, forms, and offline workflows
  • Strong TypeScript support
  • Nuxt module with DevTools integration

Devtools screenshot

Start here

Core workflow

  1. Define collections that describe your application data.
  2. Add collection hooks or plugins to connect those collections to your backend.
  3. Query and mutate data from components through the store.
  4. Layer on forms, subscriptions, offline support, and federation as needed.

Example

const store = useStore()

const { data: todos, loading } = await store.todos.query(q => q.many())

await store.todos.create({
  id: crypto.randomUUID(),
  title: 'Ship the docs',
  completed: false,
})

Learn more

Contributors

Akryum

621 commits

rijkvanzanten

2 commits

naitokosuke

2 commits

Languages

TypeScript

93.2%

Vue

5.7%