@groundstate/vue

Vue 3 composables for building local-first apps with @groundstate.

Installation

# npm
npm install @groundstate/vue @groundstate/crdt

# yarn
yarn add @groundstate/vue @groundstate/crdt

# pnpm
pnpm add @groundstate/vue @groundstate/crdt

Peer dependency: Vue 3+

Quick Start

<script setup lang="ts">
import { provideGroundstate, useDoc, useField, usePresence } from '@groundstate/vue';
import { Doc, Field, List } from '@groundstate/crdt';

const schema = { title: Field(''), tags: List<string>() };
provideGroundstate({ doc: Doc(schema), sync: syncEngine });

const doc = useDoc();
const title = useField(doc, 'title');
const { peers } = usePresence();
</script>

<template>
  <div>
    <input v-model="title.value" />
    <p>{{ peers.length }} peer(s) online</p>
  </div>
</template>

API Highlights

Provider

• provideGroundstate(options) -- Provide the document and sync engine to the component tree
• useGroundstate() -- Inject the provided context
• GROUNDSTATE_KEY -- Injection key for advanced use cases

Composables

• useDoc() -- Reactive reference to the full document
• useField(doc, path) -- Reactive reference to a single field
• usePresence() -- Track peer presence (cursors, selections, names)
• useSyncStatus() -- Monitor sync connection state and progress
• useConflicts() -- Access detected conflicts for manual resolution

Types

• PeerPresence -- Shape of a single peer's presence data
• SyncState / SyncStatus -- Sync connection and progress metadata
• ConflictEntry -- Individual conflict descriptor

All composables return Vue ref or computed values, so they integrate naturally with Vue's reactivity system and template bindings.

Documentation

See the full documentation for complete API reference.

License

MIT