Nuxt 3 を利用していると、useRoute() を呼び出した際に Cannot read properties of null (reading 'useRoute') エラーが発生することがあります。特に SSR（Server-Side Rendering）のタイミングで useRoute() を参照してしまうと、このエラーが出やすいです。初心者が最初につまずきやすいポイントの一つでもあります。
本記事では、筆者が遭遇したこのエラーについて 原因と解決策 を整理し、実際のコード例とともに紹介します。SSR とクライアントの違いを意識して開発する上での備忘録として参考になれば幸いです。
1. エラーの発生背景
Nuxt 3 は SSR を前提としたフレームワークです。サーバサイドでコンポーネントをレンダリングする際には、まだ ブラウザ固有のオブジェクトやルーティングの状態が存在しません。そのため、useRoute() をサーバ側で直接呼び出すと、null 参照エラー が発生します。
図解（概念図）:
SSR レンダリング
└─ useRoute() → null（まだルート情報がない）
CSR（ブラウザ描画後）
└─ useRoute() → 正常にルート情報を取得
2. よくある間違いの例
以下は典型的なエラーを引き起こすコードです。
<script setup>
const route = useRoute();
console.log(route.fullPath);
</script>
このように setup 関数のトップレベルで直接 useRoute() を呼び出す と、SSR タイミングで実行され、null 参照となってしまいます。
3. 解決方法1: onMounted を利用
SSR タイミングではなく、クライアントマウント後に実行することでエラーを回避できます。
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const route = useRoute();
console.log(route.fullPath);
});
</script>
これにより、useRoute() はブラウザ描画後に実行され、正常にルート情報を参照可能となります。
図解（処理の流れ）:
SSR → useRoute() 呼ばない
CSR → onMounted 内で useRoute() 呼び出し → OK
4. 解決方法2: クライアント限定の処理にする
Nuxt 3 では process.client を利用して、クライアント環境でのみ処理を走らせることができます。
<script setup>
if (process.client) {
const route = useRoute();
console.log(route.fullPath);
}
</script>
この方法でも SSR 中に useRoute() を呼び出すことはなくなり、エラーを防げます。ただし process.client を多用するとコードの可読性が低下するので、適切に使い分けることが大切です。
5. まとめ
useRoute() は便利ですが、SSR タイミングではルート情報が存在しないため直接呼び出すとエラーになります。解決策は以下の通りです。
onMountedを使い、クライアント描画後に呼び出すprocess.clientを利用し、クライアント限定で実行する
Nuxt 3 で SSR を扱う際には「どの処理がサーバ実行で、どの処理がクライアント実行か」を意識することが重要です。これを理解しておけば、同様のエラーを未然に防げます。
参考
- Nuxt 3 Documentation [https://nuxt.com/docs]
- Vue Router Documentation [https://router.vuejs.org/]
