Vee-validate: Configuration options for CSS aren't applied to ValidationProvider inputs

[sts-ryan-holton]

Versions

• vee-validate: 3.0.11
• vue: 2.6.10

Describe the bug
When adjusting the configuration of Vee Validate in pure Vue JS via the src/main.js file, options aren't successfully added to the ValidationProvider component. As an example, I've attempted to change the CSS classes applied for this invalid and valid options, the classes aren't added.

To reproduce

1. Install Vue JS and add Vee Validate as a dependency.
2. Add the required configuration from https://logaretm.github.io/vee-validate/configuration.html#config
3. Add:

<ValidationProvider rules="alpha" v-slot="{ errors }">
  <input @change="generateSlug" v-model="post.title" name="title" type="text" placeholder="A super exciting blog post title" class="input">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

or something similar where inputs should get a class.

1. copy my main.js file:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import './registerServiceWorker'
import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';
import { configure } from 'vee-validate'
const config = {
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
};
// Sets the options.
configure(config);
import { extend } from 'vee-validate'
Vue.component('ValidationProvider', ValidationProvider);

Expected behavior
CSS classes should be added when an input is successful or invalid.

Demo link
n/a

Desktop (please complete the following information):

• OS: Macbook Pro, latest OS
• Browser Chrome
• Version latest

Smartphone (please complete the following information):
n/a

Additional context
documentation isn't very clear, and also found it difficult to find any examples

[codingride]

Have you looked into this example?
See if it solves your problem.
https://logaretm.github.io/vee-validate/guide/styling.html#classes

[logaretm]

VeeValidate does not add the classes automatically, you need to extract them from the slot and bind them to your input:

<ValidationProvider rules="alpha" v-slot="{ errors, classes }">
  <input @change="generateSlug" v-model="post.title" name="title" type="text" placeholder="A super exciting blog post title" class="input" :class="classses">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

And like @codingride mentioned it is documented here