Установка

Требования

Окружение	Минимальная версия
Node.js	20.12+
Vue	3.3.0+ (обязательна)
zod	3.22.0+ (опционально — только для /zod)
yup	1.3.0+ (опционально — только для /yup)
valibot	1.0.0+ (опционально — только для /valibot)
primevue	4.0.0+ (опционально — только для /ui/primevue)
naive-ui	2.38.0+ (опционально — только для /ui/naive)
@vue/devtools-api	6+ / 7+ / 8+ (опционально — только для /devtools)

В отличие от большинства пакетов в этом каталоге, сам Vue здесь — обязательная peer-зависимость, не опциональная: ядро (useForm, валидаторы, парсеры) специфично для Vue, не фреймворк-агностично.

Установка

npm install @macrulez/vue-form-schema

Опциональные peer-зависимости:

npm install zod       # адаптер Zod
npm install yup       # адаптер Yup
npm install valibot   # адаптер Valibot

Используете Nuxt?

@macrulez/nuxt-vue-form-schema автоимпортирует useForm, useFieldArray, встроенные валидаторы, адаптеры схем и многое другое — ручной import не нужен:

npm install @macrulez/nuxt-vue-form-schema

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

Опции см. на странице Модуль Nuxt.

Быстрый старт

<script setup lang="ts">
import { useForm } from '@macrulez/vue-form-schema'
import type { FieldDefinition } from '@macrulez/vue-form-schema'

const schema: FieldDefinition[] = [
  { type: 'text', name: 'name', label: 'Full name', required: true },
  { type: 'email', name: 'email', label: 'Email', required: true },
  {
    type: 'select',
    name: 'role',
    label: 'Role',
    options: [
      { label: 'Admin', value: 'admin' },
      { label: 'User', value: 'user' },
    ],
  },
]

const { values, errors, touched, isValid, isSubmitting, submit, setField } = useForm({
  schema,
  validateOn: 'blur',
  onSubmit: async (data) => {
    await fetch('/api/users', { method: 'POST', body: JSON.stringify(data) })
  },
})
</script>

<template>
  <form @submit.prevent="submit">
    <div v-for="field in schema" :key="field.name">
      <label>{{ field.label }}</label>
      <input
        :type="field.type"
        :value="values[field.name]"
        @input="setField(field.name, ($event.target as HTMLInputElement).value)"
        @blur="touched[field.name] = true"
      />
      <span v-if="touched[field.name] && errors[field.name]">
        {{ errors[field.name][0] }}
      </span>
    </div>
    <button type="submit" :disabled="!isValid || isSubmitting">Submit</button>
  </form>
</template>

Либо используйте FormRenderer для рендеринга без разметки:

<script setup lang="ts">
import { useForm } from '@macrulez/vue-form-schema'
import { FormRenderer } from '@macrulez/vue-form-schema/ui'

const form = useForm({ schema, onSubmit })
</script>

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