@meeto/embed-vue

@meeto/embed-vue

Add free video calls to your Vue app with one component. Meeto is a video call widget that embeds a complete call experience — lobby, screen sharing with annotations, chat, reactions and recordings — straight into your site. Your visitors join right in the browser, with no downloads and no sign-up. The free plan is included, no credit card required.

@meeto/embed-vue is the Vue video chat component built on the Meeto WebRTC video call SDK. It's a drop-in <MeetoRoom /> for Vue 3 and Nuxt — a free live video chat widget for customer support, sales, telehealth video calls or online tutoring, without wiring up a video conferencing API yourself.

Features

• Free video calls — the free plan is included with no credit card: up to 10 participants and 60-minute group calls. Pro lifts the limits (25 participants, 4K, hidden badge) only when you need it.
• One Vue component — render <MeetoRoom embed-key="…" />, or use the useMeetoRoom composable for full control.
• SSR-safe — works with Nuxt; the widget mounts on the client.
• Floating button or inline embed — a chat-style floating call button (bubble) in the corner, or an inline call in your own container.
• Persistent named rooms — route every visitor to a shared room by name ("support", "sales").
• Presence badge — the floating button shows how many people are currently in the room.
• 42 UI languages — follows the visitor's browser language automatically, or set your own.

Getting started

1. Create a free embed key at meeto.me/app and add your site's domain (the key is public and origin-locked to your domains).

2. Install:

   npm install @meeto/embed-vue

3. Render the call:

   <script setup>
   import { MeetoRoom } from "@meeto/embed-vue";
   </script>
   
   <template>
     <MeetoRoom
       embed-key="mk_live_…"
       style="height: 520px"
       @joined="(e) => console.log('joined', e.room)"
     />
   </template>

For full control, use the useMeetoRoom composable — it returns a containerRef plus join / leave / setMicrophone / setCamera.

The prop is embedKey (not key), because key is reserved by Vue.

Options

Prop	Description
embedKey	Public embed key (mk_live_…) from your dashboard. Required.
mode	"inline" (embed in the container, default) or "bubble" (floating call button).
roomName	Persistent named room — everyone with the same name shares one room.
room	Code of an existing room; if unset, the widget creates one and reuses it.
name	Default participant name, prefilled in the lobby.
lang	UI language (ru, en, de, …); defaults to the browser language.
accent	Accent color of the UI, hex (e.g. #27D6AA).
position	Corner of the bubble button: "bottom-right" (default) or "bottom-left".
autoJoin	Join immediately, skipping the lobby (open-door rooms only).
baseUrl	Meeto address for self-hosted installations (defaults to https://meeto.me).

Events & methods

Listen with @-events (or the onEvent prop for all of them):

Event	Fires when
@joined	The visitor joins the call (carries the room code).
@left	The visitor leaves (carries the reason and durationSec).
@participants	The participant count changes.
@phase	The call phase changes (prejoin, room, finished, error).
@error	An error occurs (carries code and message).
@ready	The widget has loaded and is ready.

The component exposes join(name?), leave(), setMicrophone(on) and setCamera(on) via a template ref, and the useMeetoRoom composable returns the same controls.

Links

• Docs: meeto.me/developers
• Live demo & playground: meeto.me/widget
• Dashboard: meeto.me/app

License

MIT