@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

Requirements

• Vue 3.0+

Quick Start

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

function handleReady(component) {
  console.log("Component loaded!", component);
}
</script>

<template>
  <MyopContainer
    componentId="your-component-id"
    :onReady="handleReady"
    :style="{ width: '600px', height: '400px' }"
  />
</template>

Components

MyopContainer

The main component for embedding Myop components in Vue applications.

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

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

function handleReady(component: IMyopComponent, innerVueComponentRef?: any) {
  console.log("Component ready!", component);
  // Access inner Vue component if the Myop component is Vue-based
  if (innerVueComponentRef) {
    console.log("Inner Vue component:", innerVueComponentRef);
  }
}
</script>

<template>
  <MyopContainer
    componentId="abc123"
    :items="items"
    :onReady="handleReady"
  >
    <template #loading>
      <div class="loading-spinner">Loading...</div>
    </template>
  </MyopContainer>
</template>

Props

Prop	Type	Description
componentId	string	Required. The ID of the Myop component to load
flowId	string	Optional flow ID for component resolution
onReady	(component, innerVueRef?) => void	Called when the component finishes loading

Passing Data

Pass data to your Myop component using Vue's attribute binding. All attributes are forwarded to the component:

<template>
  <MyopContainer
    componentId="my-table"
    :rows="tableData"
    :columns="columnConfig"
    :sortable="true"
    title="Users Table"
  />
</template>

Loading Slot

Display a custom loading indicator using the loading slot:

<template>
  <MyopContainer componentId="my-component">
    <template #loading>
      <div class="custom-loader">
        <span>Loading component...</span>
      </div>
    </template>
  </MyopContainer>
</template>

Vue-to-Vue Integration

When your Myop component is built with Vue, you get seamless integration:

• Prop reactivity: Props passed to MyopContainer automatically flow to the inner Vue component
• Expose access: Access the inner component's exposed properties and methods via the innerVueComponentRef parameter in onReady

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

const myopContainerRef = ref(null);

function handleReady(component, innerVueRef) {
  // Call methods exposed by the inner Vue component
  if (innerVueRef?.someMethod) {
    innerVueRef.someMethod();
  }
}
</script>

<template>
  <MyopContainer
    ref="myopContainerRef"
    componentId="vue-component"
    :onReady="handleReady"
  />
</template>

Handling Events

Myop components can emit CTA (Call-to-Action) events. Handle them using the component reference:

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

function handleReady(component) {
  // Subscribe to CTA events
  component.on("row-clicked", (payload) => {
    console.log("Row clicked:", payload);
  });

  component.on("export-requested", (payload) => {
    console.log("Export format:", payload.format);
  });
}
</script>

<template>
  <MyopContainer
    componentId="data-table"
    :onReady="handleReady"
  />
</template>

TypeScript Support

The package includes full TypeScript support:

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

interface TableData {
  rows: { id: number; name: string }[];
}

const tableData: TableData = {
  rows: [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
  ],
};

function handleReady(component: IMyopComponent) {
  console.log("Loaded:", component);
}
</script>

<template>
  <MyopContainer
    componentId="users-table"
    v-bind="tableData"
    :onReady="handleReady"
  />
</template>

API Reference

Exports

Export	Description
MyopContainer	Main component for embedding Myop components

MyopContainer Props

Prop	Type	Required	Description
componentId	string	Yes	The ID of the Myop component to load
flowId	string	No	Flow ID for component resolution
onReady	function	No	Callback when component is ready

License

MIT