前提
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 }, ],