No estoy seguro de entender completamente lo que quiere tener al final, pero digamos que quiere cambiar la ruta del directorio de layouts con la propiedad dir .

Puede hacerlo con lo siguiente en nuxt.config.ts

 import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ dir: { layouts: 'fancyLayouts/nested' } })

Entonces, todos sus diseños estarán disponibles en ese directorio

Ahora, tenemos un diseño other.vue muy simple con lo siguiente ( custom.vue es casi lo mismo)

 <template> <div> <slot /> <br/> <p>other layout</p> </div> </template>

Podríamos tener lo siguiente en /pages/index.vue

 <script> definePageMeta({ layout: false, }); export default { data: () => ({ layout: "custom", }), }; </script> <template> <NuxtLayout :name="layout"> <button class="border p-1 rounded" @click="layout === 'other' ? layout = 'custom' : layout = 'other'"> Switch layout </button> </NuxtLayout> </template>

Esto nos permitirá simplemente cambiar de un diseño a otro con éxito, también conocido como custom u other .

Si lo que quieres es tener 2 directorios como:

• /layouts/custom.vue
• /layouts/nested/other.vue (anidado 1 nivel más)

Entonces, no logré tener una forma simple de administrar la importación con respecto a un diseño .

Nunca he visto este tipo de configuración e incluso diría que si tiene muchos diseños diferentes (hasta el punto de anidarlos), le recomiendo envolver su contenido dentro de componentes en lugar de diseños de todos modos.

Debido a que los diseños están destinados a ser envoltorios externos globales bastante simples para las páginas, nada relacionado con una estructura compleja. Es más el propósito de un componente.