Você pode usar o componente <NuxtLayout /> para ativar o layout default em app.vue ou error.vue.

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

Props

• name: Especifica um nome de layout a ser renderizado, pode ser uma string, referência reativa ou uma propriedade computada. Ele deve corresponder ao nome do arquivo de layout correspondente no diretório layouts/.
  • type: string
  • default: default

<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>

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

<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>

• fallback: Se um layout inválido for passado para a prop name, nenhum layout será renderizado. Especifique um layout fallback para ser renderizado neste cenário. Ele deve corresponder ao nome do arquivo de layout correspondente no diretório layouts/.
  • type: string
  • default: null

Props Adicionais

NuxtLayout também aceita quaisquer props adicionais que você precise passar para o layout. Essas props personalizadas são então acessíveis como atributos.

<template>
  <div>
    <NuxtLayout name="custom" title="I am a custom layout">
      <-- ... -->
    </NuxtLayout>
  </div>
</template>

No exemplo acima, o valor de title estará disponível usando $attrs.title no template ou useAttrs().title em <script setup> em custom.vue.

const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // I am a custom layout

Transições

<NuxtLayout /> renderiza o conteúdo recebido via <slot />, que é então envolvido pelo componente <Transition /> do Vue para ativar a transição do layout. Para que isso funcione como esperado, é recomendado que <NuxtLayout /> não seja o elemento raiz do componente de página.

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>
    </NuxtLayout>
  </div>
</template>

Ref do Layout

Para obter a ref de um componente de layout, acesse-a através de ref.value.layoutRef.

<script setup lang="ts">
const layout = ref()

function logFoo () {
  layout.value.layoutRef.foo()
}
</script>

<template>
  <NuxtLayout ref="layout">
    default layout
  </NuxtLayout>
</template>