VueCraft NPM

Интеграция с сервером и персистентность ​

Ошибки валидации с сервера ​

Отобразите ответ backend'а с ошибками валидации на form.errors — без ручного разворачивания в каждом проекте.

ts
import { applyServerErrors } from '@macrulez/vue-form-schema'

const res = await fetch('/api/users', { method: 'POST', body: JSON.stringify(form.values.value) })
if (!res.ok) {
  const { formErrors } = applyServerErrors(form, await res.json(), { format: 'laravel' })
  if (formErrors.length) toast.error(formErrors[0]) // ошибки, не привязанные к конкретному полю
}

Встроенные format:

'laravel' ​

{ message, errors: { field: ["msg", ...], "nested.field": [...] } }

'drf' ​

{ field: ["msg"], nested: { field: ["msg"] } } (сплющивается в dot-paths); non_field_errors / detail становятся formErrors.

'flat' ​

{ field: "msg" | ["msg", ...] } — значение по умолчанию; подходит для большинства самописных API.

Либо передайте собственный маппер для чего угодно ещё: (raw) => ({ fieldErrors: {...}, formErrors: [...] }).

Ошибки полей, установленные так, ведут себя как любая другая запись в errors — при следующей клиентской валидации этого поля (по умолчанию по blur, либо на каждое нажатие клавиши при validateOn: 'input'), она пересчитывается из собственных валидаторов схемы, и серверная ошибка естественным образом заменяется. submit() тоже полностью пересчитывает errors, так что устаревшая серверная ошибка никогда не переживает до следующей попытки отправки.

applyServerErrors(form, raw, options?):

format ​

'laravel' | 'drf' | 'flat' | ((raw) => ...) · по умолчанию: 'flat'

Имя встроенного формата или кастомный маппер.

touch ​

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

Пометить затронутые поля как touched, чтобы ошибки показались сразу.

merge ​

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

Объединять с существующими errors, а не заменять их.

normalizeServerErrors(raw, format?) выполняет тот же маппинг, не трогая форму, если вам нужны просто { fieldErrors, formErrors }.

Персистентные формы ​

ts
useForm({
  schema,
  persist: 'local', // или 'session'
  persistKey: 'checkout', // опционально — по умолчанию хэш от имён полей
})

Значения восстанавливаются из хранилища в onMounted. reset() очищает сохранённое значение. SSR-безопасно: чтение из хранилища защищено проверкой typeof window !== 'undefined'.