vue.js - Vee Validate Custom Rules not working in Laravel. Uncaught (in promise) Error: No such validator 'xxx' exists

Question

I have set up a Laravel with VueJs as a SPA. Also I integrated Vee Validate to validate all my form inputs. The default rules work as expected. However I don't seem to get my custom rules to work. I always get the error message:

Uncaught (in promise) Error: No such validator 'xxx' exists.

I followed this tutorial: https://medium.com/@rafaelogic/creating-a-custom-rule-in-vue-vee-validate-83777b9a5126

Here I have imported Vee Validate and the custom rules in my app.js file

Inside validators/index.js I have the following

That is the custom "rule" - just for testing inside validators/rules/number_of_electrical_feeds.js.

And that is the component that tries to use the rule - inside js/components/LuminaireLine/Form.js

What's the error I'm making?

question from:https://stackoverflow.com/questions/65926757/vee-validate-custom-rules-not-working-in-laravel-uncaught-in-promise-error-n

Answer 1

You should unify your imports, the vee-validate and vee-validate/dist/vee-validate.full.esm are two different dist files and thus each maintains their own rules and ecosystem.

You need to decide which version of vee-validate you want to use and only import everything from that dist

That includes extend, and the components and basically any vee-validate API you will import.

import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';

You can configure a webpack alias to make this easier for you.