# Vue Integration Guide

## Overview

This guide explains how to integrate your Vue components with Myop, allowing you to expose them as web components and incorporate them into Myop flows.

## Table of Contents

- [Exposing Vue Components](#exposing-vue-components)
- [Creating Myop WebComponents](#creating-myop-webcomponents)
- [Creating Flows](#creating-flows)
- [Using Myop Components in Vue](#using-myop-components-in-vue)
- [Communication with Vue Components](#communication-with-Vue-components)

## Exposing Vue Components

Use the `expose` function to directly expose your Vue component:

```typescript
import { App } from './app';
import { expose } from '@myop/Vue-remote';

expose(App, 'test-comp-1', async (app) => {
  // init the app instance, registen, execute use() etc..
  return app;
}).then();
```

## Creating Myop WebComponents

Follow these steps to create a Myop WebComponent from your Vue component:

1. Open the [Myop dashboard](https://dashboard.myop.dev) <br/>
![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard') <br/>

2. To create a new component using a predefined template, click on the "Use sample component" button.
3. To create a new component from scratch, click on the "Create from scratch" button.
4. Choose Vue loader type:<br/>
   ![Loader Selection](/assets/images/loader-selection-747c8e34b6544a183479aba7b0c6b39d.png 'Loader Selection')
   <br/>
5. Define how this component connects to your host app using **props** and **refs**. <br/>
6. If you're using a template, you can add all **detected refs**. Otherwise, use the configuration panel to add your own **refs** and **props**. <br/>
   ![Add detected refs](/assets/images/add-detected-refs-1c29a2abcf4241ecf3af6166565a2304.png 'Add detected refs')
   <br/>
   ![Add detected refs](/assets/images/add-ref-b8ea6c7a8c46499732bbd73f14e36da5.png 'Add detected refs')
   <br/>
7. Configure your component:
    - Enter the component name and description.
    - Enter your component URL (e.g., http://localhost:4400/main.js).
    - Enter the tag name that you exposed the component with.
    - Click on the "view source code" button to view the React code example.
    - Click on the "Set to default" to set the relevant variant as the default one.
    - Click on the Delete button to delete a variant. <br/>
![Variants Section](/assets/images/variants-section-75e7526dd4247afc9168564ca272ab99.png 'Variants Section')<br/>

**Note:** The GUID in the browser URL is the `componentId` that you'll need later

7. Saving:
    - If you want to save the component, click on the "Save" button
    - If you want to attach the component to an existing "Flow", Click on the ChevronDown button to search for the relevant flow
    - If you want to attach the component to a new flow, click on the (after the component itself was already saved) <br/>
      ![Saving](/assets/images/saving-bce7f95d22932187ba7452fd7bc157f3.png 'Saving')
   
8. The component is saved and published! You can copy the code snippet and add this to your host application. <br/>
 ![Saved](/assets/images/saved-component-229b885c3aea9ff629d5283ae397fe54.png 'Saved')
   <br/>

## Creating Flows

1. Open the [Myop dashboard](https://dashboard.myop.dev)
   ![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard')
   <br/>

2. Click on the "Create a new flow" button to add a new flow

3. Add your component to the flow:
   ![Flow](/assets/images/flow-81bf8b2cc37ac890fd20fa0b1069f344.png 'Flow')

**Note:** The GUID in the browser URL is the `flowId` that you'll need later

## Using Myop Components in Vue

You can integrate Myop components into your Vue application like so:

### As a Component in Templates

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

<template>
  <MyopContainer
      flowId="{flowId from dashboard}"
      componentId="{componentId from dashboard}
      name="Demo"
    />
</template>
```

## Isolating a component

Render an untrusted or marketplace component **fully isolated** — sandboxed, with no
access to the host page — by passing `isolation` through `loaderOptions`:

```vue
<template>
  <MyopComponent
    :componentId="untrustedId"
    :data="data"
    :loaderOptions="{ isolation: true }"
    :on="(action, payload) => { /* … */ }"
  />
</template>

<script setup>
import { MyopComponent } from '@myop/vue';
</script>
```

Only that instance is isolated; data-in and CTAs work exactly as usual. For how
isolation works, plus app-wide rules and the marketplace pattern, see
[Component Isolation & Render Policy](/docs/learn/component-isolation).

## Communication with Vue Components

The `MyopContainer` component accepts any `props` that are passed down to the component, which can include a wide variety of data types. This may consist of simple primitive values, complex objects, functions, and even non-serializable objects.

The `MyopContainer` component also provides a `componentReady` event that you can use to communicate with your Vue component.

```html
<myop-container
  flowId="1d75e2f9-9a2d-49f1-aeeb-6268921a29fe"
  componentId="4df90a03-553c-44a3-b153-d0ddccdc0010"
  myProp="someObject"
  componentReady="onReady($event)"
/>
```

## Additional Resources

- For more information on the Myop platform, visit [our website](https://myop.dev).
- For API documentation, refer to [our docs](https://docs.myop.dev).