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!
SSRに対応済み
だから、nuxt.jsでプラグイン利用時にありがちな、｛ src: '~plugins/xxx.js', ssr: false ｝とか、no-ssrなどのつけ忘れでエラーがでるなとかなし！cool!
有名所のvue用プラグインも、だいぶSSR対応がすすんできた。嬉しい。
Link
以下、公開中のnuxt.js(v2)関連の記事一覧
技術よりの記事
- nuxt.js(v2)のインストール〜ESLint設定まで
- nuxt.js(v2)の作業ディレクトリを整理
- nuxt.js(v2)のベースURLをターミナルからコントロール
- nuxt.js(v2)でpug/stylusを利用する
- nuxt.js(v2)でIE11対応をする（CSS編）
- nuxt.js(v2)でIE11対応をする（JS編）
- nuxt.js(v2)で絶対パス(https~)を取得する方法
- nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
- nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
よく使うプラグインのお話
- nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
- nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
- nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!