@myop/vue

Official Vue bindings for embedding Myop components in your Vue applications.

Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.

Website | Documentation | Dashboard | Discord

Installation

npm install @myop/vue

yarn add @myop/vue

pnpm add @myop/vue

Auto-Generated Vue Components

Myop automatically generates a typed Vue component package for every component you create in the dashboard. Install it directly via npm:

npm install https://cloud.myop.dev/npm/{component-id}/vue

Then import and use it like any Vue component. For example, if you created a table component called "users-table" in the dashboard:

<script setup lang="ts">
import { UsersTable } from "@myop/users-table";

const users = [
  { id: 1, name: "Alice", email: "[email protected]", role: "Admin" },
  { id: 2, name: "Bob", email: "[email protected]", role: "User" },
  { id: 3, name: "Charlie", email: "[email protected]", role: "User" },
];

function handleRowClicked(payload: { rowData: any }) {
  console.log("Selected user:", payload.rowData);
}

function handleDeleteClicked(payload: { userId: number }) {
  deleteUser(payload.userId);
}

function handleExportRequested(payload: { format: "csv" | "xlsx" }) {
  exportToFormat(payload.format);
}
</script>

<template>
  <UsersTable
    :data="{ rows: users }"
    @row-clicked="handleRowClicked"
    @delete-clicked="handleDeleteClicked"
    @export-requested="handleExportRequested"
  />
</template>

Why this is powerful:

• Fully typed — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
• Auto loaded — Components are fetched and rendered automatically, no manual setup required
• Not in your code — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
• Zero bundle impact — The entire @myop/vue package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed

Environment options:

Set the default environment for all components using setEnvironment:

import { setEnvironment } from "@myop/vue";

// Set default environment for all component loads
setEnvironment("staging");

You can also override the environment directly on a specific component:

<template>
  <UsersTable
    :data="{ rows: users }"
    :preview="true"
    environment="staging"
  />
</template>

Environments are fully configurable in the dashboard, allowing you to test changes in staging before publishing to production.

For more details on auto-generated packages, see the Auto-Generated Packages documentation.

Requirements

• Vue 3.0+

Quick Start

<script setup lang="ts">
import { MyopComponent } from "@myop/vue";

function handleAction(action: string, payload: any) {
  console.log("Action:", action, "Payload:", payload);
}
</script>

<template>
  <MyopComponent
    componentId="your-component-id"
    :style="{ width: '600px', height: '400px' }"
    @action="handleAction"
  />
</template>

Components

MyopComponent

The main component for embedding Myop components.

<script setup lang="ts">
import { MyopComponent } from "@myop/vue";

const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];

function handleRowClicked(payload: any) {
  console.log("Row clicked:", payload);
}

function handleLoad(component: any) {
  console.log("Loaded!", component);
}

function handleError(error: string) {
  console.error("Error:", error);
}
</script>

<template>
  <MyopComponent
    componentId="abc123"
    :data="{ items }"
    @row-clicked="handleRowClicked"
    @load="handleLoad"
    @error="handleError"
  />
</template>

Props

| Prop | Type | Description | |------|------|-------------| | componentId | string | The ID of the Myop component to load | | data | object | Data to pass to the component via myop_init_interface | | style | object | CSS styles for the container | | #loader | slot | Loading indicator slot (default: no loader). Use <MyopLoader /> for default Myop loader | | #fallback | slot | Error fallback slot (default: <MyopFallback />). Override with custom component | | fadeDuration | number | Loader fade-out duration in ms (default: 200) | | environment | string | Load from a specific environment (e.g., "staging", "prod") | | preview | boolean | Load the unpublished preview version of the component |

Events

| Event | Payload | Description | |-------|---------|-------------| | @action | (action, payload) | Generic handler for all CTA events | | @[action-name] | payload | Handler for specific actions (e.g., @row-clicked) | | @load | component | Called when the component finishes loading | | @error | error: string | Called when loading fails |

Environments & Preview

Myop supports multiple environments, allowing you to test changes before going live:

<template>
  <!-- Production (default) -->
  <MyopComponent componentId="abc123" />

  <!-- Load from staging environment -->
  <MyopComponent componentId="abc123" environment="staging" />

  <!-- Load unpublished preview version (for testing before publishing) -->
  <MyopComponent componentId="abc123" :preview="true" />

  <!-- Combine both: preview version in staging -->
  <MyopComponent componentId="abc123" environment="staging" :preview="true" />
