Habilitar Layouts

Los layouts se habilitan añadiendo <NuxtLayout> a tu app.vue:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Para usar un layout:

• Establece una propiedad layout en tu página con definePageMeta.
• Establece la propiedad name de <NuxtLayout>.

Layout Predeterminado

Añade un ~/layouts/default.vue:

<template>
  <div>
    <p>Algún contenido de layout predeterminado compartido en todas las páginas</p>
    <slot />
  </div>
</template>

En un archivo de layout, el contenido de la página se mostrará en el componente <slot />.

Layout Nombrado

-| layouts/
---| default.vue
---| custom.vue

Luego puedes usar el layout custom en tu página:

definePageMeta({
  layout: 'custom'
})

Puedes sobrescribir directamente el layout predeterminado para todas las páginas usando la propiedad name de <NuxtLayout>:

<script setup lang="ts">
// Puedes elegir esto basado en una llamada a la API o el estado de inicio de sesión
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

Si tienes un layout en directorios anidados, el nombre del layout se basará en su propio directorio de ruta y nombre de archivo, eliminando los segmentos duplicados.

Para mayor claridad, recomendamos que el nombre del archivo del layout coincida con su nombre:

Cambiar el Layout Dinámicamente

También puedes usar el helper setPageLayout para cambiar el layout dinámicamente:

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

<template>
  <div>
    <button @click="enableCustomLayout">Actualizar layout</button>
  </div>
</template>

Sobrescribir un Layout por Página

Si estás usando páginas, puedes tomar el control total estableciendo layout: false y luego usando el componente <NuxtLayout> dentro de la página.

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Algún contenido de plantilla de encabezado. </template>

      El resto de la página
    </NuxtLayout>
  </div>
</template>