ランディングページ等によくあるメニューをクリックしたら任意の場所まで移動するスムーススクロールを導入する手順をご紹介します。

vue-scrolltoをインストール

まずは、インストールから行います。

yarn add vue-scrollto

pluginsにファイルを新規作成

plugins/vue-scrollto.jsを作成します。

作成したら下記の様に記述を追加します。

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
 duration: 300,
 easing: [0, 0, 0.2, 1],
 offset: -150,
})

Vue.use内を説明すると、
duration = 移動時間
easing = 緩急
offset = 移動後の位置調節

nuxt.config.jsに記述を追加

プラグインを登録します。

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

導入は以上で終了になります。

使い方

下記の様に少し見慣れない書き方ですが、このように記述します。
<nuxt-link v-scroll-to="" to>

<template>
<ul class="ulBody">
  <li v-for="(list,index) in lists" :key="list.id">
    <nuxt-link  v-scroll-to="`#${list.link}`" to>{{ list.name }}</nuxt-link>
  </li>
</ul>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        {
          id:'01',
          name: 'hoge01',
          link: 'hoge01',
        },
        {
          id:'02',
          name: 'hoge02',
          link: 'hoge02',
        },
        {
          id:'03',
          name: 'hoge03',
          link: 'hoge03',
        },
      ],
    }
  },
}
</script>

飛び先はいつも通りidを指定すれば完了です。

<template>
 <section>
  <div id="hoge01"></div>
  <div id="hoge02"></div>
  <div id="hoge03"></div>
</section>
</template>