Vue-subset HTML wire authoring

core_write_view_html accepts familiar Vue-shaped markup, but it does not run Vue or JavaScript. The rule is deliberately strict: an attribute is adopted iff it lowers to a declared AppDSL carrier with no execution. Call core_get_view_html_catalog first; it is the live vocabulary and includes the normalization table and schema-derived component properties.

Structural and reactive forms

Authoring form	Canonical carrier	Result
`v-for="item in orders" key="item.id"`	`repeater` collection + key expression	accepted
`item of orders` / `:key`	same repeater carrier	accepted with normalization advisory
`:label="state.caption"`	the component catalog’s declared `Binding<string>` slot	accepted
`v-model="state.region"` on `v-selection`	selection name/value channel	accepted
`v-model="param.region"` on `v-parameter`	parameter node binding	accepted
`v-if`, `v-show`, sibling `v-else-if` / `v-else`	wrapper `when` expression	accepted; `v-if`/`v-show` normalize to `when`
`<template>`	structural grouping only	accepted and spliced into its parent
`@click="state.open = TRUE"`	`InteractionSpec.on_click.set_state_var`	accepted
`@click="param.region = item.region"`	`InteractionSpec.on_click.set_parameter`	accepted
`:class="{ 'font-bold': state.emphasis }"`	one typed boolean expression plus one closed-vocabulary class	accepted
`v-html`, `ref`, `:style`, calls/statements, arbitrary objects/arrays	none	blocked with a repair suggestion

Only the item alias is accepted for repeaters. A query-backed repeater needs a stable key; index identity is intentionally unavailable. Nested repeater expressions are compiled in the existing row scope.

<template v-for="item in orders" key="item.order_id">
  <section>
    <p>Order</p>
    <v-metric
      source="orders"
      value-column="revenue"
      :label="item.customer"
    ></v-metric>
  </section>
</template>

Schema-derived component properties

Prefer the catalog projection over raw JSON. Scalar properties become attributes, arrays/objects become generated v-* child elements, and reserved wrapper names are exposed as spec-*. For example:

<v-chart source="orders">
  <v-layer mark="bar" x="month" y="revenue"></v-layer>
</v-chart>

<v-table source="orders" page-size="50">
  <v-column-def
    id="customer"
    source-field="customer_name"
    label="Customer"
  ></v-column-def>
</v-table>

These forms and view_html export address the same canonical spec paths. Authoring the same path twice—such as raw spec plus the corresponding child element—is rejected rather than resolved by precedence.

Dialogs, popovers, title, and invokers

Native platform spellings lower to existing overlay and interaction carriers:

<button commandfor="confirm" command="show-modal">Delete</button>
<dialog id="confirm" v-model:open="state.confirm_open" title="Confirm deletion">
  <p>This cannot be undone.</p>
</dialog>

<button popovertarget="details">Details</button>
<div id="details" popover v-model:open="state.details_open">
  <p>Additional context</p>
</div>

<div popover trigger="hover" title="Why this matters">
  <p v-if="state.show_method">Quarterly revenue after refunds</p>
  <v-metric source="orders" value-column="revenue" label="Revenue"></v-metric>
</div>

open supplies the resolver’s initial value. title on ordinary elements is preserved in the wrapper title carrier and rendered as a native hover tooltip. Targets resolve across the whole submitted fragment and multiple invokers may share one overlay. An overlay without v-model:open uses its own local.open.<element-id> resolver and works with its built-in trigger/editor affordance. An external invoker cannot write another element’s local resolver, so the compiler blocks that combination and asks for an explicit declared state.* or param.* binding. State variables must already exist in AppDSL state.

Diagnostics and canonical export

Blocking findings include a stable code, source path, and actionable Vue-shaped suggestion. Advisories describe deterministic normalization. Canonical export may prefer when, key, and schema-derived property spellings even when the input used their Vue aliases; byte-for-byte HTML round-trip is not promised, but the typed AppDSL meaning is. The compiler’s normalized output rewrites projectable raw specs to props/children, and htmlwire.ExportPlan provides the same AppDSL-to-wire projection for stored plans. Recompiling either form is spec-identical across every semantic kind; click assignments also export back to @click when the interaction is exactly one declared assignment. On core_read_scope, whole-view and #element: reads expose this projection as metadata.view_html; metadata.view_html_export_error explains any older stored carrier that cannot be represented without semantic loss.

How It Works

Notebooks

Visualization

Data

Automation

Reliability

AI

Vue html wire authoring

Vue-subset HTML wire authoring

Structural and reactive forms

Schema-derived component properties

Dialogs, popovers, title, and invokers

Diagnostics and canonical export

​Vue-subset HTML wire authoring

​Structural and reactive forms

​Schema-derived component properties

​Dialogs, popovers, title, and invokers

​Diagnostics and canonical export

Vue-subset HTML wire authoring

Structural and reactive forms

Schema-derived component properties

Dialogs, popovers, title, and invokers

Diagnostics and canonical export