@mole-inc/nuxt-validate

Nuxt Validate

This is a fork of lewyuburi/nuxt-validate.
If you use VeeValidate 2, can you consider to use nuxt-validate.

Nuxt.js module for validations using VeeValidate 3

Install

Use npm

npm i vee-validate -S
npm i @mole-inc/nuxt-validate -D

or yarn

yarn add vee-validate
yarn add @mole-inc/nuxt-validate --dev

Usage

Add module to nuxt.config.js

module.exports = {
  buildModules: [
    ...
    ['nuxt-validate', {
      lang: 'es',
      nuxti18n: {
        locale: {
          'zh-CN': 'zh_CN'
        }
      }
      ...
      // regular vee-validate options
      // https://github.com/logaretm/vee-validate/blob/master/docs/configuration.md
    }]
  ]
}

Using top level options

module.exports = {
  buildModules: [
    'nuxt-validate'
  ],
  nuxtValidate: {
    lang: 'es',
    nuxti18n: {
      locale: {
        'zh-CN': 'zh_CN'
      }
    }
  }
}

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.

nuxti18n: {
  rules: ['alpha_dash', 'min']
}

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.

nuxti18n: {
  locale: {
    // nuxt-i18n's locale: Vee-Validate's locale
    'zh-cn': 'zh_CN',
    'zh-tw': 'zh_TW'
  }
}

⚠️ 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

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

plugins/validate.js

import { extend } from "vee-validate";

extend("my-validation", {
  message: "This {_field_} is invalid.",
  validate: value => {
    // ...
    return true;
  }
});