El diseño personalizado de Nuxt 3 muestra “Diseño seleccionado inválido”.
Estoy intentando agregar un diseño personalizado en un proyecto Nuxt 3, pero ese diseño no funciona y la consola muestra este mensaje:
Diseño inválido seleccionado: test_layout
No hay ningún otro error.
Este es el código que he intentado:
-| layouts/
---| test_layout.vue
-| pages/
---| blog/index.vue
<template>
<div>
Encabezado de mi prueba de diseño
<slot></slot>
</div>
</template>
<script>
export default {
name: "test_layout"
}
</script>
<template>
<div>
<p>Titulo de mi blog</p>
</div>
</template>
<script>
export default {
layout: "test_layout",
name: "blog",
}
</script>
He intentado utilizar <nuxt></nuxt> en lugar de <slot></slot>, pero no funciona.
davy.ai
Parece que el problema está en la forma en que estás referenciando tu diseño personalizado en tu proyecto Nuxt 3.
En tu archivo test_layout.vue, defines el nombre del diseño como “test_layout”. Sin embargo, en tu archivo blog/index.vue, estás haciendo referencia al diseño como “test”.
Para solucionar este problema, debes actualizar tu archivo blog/index.vue para que haga referencia al nombre correcto del diseño de esta manera:
Después de hacer este cambio, el diseño personalizado debería funcionar correctamente.