🗃️
Single Source of Truth
The reactive normalized cache ensures all components are up-to-date all the time.
Quick Overview
Define your Collections
Use Plugins to reuse fetching logic for multiple collections
vue
<script lang="ts" setup>
// Inject the store instance
const store = useStore()
// Live query to get all todos
const { data: todos, loading } = await store.todos.liveQuery(q => q.many())
// Form object to create a new todo
const createTodo = store.todos.createForm({
defaultValues: () => ({
id: crypto.randomUUID(),
}),
})
const createInput = useTemplateRef('input')
createTodo.$onSuccess(() => {
createInput.value?.inputRef?.focus()
createInput.value?.inputRef?.select()
})
// Mutation
async function deleteTodo(id: string) {
await store.todos.delete(id)
}
</script>
<template>
<div>
<TodoItem v-for="todo in todos" :key="todo.id" :todo @delete="deleteTodo(todo.id)" />
<UForm :state="createTodo" :schema="createTodo.$schema">
<UInput
ref="input"
v-model="createTodo.title"
placeholder="New todo"
:disabled="createTodo.$loading"
@keydown.enter.prevent="createTodo.$submit()"
/>
</UForm>
</div>
</template>
Nuxt Integration
Integrate RStore seamlessly into your Nuxt.js applications with the official RStore Nuxt module. This module simplifies the setup process and provides automatic configuration for optimal performance.
bash
pnpm install @rstore/nuxtts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@rstore/nuxt'],
})
Nuxt + Drizzle
This Nuxt module integrates RStore with Drizzle ORM. In very few steps, you can get access to your data directly in your components without setting up an API yourself.
It comes with builtin support for:
- 🧾 Typed collections from Drizzle schema
- 🧑💻 Server-side data fetching with RStore
- 🔄 Realtime updates with WebSockets
- 📲 Offline support with automatic synchronization
bash
pnpm install @rstore/nuxt-drizzlets
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@rstore/nuxt-drizzle'],
rstoreDrizzle: {
ws: true,
offline: true,
},
})ts
// server/utils/drizzle.ts
import { drizzle } from 'drizzle-orm/libsql'
import * as schema from '../database/schema'
export const tables = schema
let drizzleInstance
export function useDrizzle() {
drizzleInstance ??= drizzle({
schema,
connection: useRuntimeConfig().dbUrl,
})
return drizzleInstance
}
Nuxt + Directus
Easily connect your Nuxt.js application to a Directus CMS using the RStore Nuxt module. You app will automatically get access to your Directus collections.
bash
pnpm install @rstore/nuxt-directusts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@rstore/nuxt-directus'],
})