typescript nuxtjs 中使用 vee-valid

1 创建 plugins/veeValidate.ts

import Vue from 'vue';
import {
  ValidationProvider, configure, localize, extend,
} from 'vee-validate';
import zh from 'vee-validate/dist/locale/zh_CN.json';
import {
  required, max, email,
} from 'vee-validate/dist/rules';

Vue.component('ValidationProvider', ValidationProvider);

// 一些需要的规则
extend('required', { ...required });
extend('max', { ...max });
extend('email', { ...email });

// 所有规则
// import * as rules from 'vee-validate/dist/rules';
// for (let rule in rules) {
//   extend(rule, rules[rule]);
// }

localize('zh_CN', zh);

2 添加插件到 nuxt.config.js

  plugins: [
    {src: '~/plugins/veeValidate.ts', ssr: true},
  ],

3 引入规则到 Nuxt.js 中

默认情况下Nuxt会忽略node_modules文件夹的转换，因为rules.js是一个ES6导出。所以需要将 vee-validate/dist/rules添加到将要转换的源列表中。否则，
会报 "Unexpected Token: export" errors. 错误 。

在你的nuxt.config.js中添加以下代码行:

build: {
  // Add exception
  transpile: [
    "vee-validate/dist/rules"
  ],
  /*
    ** You can extend webpack config here
    */
  extend(config, ctx) {
    // ...
  }
}

3 模块中使用

<template>
  <validation-provider
    ref="messageForm"
    v-slot="{ errors }"
    rules="required|max:400"
    name="必填内容"
  >
    <input
      v-model="message"
      type="text"
    />
    <span v-if="errors.length" v-for="(error, i) in errors" :key="`errors${i}`">
        {{ error }}
    </span>
  </validation-provider>
</template>

<script lang="ts">
  import {Component, Vue} from 'nuxt-property-decorator'
  import { ValidationProvider } from 'vee-validate';
  @Component({
    components: {
      ValidationProvider
    }
  })
  export default class VeeTest extends Vue {
  }
</script>

一些错误说明：

Uncaught (in promise) Error: No such validator 'max' exists.

由于 vee-validate3 默认是导入验证规则的，所以首先需要把要用到的规则导入。

import zh from 'vee-validate/dist/locale/zh_CN.json'; 模块找不到错误

检查 tsconfig.json 添加 "resolveJsonModule": true,