Puedes usar el componente <NuxtLayout /> para activar el diseño default en app.vue o error.vue.

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

Props

• name: Especifica un nombre de diseño para ser renderizado, puede ser una cadena, una referencia reactiva o una propiedad computada. Debe coincidir con el nombre del archivo de diseño correspondiente en el directorio 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: Si se pasa un diseño no válido a la propiedad name, no se renderizará ningún diseño. Especifica un diseño fallback para ser renderizado en este escenario. Debe coincidir con el nombre del archivo de diseño correspondiente en el directorio layouts/.
  • type: string
  • default: null

Props Adicionales

NuxtLayout también acepta cualquier prop adicional que necesites pasar al diseño. Estos props personalizados se hacen accesibles como atributos.

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

En el ejemplo anterior, el valor de title estará disponible usando $attrs.title en el template o useAttrs().title en <script setup> en custom.vue.

const layoutCustomProps = useAttrs()

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

Transiciones

<NuxtLayout /> renderiza contenido entrante a través de <slot />, que luego se envuelve alrededor del componente <Transition /> de Vue para activar la transición del diseño. Para que esto funcione como se espera, se recomienda que <NuxtLayout /> no sea el elemento raíz del componente de la página.

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

Ref del Diseño

Para obtener la referencia de un componente de diseño, accede a travé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>