Publish QForm Builder as a Nuxt Layer npm package

This phase prepares QForm Builder as a Nuxt Layer publishable on npm.

The goal is to install the package in a new or existing Nuxt 4 application and activate it with extends.

Why publish as a layer first?

The current source tree already follows the Nuxt layer model:

app/components
app/composables
app/stores
app/types
app/utils
nuxt.config.ts
formkit.config.ts

Publishing as a layer is therefore the fastest and least risky route for the Community edition.

Structure selected for phase 1

qform-builder-layer/
├── app/
├── .playground/
├── docs/
├── formkit.config.ts
├── nuxt.config.ts
└── package.json

Demo pages are kept in .playground so they are not injected into applications consuming the layer.

Layer nuxt.config.ts

The layer must not force application-level decisions such as ssr: false. The host application remains responsible for SSR, modules and runtime configuration.

Publication package.json

The package exposes the root nuxt.config.ts as its main entry:

{
  "name": "@vevedh/qform-builder-layer",
  "main": "./nuxt.config.ts",
  "publishConfig": {
    "access": "public"
  }
}

Peer dependencies

Nuxt, Vue, Quasar, Pinia and FormKit are declared as peer dependencies. This keeps the host application in control of framework versions.

Test before publishing

bun run docs:build
bun run typecheck:nuxt
bun run pack:dry-run

Publish on npm

npm login
npm publish --access public

Install in a Nuxt 4 application

bun add @vevedh/qform-builder-layer

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

Minimal example

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

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

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

Best practice

Run npm pack --dry-run before every publication and verify that generated files, playground files and internal patch logs are not included.

Final Community contract

Community must remain stable, lightweight and documented. Advanced commercial features should be added through a separate Pro package.

Recommended final commands

bun run release:doctor
bun run release:publish:dry-run
npm publish --access public