@mochabug/adapt-vue

Vue component for Adapt.

npm install @mochabug/adapt-vue

Requires Vue 3.

Quickstart

<script setup>
import { Adapt } from '@mochabug/adapt-vue';
</script>

<template>
  <Adapt id="auto-123" :style="{ height: '600px' }" />
</template>

If the automation requires authentication:

<Adapt id="auto-123" auth-token="your-token" :style="{ height: '600px' }" />

SSR (Nuxt)

Keep auth token on server:

<script setup>
import { Adapt } from '@mochabug/adapt-vue';
import { startSession } from '@mochabug/adapt-core';

const authToken = await getAuthTokenFromBackend();
const { token } = await startSession({ id: 'auto-123' }, authToken);
</script>

<template>
  <Adapt id="auto-123" :session-token="token" :style="{ height: '600px' }" />
</template>

Session inheritance

<!-- direct -->
<Adapt id="auto-123" inherit-token="token-from-parent" />

<!-- from URL hash: example.com#mb_session=xxx -->
<Adapt id="auto-123" :inherit-from="{ hash: 'mb_session' }" />

Fork display

<!-- side-by-side -->
<Adapt id="auto-123" fork-display-mode="side-by-side" :side-by-side-split="60" />

<!-- dialog -->
<Adapt id="auto-123" fork-display-mode="dialog" :dialog-backdrop-close="true" />

Advanced: Multiple transmitters or initial signals

For automations with multiple entry points or when you need to pass initial data:

<script setup>
import { Adapt, type SignalDataJson } from '@mochabug/adapt-vue';

// Start with initial signals (data must be base64 encoded)
const signals: { [key: string]: SignalDataJson } = {
  'input': {
    mimeType: 'text/plain',
    data: btoa('Hello World')
  }
};
</script>

<template>
  <!-- Start from a specific transmitter -->
  <Adapt
    id="auto-123"
    auth-token="your-token"
    transmitter="my-transmitter"
    :style="{ height: '600px' }"
  />

  <!-- Start with initial signals -->
  <Adapt
    id="auto-123"
    auth-token="your-token"
    transmitter="file-processor"
    :signals="signals"
    :style="{ height: '600px' }"
  />
</template>

Props

| Prop | Type | |------|------| | id | string (required) | | session-token | string | | auth-token | string | | transmitter | string | | signals | { [key: string]: SignalDataJson } | | inherit-token | string | | inherit-from | { hash: string } \| { param: string } | | fork-display-mode | 'side-by-side' \| 'dialog' | | side-by-side-split | number (0-100) | | dialog-backdrop-close | boolean |

Events

| Event | Payload | |-------|---------| | session | (status, fork?) | | output | (output) |

License

ISC © mochabug AB