VueCraft NPM

Модуль Nuxt ​

@macrulez/nuxt-vue-form-schema — модуль Nuxt для vue-form-schema, который автоимпортирует composables, адаптеры схем и (опционально) headless UI-компоненты. Никаких ручных import для публичного API библиотеки внутри вашего Nuxt-приложения не требуется.

Пока не опубликован в npm. Модуль живёт в packages/nuxt в репозитории на GitHub и полностью собран/типизирован/протестирован, но ещё не опубликован под именем @macrulez/nuxt-vue-form-schema — npm install ниже пока завершится ошибкой. До публикации соберите модуль из исходников сами (npm run build:nuxt в корне репозитория) либо используйте composables @macrulez/vue-form-schema напрямую с явными импортами.

Установка ​

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

Это всё — useForm, useFieldArray, useMultiStepForm, parseZod/parseYup/parseValibot, встроенные валидаторы (required, minLength, ...) и хелперы композиции схем (mergeSchemas, pickFields, ...) теперь автоимпортируются везде, где вы их используете, так же как собственные composables Nuxt.

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

Опции модуля ​

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

Блок vueFormSchema полностью типизирован — опция неправильной формы отлавливается TypeScript прямо в редакторе, а не только в рантайме.

autoImports ​

boolean · по умолчанию: true

Автоимпорт composables/валидаторов/адаптеров.

components ​

boolean · по умолчанию: false

Также зарегистрировать FormRenderer/MultiStepFormRenderer как глобальные компоненты с префиксом Vfs*, чтобы избежать конфликтов имён.

С components: true:

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

devtools ​

boolean · по умолчанию: true

Автоматически устанавливает панель Vue DevTools через runtime-плагин во время nuxt dev — ручной вызов installFormDevtools не требуется. Плагин работает только в dev-режиме и ничего не делает в продакшен-сборке. Установите false, если хотите подключать DevTools самостоятельно.

SSR ​

Nuxt-специфичное дополнение к общему разделу Совместимость с SSR: опциональные peer-зависимости (zod/yup/valibot) всё равно нужно установить в приложении, если вы используете соответствующий адаптер parse*, — модуль их не бандлит.

Разработка ​

bash
npm install
npm run dev:prepare  # генерирует типы .nuxt/, нужные playground'у
npm run dev          # запускает приложение playground
npm run build        # собирает модуль для публикации

Лицензия ​

MIT