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

こにし じゅんぺい
Vue.js

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

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

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

パッケージの導入方法

npmであれば、

$ npm install --save vue-scrollto

yarnなら、

$ yarn add vue-scrollto

で導入できます。

nuxt.config.js の設定

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

export default {
  mode: 'universal',
  （省略）
  plugins: [
    "@/plugins/scrollto.js"
  ],
（省略）
}

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

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

内容は以下です。

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

Vue.use(VueScrollTo)

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

参考