Estoy tratando de agregar un diseño personalizado en un proyecto de Nuxt 3, pero ese diseño no funciona y la consola muestra este mensaje:
Diseño no válido test_layout seleccionado
No hay otro error.
Este es el código que he probado:
-| 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/> en lugar de <slot /> , pero no funciona.
Nuxt 3 parece reemplazar el guión bajo del nombre de archivo con guiones, por lo que el diseño debe especificarse como test-layout :
// blog/index.vue export default { // layout: 'test_layout', // ❌ replace underscore with hyphen layout: 'test-layout', // ✅ }Esto no fue un problema en Nuxt 2 , que usa el nombre de archivo exacto como el nombre del diseño (incluidos los guiones bajos). Tampoco veo ninguna documentación sobre esto. He informado del problema para obtener alguna aclaración.
Elimine el código siguiente de su archivo de diseño. Esto puede funcionar.
<script> export default { name: "test_layout" } </script>