I recently set up vee-validate v3.0 for validation in my project and everything was going smoothly until I tried to style my elements. Despite following the documentation on styling and making changes to the vee-validate config, I encountered a new issue - the v-slot had been replaced with classes. This confused me as the v-slot was already being used for error messages. Can I use multiple classes? Specifically, I want the input field to have the classes input.valid and input.invalid.
Form in Vue Register component
<ValidationProvider rules="required|min" v-slot="{ errors, classes }">
<input
v-model="form.username"
type="text"
id="username"
class="fadeIn second"
:class="classes"
name="login"
placeholder="username"
/>
<span class="form-error">{{ errors[0] }}</span>
</ValidationProvider>
Style in Vue Register component
<style>
input.invalid {
color: red;
}
input.valid {
color: green;
}
</style>
Config
import { configure } from "vee-validate";
configure({
classes: {
valid: "is-valid",
invalid: "is-invalid"
}
});