I am trying to add a custom layout in a Nuxt 3 project, but that layout doesn't work, and the console shows this message:

Invalid layout test_layout selected

There is no other error.

This the code I have tried:

-| 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>

I have tried <Nuxt/> instead of <slot />, but it's not working.

CodePudding user response：

Nuxt 3 seems to replace the filename's underscore with hyphens, so the layout should be specified as test-layout:

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

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

demo

This 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 to get some clarification.

CodePudding user response：

Remove below code from your layout file. This may work.

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