TypeSctiptで開発しているNuxtプロジェクトにvue-scrolltoを導入する 💻

Nuxt.jsを使ったプロジェクトでページ内スクロールを実装する際は、vue-scrolltoを使うと楽々です。
楽々なんですが、開発にTypeScriptを使っていると、導入までの手順が増えるので、今回はそこをまとめようと思います。

vue-scroll導入手順

❶ nuxt.config.jsを編集

modules: [
  'vue-scrollto/nuxt'
],

modulesに追加します。
この手順はJavaScriptで開発していても発生します。

❷ plugins/vue-scrollto.ts を追加

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';

Vue.use(VueScrollTo);

追加します。

❸ 型を定義する

declare module 'vue/types/vue' {
  interface Vue {
    $scrollTo: any
  }
}

これで、scriptからも、

this.$scrollTo('#hoge');

のような感じで使えるようになります。

本当はanyじゃない方が良いのは火を見るより明らかなのですが、手っ取り早くコンパイルできるようにするために、anyで処理してしまいました。
きっと、もっと良いやり方があると思うので、ここは引き続き調査します。