Nuxt3でページ遷移時にレイアウトを使用しているページが表示されない場合の対処法

Nuxt2をNuxt3に移行する上で、詰まった部分の解決策について残しておきます。

症状

layouts/default.vueが適用されているページから、layouts/custom.vueが適用されているページにrouter.push()やnavigateTo()で遷移した場合に、ページが表示されない。

バージョンnuxt@3.0.0-rc.6-27664142.4623525で発生。

解法

遷移先のページで、layoutTransitionを有効にしてあげることで解決しました。

index.vue

<script setup lang="ts">
definePageMeta({
  layoutTransition: true,
  // or layoutTransition: {},
  layout: 'custom'
})
</script>