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

10656 ワード
コンポーネント nuxt.js JavaScript Vue.js JavaScript テキストリンク

vue-scrolltoとは

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

比較: vue-scrollto未使用

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

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

比較: vue-scrollto使用

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

step1: インストール

ターミナル
$ npm i vue-scrollto
file
pages/
--| sample.vue

plugins/
--| vue-scrollto.js

nuxt.config.js

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

【vue-scrollto.js】
・Nuxt.jsでpluginを使用時の書き方
https://ja.nuxtjs.org/api/configuration-plugins/

・オプションは公式の
　Options項目で確認できます。

　duration: スクロール継続時間
　easing: 速度の緩急
　offset: 遷移後の位置調整
　　　　 少しだけ上に設定すると⭕️

easingに関してはここが参考になります！
https://note.com/ritar/n/n5e8ed0e07917

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

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

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

nuxt.config.js
plugins: [
  '~plugins/vue-scrollto'
],

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

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

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

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

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

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

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

これで完成です🤗🎉

ローカルver

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

sample.vue
<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>

今まで週3で投稿していましたが
来週から月水の2回に変更致します💡
自社サービスに手をつけているためです。
お楽しみに🌟

落ち着いたらまた週3になるかも？