VueCraft NPM

Отладка ​

Режим отладки ​

ts
// Логировать каждое изменение values в console.group
useForm({ schema, debug: true })

useFormDebug ​

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

const { snapshot } = useFormDebug(form)
// snapshot.value = { values, errors, touched, isDirty, isValid, isSubmitting, optionsLoading, fields }

Реактивный снапшот всего состояния формы — полезен для панели отладки или инспектора в стиле DevTools. values глубоко клонируется через JSON.parse(JSON.stringify(...)), так что его безопасно выводить в <pre> без удержания живой ссылки на реактивное состояние формы.

Vue DevTools ​

vue-form-schema/devtools добавляет кастомный инспектор Forms (каждый активный экземпляр useForm() — values/errors/touched/isValid/isDirty, вживую) и слой таймлайна Forms (события setField/touch/submit/submitSuccess/submitError/reset/asyncValidate) в браузерное расширение Vue DevTools / отдельное приложение.

ts
// main.ts — только для dev, импортируется динамически, чтобы @vue/devtools-api
// никогда не попал в продакшен-бандл
const app = createApp(App)
if (import.meta.env.DEV) {
  const { installFormDevtools } = await import('@macrulez/vue-form-schema/devtools')
  installFormDevtools(app)
}
app.mount('#app')

Это отдельная точка входа намеренно — сам useForm() всегда лишь пишет в небольшой независимый от зависимостей внутренний реестр (почти нулевая цена, без импорта @vue/devtools-api), независимо от того, был ли вызван installFormDevtools, так что поддержка devtools ничего не стоит в базовом бандле, если вы не включите её сами. Требует @vue/devtools-api (peer-зависимость, ^6 || ^7 || ^8 — установите её рядом).