Skip to content

Nuxt Module ​

@macrulez/nuxt-vue-form-schema — a Nuxt module for vue-form-schema that auto-imports composables, schema adapters and (optionally) the headless UI components. No manual import statements needed for the library's public API inside your Nuxt app.

Not yet published to npm. The module lives at packages/nuxt in the GitHub repository and is fully built/typechecked/tested, but hasn't been published under @macrulez/nuxt-vue-form-schema yet — npm install below will fail until it is. Until then, build it yourself from source (npm run build:nuxt at the repo root) or use @macrulez/vue-form-schema's composables directly with explicit imports.

Installation ​

bash
npm install @macrulez/nuxt-vue-form-schema
ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/nuxt-vue-form-schema'],
})

That's it — useForm, useFieldArray, useMultiStepForm, parseZod/parseYup/parseValibot, the built-in validators (required, minLength, ...) and the schema-composition helpers (mergeSchemas, pickFields, ...) are now auto-imported wherever you use them, same as Nuxt's own composables.

vue
<script setup lang="ts">
const form = useForm({
  schema: [{ type: 'text', name: 'email', required: true }],
  onSubmit: async (values) => {
    /* ... */
  },
})
</script>

Module options ​

ts
export default defineNuxtConfig({
  modules: ['@macrulez/nuxt-vue-form-schema'],
  vueFormSchema: {
    autoImports: true,
    components: false,
    devtools: true,
  },
})

The vueFormSchema block is fully typed — a wrong-shaped option is caught by TypeScript in your editor, not just at runtime.

autoImports ​

boolean · default: true

Auto-import composables/validators/adapters.

components ​

boolean · default: false

Also register FormRenderer/MultiStepFormRenderer as global components, prefixed Vfs* to avoid name clashes.

With components: true:

vue
<template>
  <VfsFormRenderer :form="form" submit-label="Save" />
</template>

devtools ​

boolean · default: true

Auto-install the Vue DevTools panel via a runtime plugin during nuxt dev — no manual installFormDevtools call needed. The plugin only runs in dev; it's a no-op in a production build. Set to false if you'd rather install DevTools yourself.

SSR ​

Nuxt-specific note on top of the general SSR compatibility section: optional peer dependencies (zod/yup/valibot) still need to be installed in your app if you use the corresponding parse* adapter — the module does not bundle them.

Development ​

bash
npm install
npm run dev:prepare  # generates the .nuxt/ types the playground needs
npm run dev          # runs the playground app
npm run build        # builds the module for publishing

License ​

MIT