Nuxt.jsでVeeValidateを使ってみる

Nuxt.jsでVeeValidateを使う際に少し詰まる点があったので、設定方法をメモしておきます。

設定方法

Nuxt.jsの環境準備後、VeeValidateをインストールします。

npm install vee-validate --save

pluginsディレクトリにvee-validate.jsを作成します。

import Vue from 'vue'
import { ValidationProvider, extend } from 'vee-validate'

// バリデーションルールを追加
extend('test', {
  validate: value => value === 'test',
  message: 'test 以外の入力はエラーになります。'
});

Vue.component('ValidationProvider', ValidationProvider);

nuxt.config.jsのpluginsプロパティにファイルパスを追加します。

export default {
  plugins: [
    '@/plugins/vee-validate'
  ]
}

これで設定が一通り完了したので、実際に試してみます。

<template>
  <ValidationProvider rules="test" v-slot="{ errors }">
    <input v-model="email" type="email" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  }
}
</script>

これで「test」以外を入力した場合はエラーが表示されるように設定できました。

次にライブラリ側で用意されているルールを使ってみます。
plugins/vee-validate.jsを以下に変更します。

import Vue from 'vue'
import { ValidationProvider, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules';

extend('required', required);
extend('email', email);

Vue.component('ValidationProvider', ValidationProvider);

requiredとemailのルールを追加しました。

上記で指定したrules.jsはNuxt.jsでトランスパイル対象になっていないため、nuxt.config.jsのtranspileのリストにrules.jsのパスを追加する必要があります。

export default {
  plugins: [
    '@/plugins/vee-validate'
  ],
  build: {
    transpile: [
      "vee-validate/dist/rules"
    ]
  }
}

最後に、今回追加したrequiredとemailのルールを設定します。

<template>
  <ValidationProvider name="mail" rules="required|email" v-slot="{ errors }">
    <input v-model="email" type="email" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  }
}
</script>

これでライブラリ側で用意されたルールでバリデーションされるように設定できました。

最後に日本語対応を行ってみます。
plugins/vee-validate.jsを以下に変更します。

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

localize('ja', ja);

extend('required', required);
extend('email', email);

Vue.component('ValidationProvider', ValidationProvider);

これで日本語のエラーメッセージが表示されるようになりました。