環境

Nuxt.js v2.x
Vuejs v2.x
VeeValidate v3

概要

Nuxt.js環境下でフォームを作成していたとき、入力値のバリデーションを簡単にしたかった。

今回はVeeValidateを使ってバリデーションをしてみる

VeeValidate

f:id:thr3a:20201123174136p:plain

インストール、初期設定

いつものインストール

yarn add vee-validate

plugins/vee-validate.js を新規作成して以下

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, extend, localize } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import ja from 'vee-validate/dist/locale/ja.json'

// import all rules
Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]) // eslint-disable-line
})

localize('ja', ja)

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)

作ったファイルをロードさせるために nuxt.config.js に以下追記

  plugins: [
    '@plugins/vee-validate'
  ],

同じくnuxt.config.jsに以下も追記

build: {
  transpile: [
    'vee-validate/dist/rules'
  ]
},

これはvee-validateをNuxtjsで使う上で必要な設定。公式ドキュメントいわく、Nuxtjsはデフォルトでnode_modulesの中身をトランスパイルをしない。が、rulesはトランスパイル対象にしないと "Unexpected Token: export" になってしまう。よって、明示的に指定してあげる必要がある。

By default Nuxt ignores transpilation of the node_modules folder, and since the rules.js is an ES6 export.
You should add vee-validate/dist/rules to the list of sources that will be transpiled. Otherwise you might run into "Unexpected Token: export" errors.

使ってみる

こんな感じ

<template>
  <div>
    <h1>
      基本
    </h1>
    <ValidationObserver ref="myform">
      <validation-provider v-slot="{ errors }" rules="email|required">
        <input v-model="email" name="email" type="text">
        <span>{{ errors[0] }}</span>
      </validation-provider>
    </ValidationObserver>
    <MyFooter />
  </div>
</template>

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