Habilitar Layouts

Os layouts são habilitados adicionando <NuxtLayout> ao seu app.vue:

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

Para usar um layout:

• Defina uma propriedade layout na sua página com definePageMeta.
• Defina a propriedade name de <NuxtLayout>.

Layout Padrão

Adicione um ~/layouts/default.vue:

<template>
  <div>
    <p>Algum conteúdo de layout padrão compartilhado em todas as páginas</p>
    <slot />
  </div>
</template>

Em um arquivo de layout, o conteúdo da página será exibido no componente <slot />.

Layout Nomeado

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

Então você pode usar o layout custom na sua página:

definePageMeta({
  layout: 'custom'
})

Você pode substituir diretamente o layout padrão para todas as páginas usando a propriedade name de <NuxtLayout>:

<script setup lang="ts">
// Você pode escolher isso com base em uma chamada de API ou status de login
const layout = "custom";
</script>

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

Se você tiver um layout em diretórios aninhados, o nome do layout será baseado em seu próprio diretório de caminho e nome de arquivo, com segmentos duplicados sendo removidos.

Para clareza, recomendamos que o nome do arquivo do layout corresponda ao seu nome:

Alterando o Layout Dinamicamente

Você também pode usar o auxiliar setPageLayout para alterar o layout dinamicamente:

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

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

Substituindo um Layout em Base por Página

Se você estiver usando páginas, pode ter controle total definindo layout: false e, em seguida, usando o componente <NuxtLayout> dentro da página.

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

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Algum conteúdo de template de cabeçalho. </template>

      O resto da página
    </NuxtLayout>
  </div>
</template>