VueCraft NPM

Тема

Модуль Nuxt ​

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

Установка ​

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: {
    // Автоимпорт composables/валидаторов/адаптеров (по умолчанию: true)
    autoImports: true,
    // Также зарегистрировать FormRenderer/MultiStepFormRenderer как
    // глобальные компоненты с префиксом `Vfs*`, чтобы избежать конфликтов имён (по умолчанию: false)
    components: false,
  },
})

С components: true:

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

SSR ​

Ядро библиотеки (useForm, валидаторы, парсеры) не обращается к браузерным API, поэтому при SSR оно работает так же, как любой другой composable Nuxt. Опциональные peer-зависимости (zod/yup/valibot) всё равно нужно установить в приложении, если вы используете соответствующий адаптер parse*, — модуль их не бандлит.

Разработка ​

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

Лицензия ​

MIT