vue.js
nuxt.js
vue-scrollto

nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。

nuxt-linkでページ内スムーズスクロールするならvue-scrolltoが便利で気が利いていると思うので主力選手入り。

特徴としては、


  • 簡易的な設定でスタートできる

  • 地味にオプションが便利

  • SSR対応済み

の3本立て。ということで早速...


簡易な設定で動作確認


npmパッケージインストール

npm i vue-scrollto --save


plugins用ファイル作成

pluginsディレクトリ内に「vue-scrollto.js」ファイルを作成。とりあえず最低限のセッティングのみ。

また、easingは公式サイトのEasingの項を参照のこと。個人的には「ease-out」をキツめに設定するのが好き。


plugins/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
})


nuxt.config.jsから読み込み


nuxt.config.js

module.exports = {

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


動作テスト

v-scroll-to内のシングルクォーテーション「'」を忘れがちなので注意。

また、toは「空」でも「#」でもOKだけど「to自体を削除」するとエラー。


pages/index.vue

<template lang="pug">

.main
nuxt-link(v-scroll-to="'#anchor'" to) アンカーへリンク
a#anchor 到着!
</template>

<style scoped>
#anchor {
display: block;
margin-top: 200vh;
margin-bottom: 100vh;
}
</style>


pugじゃなくてhtmlで書いてももちろん動作。pugのほうが見やすい


pages/index.vue

<template>

<div class="main">
<nuxt-link
v-scroll-to="'#anchor'"
to> アンカーへリンク </nuxt-link>
<a id="anchor"> 到着! </a>
</div>
</template>

<style scoped>
#anchor {
display: block;
margin-top: 200vh;
margin-bottom: 100vh;
}
</style>



地味にオプションが便利

細かなオプション内容は公式サイトを参照のこと。とりあえず一つ試してみる。


スクロール完了時に飛び先のElementを取得。


pages/index.vue

<template lang="pug">

.main
nuxt-link(v-scroll-to="options" to) アンカーへリンク
a#anchor 到着!
</template>

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

<style scoped>
#anchor {
display: block;
margin-top: 200vh;
margin-bottom: 100vh;
}
</style>


コンソールに「到着」エレメントが表示されました!Good!

image.png


SSRに対応済み

だから、nuxt.jsでプラグイン利用時にありがちな、{ src: '~plugins/xxx.js', ssr: false }とか、no-ssrなどのつけ忘れでエラーがでるなとかなし!cool!


有名所のvue用プラグインも、だいぶSSR対応がすすんできた。嬉しい。


Link

以下、公開中のnuxt.js(v2)関連の記事一覧


技術よりの記事


  1. nuxt.js(v2)のインストール〜ESLint設定まで

  2. nuxt.js(v2)の作業ディレクトリを整理

  3. nuxt.js(v2)のベースURLをターミナルからコントロール

  4. nuxt.js(v2)でpug/stylusを利用する

  5. nuxt.js(v2)でIE11対応をする(CSS編)

  6. nuxt.js(v2)でIE11対応をする(JS編)


  7. nuxt.js(v2)で絶対パス(https~)を取得する方法

  8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい

  9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす


よく使うプラグインのお話


  1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。

  2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。

  3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!


まとめ系


  1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定

  2. nuxt.jsにおける「components」ディレクトリの規約(案)