Use several FormBuilder instances on the same page

FormBuilder is multi-instance thanks to the builder-id prop.

Each instance owns its own:

• Pinia store;
• history store;
• autosave key;
• DOM id;
• FormKit form id;
• internal state.

Complete example

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

const userSchema = ref<FormBuilderSchema>([])
const userValues = ref<FormBuilderValues>({})

const projectSchema = ref<FormBuilderSchema>([])
const projectValues = ref<FormBuilderValues>({})
</script>

<template>
  <div class="row q-col-gutter-md">
    <div class="col-12 col-md-6">
      <ClientOnly>
        <FormBuilder
          builder-id="users-form-builder"
          v-model:schema="userSchema"
          v-model:values="userValues"
          autosave
        />
      </ClientOnly>
    </div>

    <div class="col-12 col-md-6">
      <ClientOnly>
        <FormBuilder
          builder-id="projects-form-builder"
          v-model:schema="projectSchema"
          v-model:values="projectValues"
          autosave
        />
      </ClientOnly>
    </div>
  </div>
</template>

Generated autosave keys

For a named builder:

form-builder:<builderId>:form-fields
form-builder:<builderId>:state

The default builder keeps legacy keys for compatibility.

Important rules

1. Do not change builder-id after mount

Changing it during runtime creates a new isolated state.

2. Use a business id

Prefer:

service-users-form-builder

Avoid:

builder-${Math.random()}

3. One builder, one responsibility

A builder should edit one form definition at a time.

Test page in the layer

The playground includes a multi-instance test page:

/multi-instance