Vue LiveStore is in beta with intention to mature alongside LiveStore. Happy to accept s 8000 uggestions for improvement and contributions. See list of todos below for pending areas.
It's strongly recommended to use bun or pnpm for the simplest and most reliable dependency setup (see note on package management for more details).
Install LiveStore
pnpm install @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/utils @livestore/peer-deps @livestore/devtools-viteInstall vue-livestore
pnpm install vue-livestoreLiveStoreProvider: Creates the store and provides it to the rest of the wrapped app.
useStore(): Composables to load (inject) the store
useQuery(): Composable to create reactive read-only live queries
useClientDocument(): Composable to get reactive writable client state variables
For full working example see code in playground.
Follow the Vue LiveStore example for an existing project to:
- Adjust Vite config
- Create livestore/livestore.worker.ts
- Create livestore/schema.ts
<template>
<LiveStoreProvider :options="{ schema, adapter, storeId }">
<Todos />
</LiveStoreProvider>
</template>import { queryDb } from '@livestore/livestore'
import { events, tables } from '../livestore/schema'
import { useStore, useQuery } from 'vue-livestore'
const { store } = useStore()
const visibleTodos$ = queryDb(
() => tables.todos.where({ deletedAt: null, })
{ label: 'visibleTodos' },
)
const todosQuery = useQuery(visibleTodos$)
store.commit(events.todoCreated({ id: crypto.randomUUID(), text: "Write documentation" }))Serializes the client document variables into writable computed refs directly from the composable so we can write code like this:
<script setup lang="ts">
import { tables } from '../livestore/schema'
const { newTodoText, filters } = useClientDocument(tables.uiState)
</script>
<template>
<input type="text" v-model="newTodoText">
<select v-model="filters">
<option value="all">All</option>
...
<select>
</template>- Multiple stores support
- useClientDocument composable
- Nuxt integration (might be separate repo or just example implementation)
Why not a Vue plugin instead of provider pattern? A Vue plugin would probably be more idiomatic to the Vue ecosystem but a provider has the benefit of easily designating a loading slot. It also matches better to the React implementation for LiveStore which makes generalising examples easier. It's possible as this package matures we might switch to a plugin structure if it makes sense. We would also see what the best option would be when integrating into Nuxt.