Vue

Thin wrapper, not the runtime

The UI renders in the browser via the EWF runtime loaded from the CDN. This package is a thin wrapper that mounts it and bridges its events. It does not bundle the runtime.

Source: github.com/embedworkflow/embed-workflow-ui/packages/vue
npm: @embedworkflow/vue

Install

1
npm i @embedworkflow/vue

vue >= 3.3 is a peer dependency.

Prerequisites

Before any component renders, the page needs the EWF loader script and one auth call. This is the same for every SDK, so see the Embedding overview for the loader snippet and how to sign the JWT (server-side) and call load().

Sign JWTs server-side

Sign the JWT server-side. Never ship your secret key to the browser.

Getting started

The smallest working embed is a single field:

1
2
3
4
5
6
7
8
<script setup lang="ts">
import { EwfField, type EwfChangeDetail } from "@embedworkflow/vue";
const onChange = (d: EwfChangeDetail) => console.log(d.value, d.option);
</script>

<template>
  <EwfField workflow-id="wf_123" field-id="slack" @change="onChange" />
</template>

The change event carries EwfChangeDetail: { fieldId, value, option? }.

Components

One component per embeddable renderer.

Component	Renders	Key props
`EwfApp`	The full workflow builder / app	`base-path`
`EwfSettingsForm`	A workflow's client settings form	`workflow-id` \| `workflow-key`
`EwfConnections`	The managed connections UI	(none)
`EwfField`	A single field from a workflow's form	`workflow-id` \| `workflow-key`, `field-id`, `default-value`; emits `change`

`EwfApp`

1
<EwfApp base-path="workflows" style="height: calc(100vh - 60px)" />

EwfApp has a few renderer requirements (no leading slash on base-path, an explicit non-% height, and a catch-all route). See Embedding the full app in the overview. In vue-router that catch-all is { path: "/workflows/:pathMatch(.*)*", component: … }.

Advanced

`EwfEmbed`

Embed any renderer by name, including ones this package version has no typed component for yet. It works for whatever the loaded CDN runtime supports, so a renderer newly shipped in the SDK is usable without upgrading this package.

1
2
<EwfEmbed name="reports" :data="{ 'base-path': 'reports' }" @change="..." />
<!-- → <div class="EWF__reports" data-base-path="reports"> -->

name: renderer class suffix ("reports" maps to EWF__reports).
data: keys map to data-<key>.

Prefer the named components when they exist.

Template type-checking

The named components declare props at runtime, so editor template type-checking won't autocomplete prop names. They bind correctly at runtime.

Other exports

createEmbed: define your own component (the named components are built on it).
useEwfMount: the low-level composable the components are built on. It mounts the element from a ref once the runtime is ready, wires the change event, and tears it down on unmount. Reach for it only when hand-rolling a custom wrapper.
Also exported: load and the EwfChangeDetail type.