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.
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', // ✅
}
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.
Remove below code from your layout file. This may work.
<script>
export default {
name: "test_layout"
}
</script>