Nuxt 3 自定义布局显示选择的布局无效

Question

我正在尝试在 Nuxt 3 项目中添加自定义布局，但该布局不起作用，并且控制台显示此消息：

Invalid layout test_layout selected

没有其他错误。

这是我试过的代码：

-| layouts/
 ---| test_layout.vue
-| pages/
 ---| blog/index.vue

<template>
  <div>
    My Test Layout Header
    <slot />
  </div>
</template>
<script>
export default {
  name: "test_layout"
}
</script>

<template>
  <div>
    <p>My Blog Title</p>
  </div>
</template>

<script>
export default {
  layout:"test_layout",
  name: "blog",
}
</script>

我试过 <Nuxt/> 而不是 <slot />，但它不起作用。

Answer 1

从布局文件中删除以下代码。这可能有效。

<script>
    export default {
      name: "test_layout"
    }
</script>

Answer 2

Nuxt 3 似乎将文件名的下划线替换为连字符，因此布局应指定为 test-layout:

// blog/index.vue
export default {
  // layout: 'test_layout', // ❌ replace underscore with hyphen

  layout: 'test-layout', // ✅
}

demo

这 wasn't an issue in Nuxt 2, which uses the exact filename as the layout name (including underscores). I also don't see any documentation about this. I've reported the issue 得到一些澄清。

Nuxt 3 自定义布局显示选择的布局无效

Nuxt 3 custom layout shows Invalid layout selected

vue.js

nuxt.js

vuejs3

nuxtjs3