Skip to content

Vue + Nuxt + TypeScriptでIntelliJ開発環境でimplementsのエラー解消方法

タイトルがわかりにくくて申し訳ないんですが、エディターがIntelliJで、Vue, NuxtをTypeScriptでコーディングする環境の際、 vue-class-component のNuxt版、 nuxt-class-component を使えばNuxtでTypeScriptでコーディングできるんですが、メソッド内で this.$route を参照する際に下記のように implements をつけます。
<script lang="ts">
  import Vue from 'vue';
  import {Route} from 'vue-router';
  import Component from 'nuxt-class-component';

  interface WithRoute
  {
    $route: Route;
  }

  @Component
  export default class Index extends Vue implements WithRoute
  {
    created()
    {
      console.log(this.$route.params);
    }
  }
</script>
そうすると、以下の画像のようなエラーが出ました。 image
インターフェイスのWithRouteの$routeが実装されてません
結論から申すと、下記のコマンドで解決しました。
$ yarn add vue-router
なんでこれをインストールするのか、そもそもなんでインストールされてなかったのかというと、 vue-routernuxt をインストールする際に入るので、わざわざインストールする必要はなかったのですが、 package.json 内に記述があることで、 this.$route がIntelliJ上で参照できるようになるみたいです。
[`evernote` not found]
Pocket

Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です