Nuxt(Vue) + TypeScript で vuelidateの導入でハマった件

はじめに

最近Nuxtを始めました。業務でAngularを使用していたので、TypeScriptは使っていきたいのですが、Nuxt + TypeScript ってなかなか苦慮する点が多いですね。今回はvuelidateを導入する際にハマったエラーの解消法を書きます。

問題のあらまし

デザインフレームワークとして、Vuetifyを使用しています。 Vuetify の form は vuelidate でバリデートできるので、 vuelidate を導入使用としましたが、テンプレート、スクリプトタグの中で、$v が空っぽになるバグに遭遇し、解消に時間がかかりました。

導入方法

インストール

yarn add vuelidate

プラグインを作成

@/plugins/vuelidate.js

import Vue from 'vue';
import Vuelidate from 'vuelidate';

Vue.use(Vuelidate);

設定も変更

nuxt.condig.js

plugins:        [
    '@/plugins/vuetify.js',
    { src: '~/plugins/vuelidate' }
  ],

componentの記述

(バグ解決済み)

<template>
  <form>
    <v-text-field
            v-model="name"
            :error-messages="nameErrors"
            :counter="10"
            label="Name"
            required
            @input="$v.name.$touch()"
            @blur="$v.name.$touch()"
    ></v-text-field>

    <v-btn @click="submit">submit</v-btn>
    <v-btn @click="clear">clear</v-btn>
  </form>
</template>

<script lang="ts">
  import { Component, Vue } from "nuxt-property-decorator";
  import { required } from "vuelidate/lib/validators";

  @Component( {
    validations: {
      name: { required }
    }
  } )

  export default class Spread extends Vue {
    name: string = "";

    get nameErrors() {
      const errors = [];
      !(this as any).$v.name.required && errors.push( "名前な必須です。" );
      return errors;
    };
  }
</script>

解決方法

私の場合、\$v の undefined になっていた原因は validations をクラス宣言の中に書いていました。しかしながら、$v は ts に対応していないので、@component にjsと同じように記述する必要がありました。

結論

そもそもTypeScriptにする時の正しいポイントを理解していないのが原因でした。しかしながら、正しい記述方法がまとまった情報がなかなか見つかりませんでした。今回の結論は Nuxt + TypeScript を始める時は参考に記載する記事を一読してから始めるべきだったということです。（そのためにかなり遠回りしてしました。。。）

参考