NuxtのsetPageLayoutとは？動的レイアウト切り替えのメリット

NuxtでWebアプリケーションを開発する際、ページごとに異なるレイアウトを使い分けたいケースは多くあります。例えば、管理画面はサイドバー付きのレイアウト、公開ページはシンプルなヘッダーのみのレイアウトにしたい、といった要望です。

通常、ページ単位でレイアウトを指定するにはページコンポーネントのlayoutオプションを使いますが、これだけでは動的に切り替えたい場合に柔軟性が不足します。そこで役立つのがsetPageLayoutです。

setPageLayoutを使うと、ルートミドルウェアやプラグインなどから現在のページのレイアウトを動的に変更できます。これにより、ユーザーの状態やルートパラメータに応じてレイアウトを切り替えられ、よりリッチで柔軟なUI設計が可能になります。

まず結論：setPageLayoutのポイント

• setPageLayoutは現在表示中のページのレイアウトを動的に変更できる関数
• Nuxtコンテキスト内（ミドルウェア、プラグイン、setup関数など）でのみ呼び出せる
• レイアウト名は文字列で指定し、layouts/ディレクトリ内のファイル名と対応
• サーバーサイドレンダリング時はレンダリング前に設定しないとHydrationエラーの原因になる
• 動的なレイアウト切り替えにより、ユーザー体験や管理の柔軟性が向上する

いつ使うべき？使わない方がよいケースは？

使うべきケース

• ユーザーの認証状態や権限に応じてレイアウトを切り替えたいとき
• URLパラメータやクエリによって表示レイアウトを変えたいとき
• ページ遷移時に共通のミドルウェアでレイアウトを制御したいとき
• SPA的な動的UIで、ページコンポーネントのlayoutオプションだけでは対応しづらい場合

使わない方がよいケース

• 静的に決まっているページごとのレイアウトは、ページコンポーネントのlayoutオプションで十分
• レイアウト切り替えが頻繁すぎるとUXが混乱する可能性があるため、過度な動的切り替えは避ける
• クライアントサイドのみで切り替えたい場合はHydration不一致に注意が必要

実務でよくあるユースケースとサンプルコード

1. 認証状態に応じたレイアウト切り替え

管理画面は認証済みユーザーのみアクセス可能で、専用の管理レイアウトを使いたい場合。

// middleware/auth-layout.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useAuthUser()
  if (user.value?.isAdmin) {
    setPageLayout('admin')
  } else {
    setPageLayout('default')
  }
})

2. クエリパラメータによるレイアウト変更

URLのクエリでレイアウトを切り替えたい場合。

// middleware/query-layout.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.query.layout === 'simple') {
    setPageLayout('simple')
  } else {
    setPageLayout('default')
  }
})

3. 多言語サイトで言語ごとにレイアウトを変える

言語によってレイアウトの構造を変えたい場合。

// middleware/lang-layout.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.params.lang === 'jp') {
    setPageLayout('japanese')
  } else {
    setPageLayout('default')
  }
})

よくある落とし穴・注意点

SSRとHydrationの不一致に注意

サーバーサイドレンダリング時にsetPageLayoutを遅延して呼び出すと、サーバーとクライアントで異なるレイアウトがレンダリングされ、Hydrationエラーが発生します。
必ずプラグインやルートミドルウェアの早い段階で設定しましょう。

クライアントサイドのみの切り替えは慎重に

クライアントサイドでのみレイアウトを切り替えると、初期表示時に違和感が出ることがあります。
可能な限りサーバーサイドでも同じレイアウトを設定することが望ましいです。

パフォーマンスへの影響

レイアウト切り替えはVueのコンポーネントツリー全体に影響するため、頻繁に切り替えるとパフォーマンス低下やUIのちらつきが起こる可能性があります。
必要な場合に限定して使いましょう。

まとめ

setPageLayoutはNuxtでページのレイアウトを動的に切り替える強力な機能です。
ユーザーの状態やルート情報に応じて柔軟にUIを変えられるため、管理画面や多言語サイトなどで特に有効です。
ただし、SSR時のHydration不一致やパフォーマンス面の注意も必要なので、使うタイミングや場所を見極めて活用しましょう。

適切に使えば、より洗練されたユーザー体験を提供できる便利なツールです。ぜひ実務での活用を検討してみてください。