Vizel API / vue/src / useVizelCollaboration

Function: useVizelCollaboration()

function useVizelCollaboration(getProvider, options?): UseVizelCollaborationResult;

Defined in: packages/vue/src/composables/useVizelCollaboration.ts:72

Composable for tracking real-time collaboration state with a Yjs provider.

This composable manages event listeners on the provider to track connection status, sync state, and peer count. It does NOT create the Yjs document or provider — users must create those themselves and pass them in.

Parameters

Parameter	Type	Description
getProvider	() => | VizelYjsProvider | null | undefined	Function that returns the Yjs provider instance
options	VizelCollaborationOptions	Collaboration options including user info and callbacks

Returns

UseVizelCollaborationResult

Collaboration state and controls

Example

<script setup lang="ts">
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import { useVizelEditor, useVizelCollaboration } from "@vizel/vue";

const doc = new Y.Doc();
const provider = new WebsocketProvider("ws://localhost:1234", "my-doc", doc);

const { isConnected, peerCount } = useVizelCollaboration(
  () => provider,
  { user: { name: "Alice", color: "#ff0000" } }
);

const editor = useVizelEditor({
  features: { collaboration: { provider: true } },
  extensions: [
    Collaboration.configure({ document: doc }),
    CollaborationCursor.configure({
      provider,
      user: { name: "Alice", color: "#ff0000" },
    }),
  ],
});
</script>