Troubleshooting

FormBuilder or FormViewer components are not found

Check that the layer is declared in nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@vevedh/qform-builder-layer'],
})

Also check that the host app has the required modules:

modules: [
  'nuxt-quasar-ui',
  '@pinia/nuxt',
  '@formkit/nuxt',
]

#components imports fail

Run Nuxt prepare:

bunx nuxi prepare

Then restart the development server.

The builder loses state or mixes two forms

Use a stable and unique builder-id for each instance:

<FormBuilder builder-id="users-form-builder" />
<FormBuilder builder-id="projects-form-builder" />

Autosave does not reload the expected schema

Check the storage-key and builder-id. If you use dynamic ids, local autosave keys will also change.

My existing application uses SSR

Wrap FormBuilder in <ClientOnly>:

<ClientOnly>
  <FormBuilder builder-id="admin-builder" />
</ClientOnly>

~/types/form-builder does not work in the host app

Do not import internal layer paths from the host application. Use the public package export:

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

FormViewer displays nothing

Check that the schema is an array:

const schema = ref<FormBuilderSchema>([])

and that it contains valid FormKit/Quasar field definitions.

The form does not submit

Listen to the submit event:

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

Global best practice

When an error occurs, isolate the problem in this order:

Nuxt modules
Layer declaration
Types and imports
builder-id
schema shape
runtime values
persistence layer