@modyra/vue

Vue binding for the Modyra form engine: vueReactivity() implements the core's reactive contract on @vue/reactivity (shallowRef/computed/effect), so form state participates in Vue reactivity natively.

Headless. This package renders no markup — you bring your own. Modyra's DOM conformance suites (anatomy, state matrix, renderer equivalence) check the three adapters that do render; they do not apply here, because there is no part to find and no rendered state to compare. What this package promises — value, validation, error and lifecycle semantics — is checked by its own suites and the shared reactivity capability tests. Accessibility and theming are yours; @modyra/widgets exports the same projections, id policy and class vocabulary the rendering adapters use, so your markup can be built from the contract rather than guessed.

npm install @modyra/vue

import { createVueForm, field, required } from "@modyra/vue";

const form = createVueForm({ email: field("", [required()]) });
// form.f.email.value() / errors() react inside computed(), watchers, templates

In templates, calling form.f.*.value() / .errors() / .pending() tracks automatically — no hooks, no stores.

What's included

• createVueForm(schema, options?) — typed form on @vue/reactivity.
• useVueForm(schema, options?) — the same, disposed with the component setup scope.
• The full core API — field, group, array, serverValidator, crossField, drafts, undo/redo… re-exported from @modyra/core.

Typed arrays and async validation

Everything the core does works here — same code, Vue reactivity:

const form = createVueForm({
  items: array(group({ sku: field(""), qty: field<number>(1) })),
  coupon: field(
    "",
    [],
    serverValidator(checkCoupon, {
      dependsOn: ["country"],
      debounceMs: 400,
      timeoutMs: 5000,
    }),
  ),
});

<div v-for="(row, i) in form.f.items.rows()" :key="i">
  <input :value="row.sku.value()" @input="row.sku.set($event.target.value)" />
</div>

A complete checkout (nested groups, array rows, cancellable server validation, submit errors, drafts) lives in docs/examples/vue.md.

Status

Below 1.0, so the public surface can change in a minor release — pin your version and read the release notes. The reactivity binding and the typed form factory are implemented and tested. Ready-made Vue components are deliberately out of scope: this adapter is headless, and you bring your own design system.

License

MIT © Lorenzo Muscherà