Nuxt Bridgeでカスタムレイアウトを使用する方法

Nuxt2のプロジェクトをNuxt Bridgeへ移行した際にlayoutファイルを切り替える方法が見当たらなかったので備忘として書きます。

カスタムレイアウトについて

カスタムレイアウト（layoutファイルを切り替える）とはNuxt2の↓のことです。

要はプロジェクトで複数のlayoutファイルを用意して特定のページで特定のlaytoutファイルを使用すること。

Nuxt Bridgeでカスタムレイアウトを使う

Nuxt3であれば<script setup>内でdefinePageMetaを使うことでlaytoutファイルを指定できます。

ただし、Nuxt Bridgeの場合悲しいことにdefinePageMetaがサポートされておらず使えません。。

そのため、Nuxt Bridgeでは<script setup>とは別に<script>ブロックを用意しlayoutファイルを指定する必要があります。

<script lang="ts">
export default {
  layout: "customLayout"
}
</script>

<script setup lang="ts">
...
</script>

↑の方法でdefault以外のlaytoutファイルを指定できます。冗長気味ですがNuxt Bridgeではこうするほかないみたいです。

だれかの役に立てば幸いです。