VeeValidate 3.1 как добавить правила к внешнему файлу и к каждому компоненту

Создайте vee-validate.js файл:

import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";

// Install rules
extend("required", required);

Импортируйте этот файл в свой входной файл, обычно main.js, если вы используете vue-cli:

import Vue from 'vue';
import App from './App';
import './vee-validate';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

Или, если вы используете Nuxt.js, создайте plugins/vee-validate с тем же содержимым и добавьте его в массив nuxt.config.js плагинов.

Хорошо. если this.$validate выключен, мы не можем использовать this.$validate.$validatorAll(), что будет здесь идеальным решением. Потому что у меня что-то подобное работало в версии 2, но больше не работает.

 this.$validator
    .validateAll("scope")
    .then(result => {
      if (!result) {
        alert("error");
        return;
      }
      alert("success");
    })
    .catch(() => {});

Что ж, прочитав несколько вещей, мне удалось заставить это работать таким образом;

https://medium.com/javascript-in-plain-english/how-to-use-veevalidate-3-for-form-validation-bb18e9c3256c

1. В вашем файле загрузчика js или в файле плагина или, возможно, там, где вы запускаете свой javascript; Пример: index.js.

   import Vue from "vue";
   import { ValidationProvider } from "vee-validate";
   import { ValidationObserver } from "vee-validate";
   import * as VeeValidate from "vee-validate";
   
   // Now tell vue to use this plugin
   
   Vue.use(VeeValidate, { inject: false });
   Vue.component("ValidationProvider", ValidationProvider);
   Vue.component("ValidationObserver", ValidationObserver);
   

Примечание: для тех, кто использует nuxt.js. вы можете скопировать и вставить этот код в свой root directory, plugins/vee-validate.js. И откройте свой файл nuxt.config.js, который также находится в вашем root directory; и добавьте файл в свои плагины следующим образом:

   plugins: ["...some existing plugin", "@/plugins/vee-validate.js"],

2. В вашей форме это то, что вам нужно делать. Я использую BootstrapVue для своих форм, но это также применимо и к обычной форме начальной загрузки.

     <ValidationObserver ref="observer" v-slot="{ invalid }">
   
         <form class="pt-3" @submit.prevent="sendDataToServer">
           <ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
   
             <b-form-group  class="{'has-danger': errors[0]"} label="Enter your email" label-for="email" :invalid-feedback="validateFeedback">
              <b-form-input type="email" id="email" name="email" v-model="form.email" data-vv-scope
                aria-describedby="input-1-live-feedback" class="form-control form-control-lg" placeholder="Enter Email" trim required></b-form-input>
   
              <p class="invalid-form" id="input-1-live-feedback">{{ errors[0]}</p>
             </b-form-group>
   
         </ValidationProvider>
      </form>
   

3. Lastly in your computed and methods:

    computed: {
      validateFeedback() {
        Object.keys(rules).forEach(rule => {
          extend(rule, {
          ...rules[rule], // copies rule configuration
          message: messages[rule] // assign message
       });
     });
   }
   },
   
   methods: {
      /** Send login form data to server */
      sendDataToServer() {
         const isValideForm = this.$refs.observer.validate();
          if (!isValideForm) {
              return false;
          }
       console.log("working... ????");
      }
   }
   

Надеюсь, это кому-то поможет.