</template>

Environments are configured in the dashboard. Use :preview="true" to test unpublished changes before making them live.

MyopContainer (Legacy)

The legacy container component. Use MyopComponent for new projects.

<script setup lang="ts">
import { MyopContainer } from "@myop/vue";

function handleReady(component: any) {
  console.log("Ready!", component);
}
</script>

<template>
  <MyopContainer
    componentId="abc123"
    :onReady="handleReady"
  />
</template>

Type-Safe Event Handlers

Define your CTA payloads for fully typed event handlers:

<script setup lang="ts">
import { MyopComponent } from "@myop/vue";

// Define your component's data and CTA payload types
interface MyData {
  items: { id: string; name: string }[];
}

interface RowClickedPayload {
  rowIndex: number;
  rowData: any;
}

interface ItemSelectedPayload {
  itemId: string;
}

interface ExportRequestedPayload {
  format: "csv" | "json";
}

function handleRowClicked(payload: RowClickedPayload) {
  console.log("Row clicked:", payload.rowIndex);
}

function handleItemSelected(payload: ItemSelectedPayload) {
  console.log("Item selected:", payload.itemId);
}

function handleAction(action: string, payload: any) {
  console.log(action, payload);
}
</script>

<template>
  <MyopComponent
    componentId="dashboard-component"
    :data="{ items: [...] }"
    @row-clicked="handleRowClicked"
    @item-selected="handleItemSelected"
    @action="handleAction"
  />
</template>

Configuration

Preloading Components

Preload components for faster rendering:

import { preloadComponents, isPreloaded } from "@myop/vue";

// Preload multiple components
await preloadComponents(["component-1", "component-2"]);

// Check if a component is preloaded
if (isPreloaded("component-1")) {
  console.log("Component is cached and ready");
}

Custom Repository URL

import { setCloudRepositoryUrl } from "@myop/vue";

// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");

Environment Configuration

import { setEnvironment } from "@myop/vue";

// Set default environment for all component loads
setEnvironment("staging");

Local Development

import { enableLocalDev } from "@myop/vue";

// Connect to local Myop development server (localhost:9292)
enableLocalDev();

Advanced: Custom Repository

import { setCloudRepository, getCloudRepository } from "@myop/vue";
import { CloudRepository } from "@myop/sdk/helpers";

// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);

// Get the current repository
const repo = getCloudRepository();

Loading & Error States

By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.

Using the Default Myop Loader

<script setup lang="ts">
import { MyopComponent, MyopLoader } from "@myop/vue";
</script>

<template>
  <MyopComponent componentId="my-component" :fadeDuration="300">
    <template #loader>
      <MyopLoader />
    </template>
  </MyopComponent>
</template>

Custom Loading State

<template>
  <MyopComponent componentId="my-component" :fadeDuration="300">
    <template #loader>
      <div class="custom-loader">
        <Spinner />
        <p>Loading component...</p>
      </div>
    </template>
  </MyopComponent>
</template>

Custom Error Fallback

<script setup lang="ts">
import { MyopComponent, MyopFallback } from "@myop/vue";
</script>

<template>
  <MyopComponent componentId="my-component">
    <!-- Custom fallback -->
    <template #fallback>
      <div class="error-state">
        <p>Failed to load component</p>
        <button @click="() => window.location.reload()">Retry</button>
      </div>
    </template>
  </MyopComponent>

  <!-- Or use default Myop fallback explicitly -->
  <MyopComponent componentId="other-component">
    <template #fallback>
      <MyopFallback />
    </template>
  </MyopComponent>
</template>

API Reference

Exports

| Export | Description | |--------|-------------| | MyopComponent | Main component for embedding Myop components | | MyopLoader | Default Myop-branded loading indicator (opt-in) | | MyopFallback | Default Myop-branded error fallback | | preloadComponents | Preload components for faster rendering | | isPreloaded | Check if a component is cached | | enableLocalDev | Enable local development mode | | setCloudRepositoryUrl | Set custom server URL | | setCloudRepository | Set custom CloudRepository instance | | getCloudRepository | Get current CloudRepository instance | | setEnvironment | Set default environment |

License

MIT