如何让Nuxt 3项目中default.vue布局应用到根目录error.vue

Nuxt3中，根目录的error.vue作为错误边界组件，默认不会被app.vue里的<NuxtLayout>包裹，因此需要手动处理来应用layouts/default.vue布局，以下是两种可行方案：

方案一：使用<NuxtLayout>组件（推荐） #

直接在error.vue的模板中用<NuxtLayout>包裹错误内容，它会自动加载默认布局：

<template>
  <NuxtLayout>
    <div class="errorSection">
      <p>ERROR DETAILS: {{ error.statusCode }} {{ error.statusMessage }}</p>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
defineProps({
  error: {
    type: Object,
    default: null,
  },
});
</script>

<style setup="scss" scoped>
@import "./assets/styles/errorStyles.scss";
</style>

这种方式符合Nuxt官方约定，后续如果需要切换其他布局，只需给<NuxtLayout>添加name属性即可（如<NuxtLayout name="custom">），灵活性更高。

方案二：直接导入default布局组件 #

如果确定只需要固定使用default.vue布局，可以直接导入该组件并包裹错误内容：

<template>
  <DefaultLayout>
    <div class="errorSection">
      <p>ERROR DETAILS: {{ error.statusCode }} {{ error.statusMessage }}</p>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from './layouts/default.vue';

defineProps({
  error: {
    type: Object,
    default: null,
  },
});
</script>

<style setup="scss" scoped>
@import "./assets/styles/errorStyles.scss";
</style>

补充说明 #

两种方案都能让default.vue中的logo和布局样式应用到错误页面，可根据实际需求选择。

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