如何在 nuxt 中安装和配置 vee-validate (v4)？

Question

我很难理解将这个很棒的插件安装到 nuxt 的文档。据我所知，我很难相信，您必须将所有规则导出到一个插件文件中。我尝试导出一些规则，但是nuxt不知道ValidationObserver组件是什么

Answer 1

VeeValidate v4 与 Vue 2.x 不兼容，这意味着它不能与 Nuxt 一起使用 2.x，因为 vee-validate (v4) 仅针对 Vue 3 支持。

一般来说，使用 vee-validate v3，您确实需要在插件文件中注册您的规则，并全局注册 validation-observer 和 validation-provider 或在需要时导入它们。

Answer 2

我通过执行以下操作将 vee-validate v3 安装到 Nuxt 中：

npm install --save vee-validate

将此添加到 nuxt.config.js 中的 'plugins' 部分：

plugins: [
    { src: '~/plugins/vee-validate.js', ssr: true },
],

将此添加到 nuxt.config.js 中的 'build' 部分：

build: {
    transpile: ['vee-validate']
}

需要转译部分来消除关于 Unexpected token 'export' 的错误。它做了一些与 ES6 和 Babel 相关的事情，以便在将库加载到 Nuxt 之前预编译库。

这是我的 vee-validate.js 文件在插件目录中的样子：

import { extend, localize } from "vee-validate";
import { required, email, min } from "vee-validate/dist/rules";

const dictionary = {
    en: {
        messages: {
            required: () => '* Required',
        },
    },
};

// Install required rule.
extend("required", required);

// Install email rule.
extend("email", email);

// Install min rule.
extend("min", min);

localize(dictionary);

如何在 nuxt 中安装和配置 vee-validate (v4)？

How to install and configure vee-validate (v4) in nuxt?

nuxt.js

vee-validate