# @networkoptix/crdt-sync/vue

Vue 3 composables for real-time collaborative state synchronization with CRDTs.

## Installation

```bash
npm install @networkoptix/crdt-sync
npm install mobx yjs
```

## Quick Start

```vue
<template>
  <div>
    <h1>Count: {{ value }}</h1>
    <button @click="increment">Increment</button>
    <p>Active Users: {{ activeUsers }}</p>
  </div>
</template>

<script setup>
import { useSyncModelSync } from '@networkoptix/crdt-sync/vue';
import { createSingletonModel } from '@networkoptix/crdt-sync/core';

const CounterModel = createSingletonModel({ room: 'my-counter' }, 0);
const { value, setValue, activeUsers } = useSyncModelSync(CounterModel);

const increment = () => setValue(value.value + 1);
</script>
```

## Available Composables

- `useSyncModelSync` - Main composable for sync models
- `useSyncModelState` - State-only management
- `usePresence` - User presence and awareness

## Documentation

See the main [README](../README.md) and [Quick Start Guide](../docs/getting-started/quick-start.md) for detailed documentation.
