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

Question

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

Answer 1

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

npm install --save vee-validate

将其添加到以下位置的“插件”部分nuxt.config.js：

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

将其添加到以下位置的“构建”部分nuxt.config.js：

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);