Getting Started

What this guide covers

This guide helps you bootstrap the render sync layer between:

• a host product that owns allowed UI components;
• an independent remote extension runtime.

@omnicajs/vue-remote handles synchronized rendering. Business APIs, auth, discovery, and marketplace logic stay in adjacent tooling.

Install

yarn add @omnicajs/vue-remote @remote-ui/rpc

1. Bootstrap host runtime

On the host side:

1. Register host components with createProvider(...).
2. Create render channel receiver with createReceiver().
3. Render HostedTree and pass provider + receiver.
4. Start remote runtime (iframe/worker) and pass receiver.receive into run(...).

See: Host Components and Overview.

2. Bootstrap remote runtime

On the remote side:

1. Create remote root with createRemoteRoot(channel, options).
2. Create app with createRemoteRenderer(root).createApp(...).
3. Define host-exposed components via defineRemoteComponent(...).
4. Mount root and app during run(...), cleanup in release().

See: Remote Components and Overview.

3. Connect host and remote

Use a channel transport (commonly @remote-ui/rpc) and keep a stable handshake:

1. Host loads remote runtime URL.
2. Remote exposes run/release.
3. Host calls run(channel, hostBridge).
4. Remote mounts UI through the channel.
5. Session ends with release().

If you prefer dedicated worker runtime over iframe transport, see Web Worker Runtime. For iframe-specific setup, see Iframe Integration. For explicit channel handshakes across custom containers, see MessagePort Transport. For Electron/Tauri process-separated runtimes, see Desktop IPC Transport. For cross-process or cross-machine sessions, see Socket Transport. For local harnesses and tests, you can also run host + remote in one runtime via In-Memory Transport (dev/test only). For a side-by-side selection guide, see Transport Comparison.

4. Validate boundaries

Before extending further, verify:

• host controls the exposed component allowlist;
• props/events crossing runtimes are serializable;
• remote runtime does not depend on direct browser DOM APIs.

Next

• Build safe host contracts: Host Components.
• Model remote UI and boundaries: Remote Components.
• See transport-agnostic runtime model: Overview.
• See iframe-specific wiring model: Iframe Integration.
• Compare runtime modes side-by-side: Transport Comparison.
• See worker-specific topology and lifecycle: Web Worker Runtime.
• See explicit channel wiring mode: MessagePort Transport.
• See desktop inter-process bridge mode: Desktop IPC Transport.
• See network/session bridge model: Socket Transport.
• See dev/test single-runtime setup: In-Memory Transport.