Yjs Sync Technical Details
This document provides technical details about the Real-Time Sync feature, primarily for developers or for advanced configuration after deployment.
Configuration
The Yjs sync module is configured in nuxt.config.ts. It utilizes IndexedDB for offline storage and a cloud sync mechanism.
Example configuration:
export default defineNuxtConfig({
yjsSyncModule: {
indexeddb: {
enabled: true,
dbName: 'yjs-sync',
},
broadcast: {
enabled: true, // Sync between tabs
},
cloudSync: {
enabled: true,
interval: 30000, // Sync interval in ms
batchSize: 50,
},
undoRedo: {
enabled: true,
captureTimeout: 500,
},
snapshots: {
enabled: true,
},
},
})
Programmatic Usage
Sync functionality is exposed via the useYjsSync composable.
<script setup>
import { useYjsSync } from '#yjs-sync'
// Initialize sync for a specific document
const { doc } = useYjsSync({
docId: 'my-collaborative-doc',
})
// Access Yjs types
const text = doc.getText('content')
// Bind to UI, listen for updates, etc.
</script>
Admin Capabilities
The module includes an admin interface configured via useYjsSyncAdmin.
Capabilities include:
- Document List: View active synced documents.
- Statistics: Monitor connections and data transfer.
- Demo: Integrated collaborative demo area.
Admin
The Yjs sync module includes a set of admin features to manage your synced documents and monitor their status.
Newsletter
Built-in newsletter functionality with double opt-in support and GDPR compliance.
