Add a video call to Vue 3 or Nuxt.

Install the Vue 3 wrapper

Install the Vue package in a Vue 3 or Nuxt application. Vue 3.3 or newer is the declared peer dependency; the package uses @meeto/embed-core underneath.

npm install @meeto/embed-vue

Create a public key in the widget dashboard and add the local and production origins before rendering a component. The public key can be in client code; a server API secret cannot.

Render the MeetoRoom component

MeetoRoom renders a container whose iframe fills its size. Set an inline height or a CSS class. The prop is embedKey, not key.

<script setup lang="ts">
import { MeetoRoom } from "@meeto/embed-vue";

function onJoined(event: { room: string }) {
  console.log("joined", event.room);
}
</script>

<template>
  <MeetoRoom
    embed-key="mk_live_…"
    room-name="support"
    name="Visitor"
    lang="en"
    style="height: 520px"
    @joined="onJoined"
  />
</template>

Use roomName for a persistent destination such as support. Use room for a room code your app already owns. Set mode="bubble" for the floating button and panel.

Use useMeetoRoom for imperative controls

The composable returns a container ref, the live widget, the current room code and control functions. Pass a getter when options can change.

<script setup lang="ts">
import { useMeetoRoom } from "@meeto/embed-vue";

const { containerRef, room, join, leave, setCamera } = useMeetoRoom(() => ({
  embedKey: "mk_live_…",
  roomName: "support",
  mode: "inline",
  onEvent: (event) => console.log(event.type),
}));
</script>

<template>
  <div ref="containerRef" style="height: 520px" />
  <button type="button" @click="join('Visitor')">Join</button>
  <button type="button" @click="setCamera(false)">Camera off</button>
  <button type="button" @click="leave">Leave {{ room ?? "" }}</button>
</template>

Calling join before the iframe handshake is safe: the core buffers the command until the widget is ready. The composable destroys the instance on unmount and when an identity option changes.

Handle Vue events

MeetoRoom emits typed event names that match the core protocol. Use individual listeners for common states or on-event for one handler.

<MeetoRoom
  embed-key="mk_live_…"
  style="height: 520px"
  @phase="phase = $event.phase"
  @participants="count = $event.count"
  @error="report($event.code)"
  @left="saveDuration($event.durationSec)"
/>

The composable's onEvent callback receives the same event union. A prop or option identity change rebuilds the iframe, while changing only the callback does not.

Production checklist and limits

The widget uses WebRTC encryption in transit and is not end-to-end encrypted. See privacy details before documenting your own data handling or compliance.

Frequently asked questions

Explore more with Meeto