【Nuxt.js 実装例有り】vue-scrolltoの利用方法

Vue.js

vue-scrollto は、ある要素へのスクロールを簡単に実装できます。

今回は、Nuxt.jsでの実装例を紹介したいと思います。

以下に、gifを用意しました。ボタンを押すことでトップまで戻る機能を実装しています。

パッケージの導入方法

npmであれば、

yarnなら、

で導入できます。

nuxt.config.js の設定

pluginsの値に"@/plugins/scrollto.js"を追加します。

プラグインファイルを新規作成

pluginsディレクトリの配下に新規でscrollto.jsのファイルを作成します。

内容は以下です。

Vue.use()をメソッド使うことで、Vue.jsのプラグインをグローバルに使用することができるようになります。

参考