@statesync/vue

Vue adapter for state-sync. Applies snapshots to Vue reactive objects or refs.

Install

npm install @statesync/vue @statesync/core

Quick Start

With reactive()

import { createRevisionSync } from '@statesync/core';
import { createVueSnapshotApplier } from '@statesync/vue';
import { reactive } from 'vue';

const state = reactive({ theme: 'light', lang: 'en' });

const applier = createVueSnapshotApplier(state);

const handle = createRevisionSync({
  topic: 'settings',
  subscriber: mySubscriber,
  provider: myProvider,
  applier,
});

await handle.start();

With ref()

import { ref } from 'vue';
import { createVueSnapshotApplier } from '@statesync/vue';

const settings = ref({ theme: 'light', lang: 'en' });

const applier = createVueSnapshotApplier(settings, { target: 'ref' });

Modes

Patch (default)

const applier = createVueSnapshotApplier(state);
// Merges snapshot fields into existing state

Replace

const applier = createVueSnapshotApplier(state, { mode: 'replace' });
// Full replacement: deletes missing keys, assigns new ones

Options

• target — 'reactive' (default) or 'ref'
• toState(data, ctx) — map snapshot data to state patch
• pickKeys / omitKeys — limit which keys are updated
• strict (default: true) — throw if toState returns a non-object

See full documentation.