VueJS和Vuetify项目上的Vee-Validate 3.x

Question

我现在尝试在VueJS-Vuetify项目上使用Vee Validate3.x。 要么我误解了，要么文档太不准确了……

这就是我所拥有的

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from './routes';
import {ValidationProvider} from 'vee-validate';
import i18n from './i18n';
import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';


// Register it globally
Vue.component('ValidationProvider', ValidationProvider);
// Add the required rule
extend('required', {
  ...required,
  message: 'This field is required'
});

Vue.config.productionTip = false;
new Vue({
  vuetify,
  router: VueRouter,
  i18n,
  render: h => h(App)
}).$mount('#app')

某些组件

    <ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
    <v-text-field
      v-model="lineItem.name"
      @input="$emit('update:lineItem', $event)"
      required
    />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

我一直以Unknown custom element: <ValidationProvider> - did you register the component correctly?结尾

任何帮助将不胜感激。