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
• Creating Myop WebComponents
• Creating Flows
• Using Myop Components in Vue
• Communication with Vue Components

Exposing Vue Components

Use the expose function to directly expose your Vue component:

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
   
   

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:
   

   
   

5. Define how this component connects to your host app using props and refs.
   

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.
   

   
   

   

   
   

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.
     
     

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)
     
8. The component is saved and published! You can copy the code snippet and add this to your host application.
   
   

Creating Flows

1. Open the Myop dashboard

   
   

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

3. Add your component to the 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

<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>

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.

<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.
• For API documentation, refer to our docs.