くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > TypeScriptなNuxt.jsでVeeValidateを使ってみる

TypeScriptなNuxt.jsでVeeValidateを使ってみる

Nuxt.js Vue.js Validate

フォームのバリデーションのため、VeeValidateを使ってみたときの備忘録
Nuxt.jsのコンポーネントで使う場合は、ちょっとめんどくさかった。。

フォームのバリデーションライブラリはいろいろある

Vue公式ガイドでは、以下の2つが紹介されてた。

  1. Vuelidate
  2. VeeValidate

Vuelidateはdata()にルールを書くっぽく、VeeValidateはtemplateに書くようで、
個人的には、templateに書きたいなと思ったので、VeeValidateを使ってみてる

VeeValidateのNuxtプラグインに、nuxt-validateもあったけど、
今回は使わず自分でインストールしてみた

インストール

$ npm install --save vee-validate

pluginsファイルを作る

plugins/vee-validate.tsを以下の内容で作成

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

// ※Nuxtの場合はメモリリークの懸念があるので、injectをfalseにするのがよい
Vue.use(VeeValidate, { inject: false });
// エラーメッセージの表示言語をjaにするため、localeを設定
Validator.localize("ja", ja);

nuxt.config.tsに設定

const config: NuxtConfiguration = {
  // ...略
  plugins: ["~/plugins/vee-validate"],
  // ...略
}

SCFでVeeValidateを使う

plugins/vee-validate.tsでinjectを無効にしたので、
自分でInjectする必要がある。

具体的には、Component({ inject: ["$validator"] })を記載。

<template>
  <div>
    <div>
      <input
        name="emailField"
        :class="{'is-danger': errors.has('emailField')}"
        type="text"
        v-validate="'required|email'"
        v-model="text"
      >
    </div>
    <!-- バリデーションエラーが有る場合、メッセージを表示 -->
    <!-- inputのnameを指定すると、そのフィールドのエラーだけに絞り込み -->
    <p>{{ errors.first('emailField') }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

// ※indjectの設定が必要！！
@Component({ inject: ["$validator"] })
export default class EmailForm extends Vue {
  text: string = ""
}
</script>
  • バリデーションエラーはerrorsに格納されている
  • エラー有無の判定は、errors.has('fieldName')
  • エラーメッセージの取得は、errors.first('fieldName')
  • バリデーションルールは、inputのv-validate="'required|email'"で設定

以上！！

国際化とかの場合は、こっちもみるといいかも

- Nuxt.js + nuxt-i18n + VeeValidate する - Qiita

参考にしたサイト様