Nuxt3中error.vue无法加载默认布局的问题求助

核心原因 #

Nuxt的~/error.vue是错误边界组件，并非普通页面，默认不会自动加载全局布局；直接用<NuxtLayout>包裹模板会干扰它的错误捕获逻辑，导致无法触发跳转和渲染。

正确解决方案 #

方式1：手动导入全局布局组件

直接在error.vue中导入你的默认布局（比如layouts/default.vue）并嵌套内容，示例代码：

<template>
  <DefaultLayout>
    <div class="error-container">
      <h2>Error {{ error.statusCode }}</h2>
      <p>{{ error.message || 'An unexpected error occurred' }}</p>
    </div>
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '~/layouts/default.vue'

// 接收Nuxt传递的错误对象
const props = defineProps({
  error: {
    type: Object,
    required: true
  }
})
</script>

方式2：使用Nuxt布局组合式函数（Nuxt 3+）

如果依赖Nuxt的自动布局导入，可通过useLayout函数加载布局，但手动导入更稳妥，避免冲突：

<template>
  <component :is="layout">
    <!-- 错误页面内容 -->
    <h1>Error {{ error.statusCode }}</h1>
  </component>
</template>

<script setup>
const { layout } = useLayout('default')
const props = defineProps({ error: Object })
</script>

测试注意事项 #

• 不要在error.vue内部测试跳转，需在其他普通页面（如pages/test.vue）中触发错误：

  <script setup>
  const triggerError = () => {
    throw createError({
      statusCode: 404,
      message: 'Requested page not found'
    })
  }
  </script>
  
  <template>
    <button @click="triggerError">Test Error Page</button>
  </template>
  

• 确保error.vue放在项目根目录，而非pages子文件夹下，Nuxt会自动识别这个特殊文件。

排查要点 #

• 检查全局布局组件是否存在语法错误，若布局本身无法渲染，会导致error.vue也无法正常显示。
• 移除error.vue中的<NuxtLayout>标签，它会破坏错误页面的触发机制。

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