Nuxt Validate

Nuxt.js module for validations using Vee-Validate

Install

1npm i --save nuxt-validate

Usage

Add module to nuxt.config.js

1module.exports = {
2  modules: [
3    ...
4    ['nuxt-validate', {
5      lang: 'es',
6      nuxti18n: {
7        locale: {
8          'zh-CN': 'zh_CN'
9        }
10      }
11      ...
12      // regular vee-validate options
13      // https://github.com/logaretm/vee-validate/blob/master/docs/configuration.md
14    }]
15  ]
16}

Using top level options

1module.exports = {
2  modules: [
3    'nuxt-validate'
4  ],
5  nuxtValidate: {
6    lang: 'es',
7    nuxti18n: {
8      locale: {
9        'zh-CN': 'zh_CN'
10      }
11    }
12  }
13}

Configuration

lang

• Default: undefined

The lang option accepts the name file placed on the locale dir of Vee-Validate repository without the extension.

rules

• Default: undefined

If undefined, importing all rules. When listed from validation-rules, importing it.

1nuxti18n: {
2  rules: ['alpha_dash', 'min']
3}

nuxti18n

• Default: undefined

When nuxti18n option is set as a true, Vee-Validate's locale changes with nuxt-i18n's locale.
If nuxt-i18n's locale and Vee-Validate's locale are different, set locale object to convert locale code.

1nuxti18n: {
2  locale: {
3    // nuxt-i18n's locale: Vee-Validate's locale
4    'zh-cn': 'zh_CN',
5    'zh-tw': 'zh_TW'
6  }
7}

:warning: notice: If you use nuxt-i18n module, declare the nuxt-validate module at before it.

Documentation

Read the official Vee-Validate documentation and demos.

FAQ

How to add custom validation methods?

We recommend using plugins.

nuxt.config.js

1module.exports = {
2  plugins: ["~plugins/validate.js"],
3}

plugins/validate.js

1import { extend } from "vee-validate";
2
3extend("my-validation", {
4  message: "This {_field_} is invalid.",
5  validate: value => {
6    // ...
7    return true;
8  }
9});