VueCraft NPM

Debugging ​

Debug mode ​

ts
// Log every values change to 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 }

A reactive snapshot of all form state — useful for a debug panel or a DevTools-style inspector. values is deep-cloned via JSON.parse(JSON.stringify(...)), so it's safe to render in a <pre> tag without holding a live reference into the form's own reactive state.

Vue DevTools ​

vue-form-schema/devtools adds a custom Forms inspector (every active useForm() instance — values/errors/touched/isValid/isDirty, live) and a Forms timeline layer (setField/touch/submit/submitSuccess/submitError/reset/asyncValidate events) to the Vue DevTools browser extension / standalone app.

ts
// main.ts — dev-only, dynamically imported so @vue/devtools-api never
// reaches a production bundle
const app = createApp(App)
if (import.meta.env.DEV) {
  const { installFormDevtools } = await import('@macrulez/vue-form-schema/devtools')
  installFormDevtools(app)
}
app.mount('#app')

This is a separate entry point on purpose — useForm() itself only ever writes to a small dependency-free internal registry (near-zero cost, no @vue/devtools-api import) regardless of whether installFormDevtools is ever called, so devtools support costs nothing in the core bundle unless you opt in. Requires @vue/devtools-api (peer dependency, ^6 || ^7 || ^8 — install it alongside).