vue-scrolltoでページ内移動をさせる

　<router-link>で外部リンクを書くと上手くいかないのでaタグ使ってたけど、ページ内リンクも上手くいかなかったのでなんか追加した。てか、そろそろ本気でNuxtに移行しないと面倒なんじゃないかって思ってきた。環境はここに書いてあります。

実際に書いたコード

SHELL:

$ npm install vue-scrollto
+ vue-scrollto@2.20.0

main.js:

...>8.cut...
import VueScrollTo from "vue-scrollto"

createApp(App).use(router).use(VueGtag, { property: { id: 'UA-XXXXXXX-X', router } }).use(ScrollTo, { offset: -40 }).mount('#app')

views/foo.vue:

<a v-scroll-to="'#bar'">move!</a>

<h2 id="bar">BARBAR-Bar</h2>

　offset: -40をつけてちょっと上に余白を持たせて移動させるといい感じ。

参考文献

vue-scrollto： https://www.npmjs.com/package/vue-scrollto