nuxt-validate
nuxt-validate copied to clipboard
Configuration / options does not seem to take effect
I have tried customizing the options, like below:
['nuxt-validate', {
lang: 'en',
rules: ['email', 'min', 'max', 'confirmed'],
nuxti18n: {
locale: {
'da': 'da',
'en': 'en'
},
rules: ['email', 'min', 'max', 'confirmed']
},
events: 'change',
classes: {
valid: 'is-success',
invalid: 'is-danger'
}
// regular vee-validate options
// https://github.com/logaretm/vee-validate/blob/master/docs/configuration.md
}],
But classes / events are not being registered. What am I doing wrong?
Actually, it's now called "mode" instead of "events" it seems - and that works perfectly.
The "classes" property is the one not working.
If I inspect the input it has classes, but it does not use the class-names provided in the config. It uses the native: "invalid" instead of "is-danger"
@simplenotezy Did you find a way to use classes?
Have you tried an option like this?
nuxt.config.js
...
classes: true,
classNames: {
valid: 'is-success',
invalid: 'is-danger',
},
...
component
<ValidationProvider v-slot="{ classes, errors }" name="email" rules="required|email">
<div class="control" :class="classes">
<input v-model="email" type="text" placeholder="type some email" />
<span>{{ errors[0] }}</span>
</div>
</ValidationProvider>