Nuxt3 + tailwindcssでナビゲーションアニメーションを実装

「ナビにあるリンクを押したらスクロールアニメーションと共にセクション先まで移動する動き」を実装したかったのですが、公式ドキュメントのサンプルが分かりづらくてちょっと時間取られたので、忘れないように記事にしました。（完全記録用です）

同じところで詰まってる人がいたら参考になれば幸いです。

このコードで思った動きになりました。

sample.vue

<template>
<nav>
  <ul>
    <li><a href="#first">first</a></li>
    <li><a href="#second">second</a></li>
    <li><a href="#thrid">thrid</a></li>
  </ul>
</nav>
<div class="scroll-smooth h-screen w-screen">
  <div id="first" class="h-screen w-screen">1</div>
  <div id="second" class="h-screen w-screen">2</div>
  <div id="thrid" class="h-screen w-screen">3</div>
</div>
</template>

scroll-smoothを書くだけで簡単に実現できました！