牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

Nuxt.js と vee-validate でエラーメッセージは日本語でバリデーションするメモ

前提

nuxt.js でプロジェクト作成済み前提 (nuxt2.0.0)

npm install する場合

$ npm install vee-validate -S

plugins/vee-validate.js

新規作成

import Vue from 'vue';
import VeeValidate, { Validator } from'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate);
Validator.localize('ja', ja);

nuxt.config.js

設定に追記

  plugins: [
    { src: '@/plugins/vee-validate', ssr: false },
  ],

pages/hoge.vue

一部抜粋

<template>

          <input
            v-validate="'required|alpha_dash'"
            v-model="user.name"
            name="name"
            type="text"
          >

        <button
          @click="saveData"
        >Save
        </button>

</template>

<script>
export default {

  methods: {
    updateUserData() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          alert('Saved.');
          return
        }

        alert('Error!!!');
      });
    },

}
</script>

CDN 使う場合(追記20181031)

plugins/vee-validate.js

新規作成

/*global VeeValidate*/
import Vue from 'vue';

Vue.use(VeeValidate, {locale: 'ja'});

nuxt.config.js

必要なリンクを下記からコピペして下記のように設定に追記

 head: {
    ...

    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/locale/ja.js' },
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js' },
    ],
  },

...

  plugins: [
    { src: '@/plugins/vee-validate', ssr: false },
  ],

参考リンク