https://github.com/qq15725/vue-crdt
CRDT in Vue.js
https://github.com/qq15725/vue-crdt
crdt vue yjs
Last synced: about 1 year ago
JSON representation
CRDT in Vue.js
- Host: GitHub
- URL: https://github.com/qq15725/vue-crdt
- Owner: qq15725
- License: mit
- Created: 2023-12-27T04:06:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-02T07:24:18.000Z (over 2 years ago)
- Last Synced: 2025-04-30T08:11:45.510Z (about 1 year ago)
- Topics: crdt, vue, yjs
- Language: TypeScript
- Homepage:
- Size: 35.2 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Vue CRDT
## 📦 Install
```shell
npm i vue-crdt
// peerDependencies
npm i yjs
```
## 🦄 Usage
```ts
import { reactive, ref } from 'vue'
import { defineStore, useHistory } from 'vue-crdt'
const useEditorStore = defineStore(doc => {
// use y-webrtc
//
// new WebrtcProvider(
// 'your-room-name',
// doc,
// { password: 'optional-room-password' },
// )
return {
workspace: reactive({
pages: { a: 'b' },
activePage: null,
}),
width: ref(800),
height: ref(600),
}
})
const { workspace, width, height } = useEditorStore()
const history = useHistory(workspace)
workspace.activePage = 123
history.stopCapturing()
workspace.activePage = 456
history.undo()
console.log(workspace)
```