Devtools Plugin v4.5
vee-validate ships with a Vue.js devtools plugin that allows you to inspect your forms. The terms “devtools plugin” or “plugin” in this page will refer to vee-validate’s devtools plugin from now on.
The devtools plugin is useful for debugging and inspecting your forms. A common situation is not having any clues on why a form isn’t submitting, the devtools plugin exposes to you all of the validation state giving you insight for your forms behavior.
Since vee-validate doesn’t require any app configuration, the devtools plugin is auto installed when you use useField
or useForm
or their component counterpart <Field />
and <Form />
.
warn
Note that the plugin won’t be installed in the following cases:
- You are using the umd builds via CDN
- Your
process.env.NODE_ENV
is set toproduction
ortest
That means the plugin is only available to the workflows that employ either webpack or vite where process.env.NODE_ENV
is available.
The Inspector
The devtools plugin adds a new “vee-validate” inspector that allows you to view your form state, at the moment all the properties are read only.
To use the vee-validate inspector, switch from the components
inspector to the vee-validate
inspector:
Disabling the plugin
If the plugin is causing you issues, you can disable it explicitly from the vue-devtools plugin page.
Also please don’t forget to report the issue here.
This short video shows how to disable the vee-validate devtools plugin: