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

Question

我现在正在尝试在 VueJS - Vuetify 项目上使用 Vee Validate 3.x。要么我误解了这一点，要么文档非常不准确......

这是我所拥有的

主文件

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?

任何帮助将不胜感激。