@wasl-flow/vue

Vue renderer for wasl-flow. It renders content models into Vue VNodes.

Install

npm install wasl-flow @wasl-flow/vue
# or
pnpm add wasl-flow @wasl-flow/vue

Quick Start

import { h } from 'vue';
import { VueRenderer } from '@wasl-flow/vue';

type ButtonModel = { type: 'button'; text: string; variant?: string };

const renderer = new VueRenderer({ showValidationErrors: true });

renderer.register({
  type: 'button',
  parse: model => ({ data: model as ButtonModel }),
  factory: ({ model }) => h('button', { class: `btn-${model.variant ?? 'primary'}` }, model.text),
});

Renderer Behavior

• render returns a VNode | null.
• renderArray aggregates outputs into a Vue Fragment and filters null and undefined.
• Default nullValue is null for Vue compatibility.
• When showValidationErrors is enabled, errors are rendered as styled VNodes with sanitized details.

Configuration

All RendererConfiguration options from the core package are supported. This renderer only changes the default nullValue to null.

For details on registration, parsing, and safety limits, see the core package README.