Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
42
Help us understand the problem. What is going on with this article?
@amishiro

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」ディレクトリの規約(案)
42
Help us understand the problem. What is going on with this article?
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
amishiro
5年近く作っていた自作テンプレートから離れて、最近はnuxtで開発してる。フロントエンドの未来は明るい。寂しいのでフォロープリーズ。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
42
Help us understand the problem. What is going on with this article?