Nuxt3设置页面自定义布局时出现TypeError问题求助

问题根源 #

你同时用了两种指定布局的方式：definePageMeta配置项和模板中的<NuxtLayout>组件，这会导致Nuxt3的布局渲染逻辑冲突，进而触发首次加载空白和TypeError。

解决方案 #

1. 保留definePageMeta指定布局（推荐）

直接移除登录页模板里的<NuxtLayout>包裹，因为definePageMeta会自动把页面内容注入到指定布局的slot中，不需要手动嵌套。

修正后的登录页代码：

<template>
  <v-row>Sign In Page</v-row>
</template>

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

自定义布局custom.vue保持原有代码即可，它的<slot>会自动渲染登录页内容。

2. 移除默认布局的方式

如果不需要任何布局，直接设置layout: false，同时确保模板里没有<NuxtLayout>组件：

<template>
  <div>
    <v-row>Sign In Page</v-row>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  layout: false,
})
</script>

额外排查点 #

• 确认custom.vue放在项目根目录的layouts文件夹下，Nuxt3会自动识别该目录下的布局文件
• 检查Vuetify配置，确保v-app只在布局中出现一次，不要在页面里重复添加
• 尝试更新Nuxt3到最新稳定版本，规避版本已知的布局渲染bug

内容的提问来源于stack exchange，提问作者hayreenfly