Vue Composition Patterns

Integrate Helios into Vue components using the Composition API, Refs, and Watchers.

Quick Start

1. Create useVideoFrame Composable

This composable subscribes to Helios and provides a reactive frame reference.

// composables/useVideoFrame.js
import { ref, onUnmounted } from 'vue';

export function useVideoFrame(helios) {
  const frame = ref(helios.currentFrame.peek());

  const unsubscribe = helios.subscribe((state) => {
    frame.value = state.currentFrame;