Use FormViewer

FormViewer renders a schema generated by FormBuilder.

It is useful for:

• previewing a form;
• rendering a public form;
• rendering an admin read-only form;
• testing a stored schema.

Minimal contract

<FormViewer
  :form-fields="schema"
  v-model="values"
/>

Complete example

<script setup lang="ts">
import type { FormBuilderSchema, FormBuilderValues } from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([
  {
    $formkit: 'q-input',
    name: 'email',
    label: 'Email',
    validation: 'required|email',
  },
])

const values = ref<FormBuilderValues>({})

function submit(payload: FormBuilderValues) {
  console.log('submitted values', payload)
}
</script>

<template>
  <FormViewer
    :form-fields="schema"
    v-model="values"
    @submit="submit"
  />
</template>

Read-only mode

<FormViewer
  :form-fields="schema"
  v-model="values"
  readonly
/>

Load a schema from an API

<script setup lang="ts">
import type { FormBuilderSchema, FormBuilderValues } from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([])
const values = ref<FormBuilderValues>({})

onMounted(async () => {
  const result = await $fetch<{ schema: FormBuilderSchema }>('/api/forms/contact')
  schema.value = result.schema
})
</script>

Best practice

Store schema and user values separately. The schema describes the form; the values are the runtime data submitted by a user.