Complete example: standalone builder

This page provides a copy-paste ready example for a Nuxt 4 application consuming the layer.

File

app/pages/form-builder.vue

Full code

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

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

function handleSave(payload: FormBuilderSavePayload) {
  console.log('Saved schema', payload.schema)
  console.log('Saved values', payload.values)
}
</script>

<template>
  <q-page padding>
    <ClientOnly>
      <FormBuilder
        builder-id="standalone-builder"
        v-model:schema="schema"
        v-model:values="values"
        autosave
        storage-key="standalone-builder"
        @save="handleSave"
      />
    </ClientOnly>
  </q-page>
</template>

Expected result

The page displays a complete visual builder. The user can add fields, configure them, preview the form and save the generated schema.