Complete example: Builder + Viewer workflow

This example shows two pages:

• an admin page to build the form;
• a public page to render the form.

1. Shared storage composable

import type { FormBuilderSchema, FormBuilderValues } from '@vevedh/qform-builder-layer/types'

export function useDemoFormStorage() {
  const schema = useState<FormBuilderSchema>('demo-form-schema', () => [])
  const values = useState<FormBuilderValues>('demo-form-values', () => ({}))

  return { schema, values }
}

2. Admin builder page

<script setup lang="ts">
const { schema, values } = useDemoFormStorage()
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="admin-demo-builder"
      v-model:schema="schema"
      v-model:values="values"
      autosave
    />
  </ClientOnly>
</template>

3. Public viewer page

<script setup lang="ts">
const { schema, values } = useDemoFormStorage()

function submit(payload: Record<string, unknown>) {
  console.log('Submit', payload)
}
</script>

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

Production notes

Replace useState with a real persistence layer: Pinia, Feathers/NFZ service, MongoDB or another backend.