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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<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>

そうすると、以下の画像のようなエラーが出ました。

インターフェイスのWithRouteの$routeが実装されてません

結論から申すと、下記のコマンドで解決しました。

1

$ yarn add vue-router

なんでこれをインストールするのか、そもそもなんでインストールされてなかったのかというと、 vue-router は nuxt をインストールする際に入るので、わざわざインストールする必要はなかったのですが、 package.json 内に記述があることで、 this.$route がIntelliJ上で参照できるようになるみたいです。