vue-scrollto は、ある要素へのスクロールを簡単に実装できます。
今回は、Nuxt.jsでの実装例を紹介したいと思います。
以下に、gifを用意しました。ボタンを押すことでトップまで戻る機能を実装しています。

パッケージの導入方法
npmであれば、
1 |
$ npm install --save vue-scrollto |
yarnなら、
1 |
$ yarn add vue-scrollto |
で導入できます。
nuxt.config.js の設定
pluginsの値に"@/plugins/scrollto.js"
を追加します。
1 2 3 4 5 6 7 8 |
export default { mode: 'universal', (省略) plugins: [ "@/plugins/scrollto.js" ], (省略) } |
プラグインファイルを新規作成
pluginsディレクトリの配下に新規でscrollto.jsのファイルを作成します。
内容は以下です。
1 2 3 4 |
import Vue from 'vue' import VueScrollTo from 'vue-scrollto' Vue.use(VueScrollTo) |
Vue.use()をメソッド使うことで、Vue.jsのプラグインをグローバルに使用することができるようになります。