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

nuxt-linkでページ内スムーズスクロールするなら[vue-scrollto](https://rigor789.github.io/vue-scrollto/#/)が便利で気が利いている~~と思う~~ので主力選手入り。

特徴としては、

- 簡易的な設定でスタートできる
- 地味にオプションが便利
- SSR対応済み

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

## 簡易な設定で動作確認

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

```terminal
npm i vue-scrollto --save
```

### plugins用ファイル作成

pluginsディレクトリ内に「vue-scrollto.js」ファイルを作成。とりあえず最低限のセッティングのみ。
また、easingは[公式サイトのEasingの項](https://rigor789.github.io/vue-scrollto/#/docs?id=easing-detailed)を参照のこと。個人的には「ease-out」をキツめに設定するのが好き。

```javascript: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から読み込み

```javascript:nuxt.config.js
module.exports = {
  plugins: [
    '~/plugins/vue-scrollto',
  ],
  ...
}
```

### 動作テスト

v-scroll-to内のシングルクォーテーション「'」を忘れがちなので注意。
また、toは「空」でも「#」でもOKだけど「to自体を削除」するとエラー。

```vue: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のほうが見やすい~~

```vue: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>
```

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

細かなオプション内容は[公式サイト](https://rigor789.github.io/vue-scrollto/#/docs?id=easing-detailed)を参照のこと。とりあえず一つ試してみる。

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

```vue: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](https://qiita-image-store.s3.amazonaws.com/0/217743/c263937d-cd37-aeeb-ef79-805e7ce663b6.png)


## SSRに対応済み

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


---

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

# Link

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

## 技術よりの記事

0. [nuxt.js(v2)のインストール〜ESLint設定まで](https://qiita.com/amishiro/items/9cd8007d46f91c8b5da2)
0. [nuxt.js(v2)の作業ディレクトリを整理](https://qiita.com/amishiro/items/9c31a3a9424de27efe28)
0. [nuxt.js(v2)のベースURLをターミナルからコントロール](https://qiita.com/amishiro/items/7c7af250368083216d8e)
0. [nuxt.js(v2)でpug/stylusを利用する](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)
0. [nuxt.js(v2)でIE11対応をする（CSS編）](https://qiita.com/amishiro/items/84b14108c749a0a0c966)
0. [nuxt.js(v2)でIE11対応をする（JS編）](https://qiita.com/amishiro/items/db37c6a56ddf7e214144)
0. [nuxt.js(v2)で絶対パス(https~)を取得する方法](https://qiita.com/amishiro/items/9d7ca6b239f604a40424) 
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい](https://qiita.com/amishiro/items/b7260116b282d2cf2756)
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす](https://qiita.com/amishiro/items/77e3c2546fa63cc69a62)

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

0. [nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。](https://qiita.com/amishiro/items/f2e302fedf03c3d0f79e)
0. [nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。](https://qiita.com/amishiro/items/f70aca4797cd57bc51b5)
0. [nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!](https://qiita.com/amishiro/items/ccca406a9bda1863ab01)

## まとめ系

0. [nuxt.js(v2)でgenerate納品する前にやっておきたい設定](https://qiita.com/amishiro/items/11bd642728f6b5838189)
0. [nuxt.jsにおける「components」ディレクトリの規約（案）](https://qiita.com/amishiro/items/c7493f5e9375a0609bdc)