🛣️

Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング

2024/01/07に公開

2022年末に正式リリースされた Nuxt 3 ですが、数多くの強力な機能を備えており、リリース後にもマイナーバージョンアップを続けているため、意外と知られていない機能が眠っていたりします。

今回はその中でも、かなり多くの方がその恩恵を受けられるはずなのに、少し知名度の低い印象のある、Typed Pages 機能について紹介したいと思います。

Typed Pages とは

Typed Pages は、<NuxtLink> や useRoute() などの Vue Router を利用したルーティング管理において、指定したパスが実際に存在しているかどうかを厳格にチェックしてくれるようになる機能です。

Nuxt 3 で型安全なルーティングを実現する方法として、Nuxt Typed Router というモジュールもありますが、これとは別に、実は追加ライブラリを入れなくても Nuxt 自体がビルトインでこの Typed Router 機能をサポートしています。

ただし、条件としてバージョン 3.5 以上である必要があり、かつ Experimental 機能なので、以下のように Nuxt Config で有効化しないと使えません。

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    typedPages: true
  }
})

これ以外の設定は不要です。追加のライブラリのインストールをしなくても、Nuxt Config に記述を追加するだけで恩恵が受けられます。

この機能は unplugin-vue-router というVue Router 拡張ライブラリによって実現されています。Vue Router の作者である Posva 氏が開発しているプラグインなので、Experimental とはいえ十分安心して使える機能だと思います。

まずは最も一般的な使い方として、router.push() 、 <NuxtLink> （ <RouterLink>）、 navigateTo() といった、特定のページに遷移するリンクで、実際に存在するページのパスが補完されます。

これは $router.push() だけでなく、Template タグの <NuxtLink> 、さらには Options API やテンプレートタグ内で参照できる this.$router でも同じように型サポートを受けられます。

さらに、Typed Pages では動的ルーティングの値にアクセスする $route.params の型サポートを追加することができます。

[id].vue のような動的ルーティングを利用している場合に、 this.$route.params.id の id 部分にどんな文字列でも指定できてしまうことに不安を覚えたりタイポしてしまったりした経験があるかもしれません。

Typed Pages をオンにすればこのような悩みからは解放されます！

ただしこの設定に少し癖があり、 useRoute() の中に、今いるページパスを記述する必要があります。 useRoute("user_id-posts-post_id") などです。

自動でないのは少し不便ですが、この useRoute で選択できるパス自体が上記の router.push() と同じ自動補完を備えているため、実際に使っている中でページを探しづらいということはあまりないと思います。

このようにしてアクセスすると、$route.params のオブジェクト内のプロパティが、実際にパス上で動的に指定されているキー以外はエラーになります。

もちろん、パスの一部を動的にしている user-[user_id].vue のような指定でも正しく対応しています。

また、パスがない場合にもアクセス可能にする [[slug]].vue という指定もできますが、この場合はちゃんと string | undefined | null 型を補完してくれます。

個人的には Nuxt 3.5 以上であれば Typed Pages をオンにしない理由があまりないと思っています。ぜひ試してみてください！