fix(nuxt): don't try to override computed layouts in definePageMeta

packages/nuxt/src/app/plugins/router.ts

@@ -222,8 +222,8 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>((nuxtApp) => {
   nuxtApp.hooks.hookOnce('app:created', async () => {
     router.beforeEach(async (to, from) => {
       to.meta = reactive(to.meta || {})
-      if (nuxtApp.isHydrating) {
-        to.meta.layout = initialLayout.value ?? to.meta.layout
+      if (nuxtApp.isHydrating && initialLayout.value !== undefined && initialLayout.value !== null) {
+        to.meta.layout = initialLayout.value
       }
       nuxtApp._processingMiddleware = true
 

packages/nuxt/src/pages/runtime/router.ts

@@ -117,8 +117,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const initialLayout = useState('_layout')
   router.beforeEach(async (to, from) => {
     to.meta = reactive(to.meta)
-    if (nuxtApp.isHydrating) {
-      to.meta.layout = initialLayout.value ?? to.meta.layout
+    if (nuxtApp.isHydrating && initialLayout.value !== undefined && initialLayout.value !== null) {
+      to.meta.layout = initialLayout.value
     }
     nuxtApp._processingMiddleware = true
 

test/basic.test.ts

@@ -402,6 +402,16 @@ describe('layouts', () => {
     expect(html).toContain('Custom Layout:')
     await expectNoClientErrors('/with-dynamic-layout')
   })
+  it('should work with a computed layout', async () => {
+    const html = await $fetch('/with-computed-layout')
+
+    // Snapshot
+    // expect(html).toMatchInlineSnapshot()
+
+    expect(html).toContain('with-computed-layout')
+    expect(html).toContain('Custom Layout')
+    await expectNoClientErrors('/with-computed-layout')
+  })
 })
 
 describe('reactivity transform', () => {

test/fixtures/basic/pages/with-computed-layout.vue

@@ -0,0 +1,11 @@
+<script setup>
+definePageMeta({
+  layout: computed(() => 'custom')
+})
+</script>
+
+<template>
+  <div>
+    <div>with-computed-layout.vue</div>
+  </div>
+</template>