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_ENVis set toproductionortest
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:
Form Name
When working with multiple forms, you can distinguish between them by their name. The name of the form can be set using the name prop on the <Form /> component or the useForm composable.
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: