Vue Adapter (`@roomful/vue`)

Audience: users.

Plugin Setup

import { createApp } from 'vue';
import { RoomfulPlugin } from '@roomful/vue';
import App from './App.vue';

const app = createApp(App);

app.use(RoomfulPlugin, {
  roomId: 'my-room',
  presence: { name: 'Alice', color: '#4F46E5' },
  transport: 'auto',
});

app.mount('#app');

Composables Example

<script setup lang="ts">
import { usePresence, useCursors, useSharedState, useEvent } from '@roomful/vue';

const { self, others } = usePresence();
const { ref: boardRef, cursors } = useCursors();

const [gameState, setGameState] = useSharedState('game', {
  initialValue: { phase: 'lobby', players: [] },
  strategy: 'lww',
});

const emitReaction = useEvent('reaction', (data, from) => {
  console.log('reaction from', from.name, data);
});
</script>

<template>
  <section>
    <p>{{ self.name }} sees {{ others.length }} collaborators</p>
    <div ref="boardRef">Remote cursors: {{ cursors.length }}</div>
  </section>
</template>

Integration Notes

• Designed for Vue 3 composable patterns and setup() usage in both Composition API and Options API components.
• All reactive state is exposed as Vue refs, so template auto-unwrapping works without .value.
• useSharedState() returns a tuple of [stateRef, setState].
• useEvent() returns a stable emit(payload) function.
• v-roomful-cursors is registered globally by RoomfulPlugin as shorthand for cursor mounting:

<template>
  <div v-roomful-cursors="{ throttleMs: 16 }" />
</template>

• Plugin install owns the room lifecycle and disconnects the room on app.unmount().

Related Docs

• Reference index
• Core API
• State, awareness, events
• Quickstart
• Docs index