NFZ Studio integration pattern

In NFZ Studio, FormBuilder should remain a UI component. Persistence should be handled by a business store or a Feathers/NFZ service.

Recommended architecture

NFZ Studio page
  ↓
useStudioFormBuilderStore()
  ↓
FormDefinitions repository
  ↓
NFZ / Feathers service
  ↓
MongoDB

Recommended business model

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

export interface StudioFormDefinition {
  _id?: string
  key: string
  label: string
  serviceName?: string
  schema: FormBuilderSchema
  initialValues?: FormBuilderValues
  status: 'draft' | 'published' | 'archived'
  version: number
  createdAt?: string
  updatedAt?: string
}

Client repository

export function useStudioFormDefinitionsRepository() {
  async function save(definition: StudioFormDefinition) {
    return await $fetch('/api/form-definitions', {
      method: 'POST',
      body: definition,
    })
  }

  async function findByKey(key: string) {
    return await $fetch<StudioFormDefinition>(`/api/form-definitions/${key}`)
  }

  return { save, findByKey }
}

Typical NFZ Studio page

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

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

async function handleSave(payload: FormBuilderSavePayload) {
  await repository.save({
    key: 'users-create-form',
    label: 'Create user form',
    serviceName: 'users',
    schema: payload.schema,
    initialValues: payload.values,
    status: 'draft',
    version: 1,
  })
}
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="nfz-users-create-form"
      v-model:schema="schema"
      v-model:values="values"
      autosave
      @save="handleSave"
    />
  </ClientOnly>
</template>

Suggested NFZ service

A future Studio edition can expose a form-definitions service using nuxt-feathers-zod. This service can manage CRUD, versioning, RBAC and audit logs.

Security best practice

Do not trust a client-provided schema blindly. Validate and sanitize stored definitions before exposing them to public users.