【Nuxt.js】plugin実践編：vue-scrolltoでスムーズにスクロール

前置き

今回はvue-scrollto
ページ内リンク(アンカーリンク)で
スクロールしながら指定場所に飛べます🧚‍♀️💫
【公式】
https://www.npmjs.com/package/vue-scrollto

比較: vue-scrollto未使用

味気ない🌀
nuxt-linkを使うと1回しか機能しない
a hrefでやれば解決するけど…
どうせならnuxt-link使いたいじゃない！

) pages

<template>
 <div class="page">
   <nuxt-link to="#anchor">
     下に飛ぶ
   </nuxt-link>
   <div id="anchor">
     とべた！
   </div>
 </div>
</template>

<nuxt-link to="#anchor">

下に飛ぶ

</nuxt-link>

とべた！

</div>

</template>

比較: vue-scrollto使用

スクロールバーに着目👀
スルスルっとスクロール🍒
通常と違い、何回でもとべますね。
コードはstep順に記載していきます✍️

使い方(グローバルver)

step1: インストール

terminal

$ npm i vue-scrollto

step2: /pluginsにjsファイルを追加

step3: nuxt.config.jsのpluginsに記載

) file

plugins: [
  '~plugins/vue-scrollto'
],

plugins: [

'~plugins/vue-scrollto'

vue-scrollto.jsに記載したoptionsは
modulesに記載することもできます。
vue-scrollto公式のNuxt.js項目で確認できます。

ただvue-scrollto.jsに書いた方が
まとまって分かりやすいと思います💡

modules: [
   ['vue-scrollto/nuxt', { duration: 700 }],
],

modules: [

['vue-scrollto/nuxt', { duration: 700 }],

step4: テンプレートでページ内リンクを作成

・nuxt-link toの中にv-scroll-toを入れる
　toが2個あって変な感じがしますが
　どちらも必要なので削らないように✏️
・リンク先を''で囲む

) pages

<template>
 <div class="page">
   <nuxt-link
     v-scroll-to="'#anchor'"
     to
   >
     下にとぶ
   </nuxt-link>
   <div id="anchor">
     とべた！
   </div>
 </div>
</template>

<nuxt-link

v-scroll-to="'#anchor'"

下にとぶ

</nuxt-link>

とべた！

</div>

</template>

vue-scrollto公式の
Usage項目で確認できます。

これで完成です🤗🎉

使い方(ローカルver)

vue-scrollto.jsをまるごとコピペで⭕️
オプションもdata内に書けば適応されます。

) pages

<template>
 <div class="page">
   <nuxt-link
     v-scroll-to="'#anchor'"
     to
   >
     下にとぶ
   </nuxt-link>
   <div id="anchor">
     とべた！
   </div>
 </div>
</template>

<script>
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
 duration: 700,
 easing: [0, 0, 0.1, 1],
 offset: -100,
})

export default {
 data () {
   return {
     options: {
       el: '#anchor',
       onDone: (el) => console.log(el)
     }
   }
 }
}
</script>

<style lang="scss" scoped>
 #anchor {
   margin-top: 1000px;
 }
</style>

<nuxt-link

v-scroll-to="'#anchor'"

下にとぶ

</nuxt-link>

とべた！

</div>

</template>

import Vue from 'vue'

import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {

duration: 700,

easing: [0, 0, 0.1, 1],

offset: -100,

})

export default {

data () {

return {

options: {

el: '#anchor',

onDone: (el) => console.log(el)

}

</script>

#anchor {

margin-top: 1000px;

}

</style>