Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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」ディレクトリの規約(案)
amishiro
5年近く作っていた自作テンプレートから離れて、最近はnuxtで開発してる。フロントエンドの未来は明るい。寂しいのでフォロープリーズ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした