@liveschema/vue

Vue 3 bindings for @liveschema/core. The useLiveSchema() composable walks a liveschema definition against your form's reactive values and exposes the live reachable-field set — gate templates with a predicate or v-for the reachable subset.

Install

pnpm add @liveschema/core @liveschema/vue zod

Define a schema

Schemas are plain @liveschema/core definitions — defineSchema() plus .field() / .when() (see core for the full API). A minimal schema.ts:

import { z } from 'zod'
import { defineSchema } from '@liveschema/core'

export const schema = defineSchema()
  .field('orderType', z.enum(['pickup', 'delivery']))
  .when({ orderType: 'delivery' }, (b) => b.field('paymentMethod', z.enum(['card', 'cash'])))

paymentMethod only becomes reachable once orderType is 'delivery' — exactly what the composable gates on below.

Usage

values accepts a ref, computed, getter, or plain object — toValue unwraps it on each recomputation.

Example with vee-validate

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toStandardSchema } from '@liveschema/core'
import { useLiveSchema } from '@liveschema/vue'
import { schema } from './schema'

const { values, defineField } = useForm({ validationSchema: toStandardSchema(schema) })
const { fields, isReachableField } = useLiveSchema(schema, values)

// vee-validate models for each field
const [orderType] = defineField('orderType')
const [paymentMethod] = defineField('paymentMethod')
</script>

<template>
  <label v-for="o in fields.orderType.enumOptions" :key="o">
    <input v-model="orderType" type="radio" :value="o" />
    {{ o }}
  </label>

  <template v-if="isReachableField('paymentMethod')">
    <label v-for="o in fields.paymentMethod.enumOptions" :key="o">
      <input v-model="paymentMethod" type="radio" :value="o" />
      {{ o }}
    </label>
  </template>
</template>

Return shape

| Property | Type | Meaning | | ------------------ | --------------------------------------------------------- | -------------------------------------------------------------------------- | | fields | ComputedRef<Record<Key, { isReachable; enumOptions? }>> | Every declared field, keyed by name, in schema order. | | reachableFields | ComputedRef<Partial<typeof fields.value>> | The currently-reachable subset; unreachable keys are absent. | | isReachableField | (key) => boolean | Predicate readable from templates without .value. Use for v-if gating. |

Keys are typed via SchemaKeys<typeof schema>, so isReachableField('typo') is a compile error. enumOptions is only present on enum-like fields — accessing it on a string/boolean field is a compile error rather than undefined.

Examples

• examples/vue-example — Vue 3 + vee-validate (single-page) [