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で処理してしまいました。
きっと、もっと良いやり方があると思うので、ここは引き続き調査します。