Diseño

Nuxt Kit proporciona un conjunto de utilidades para ayudarte a trabajar con diseños.

Los diseños se utilizan como un contenedor alrededor de tus páginas. Se pueden usar para envolver tus páginas con componentes comunes, por ejemplo, un encabezado y un pie de página. Los diseños se pueden registrar usando la utilidad addLayout.

`addLayout`

Registra una plantilla como diseño y agrégala a los diseños.

En Nuxt 2, el diseño error también se puede registrar usando esta utilidad. En Nuxt 3+ el diseño error se reemplaza con la página error.vue en la raíz del proyecto.

Uso

import { addLayout, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addLayout({
      src: resolve('templates/custom-layout.ts'),
      filename: 'custom-layout.ts',
    }, 'custom')
  },
})

Tipo

function addLayout(layout: NuxtTemplate | string, name: string): void

Parámetros

layout: Un objeto de plantilla o una cadena con la ruta a la plantilla. Si se proporciona una cadena, se convertirá en un objeto de plantilla con src establecido en el valor de la cadena. Si se proporciona un objeto de plantilla, debe tener las siguientes propiedades:

Propiedad	Tipo	Requerido	Descripción
`src`	`string`	`false`	Ruta a la plantilla. Si no se proporciona `src`, se debe proporcionar `getContents` en su lugar.
`filename`	`string`	`false`	Nombre del archivo de la plantilla. Si no se proporciona `filename`, se generará a partir de la ruta `src`. En este caso, la opción `src` es requerida.
`dst`	`string`	`false`	Ruta al archivo de destino. Si no se proporciona `dst`, se generará a partir de la ruta `filename` y la opción `buildDir` de nuxt.
`options`	`Record<string, any>`	`false`	Opciones para pasar a la plantilla.
`getContents`	`(data) => string \| Promise<string>`	`false`	Una función que se llamará con el objeto `options`. Debe devolver una cadena o una promesa que se resuelva en una cadena. Si se proporciona `src`, esta función será ignorada.
`write`	`boolean`	`false`	Si se establece en `true`, la plantilla se escribirá en el archivo de destino. De lo contrario, la plantilla se usará solo en el sistema de archivos virtual.

name: El nombre para registrar el diseño (por ejemplo, default, custom, etc.).

Ejemplo

Esto registrará un diseño llamado custom que envuelve las páginas con un encabezado y un pie de página.

import { addLayout, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addLayout({
      write: true,
      filename: 'my-layout.vue',
      getContents: () => `<template>
  <div>
    <header>My Header</header>
    <slot />
    <footer>My Footer</footer>
  </div>
</template>`,
    }, 'custom')
  },
})

Luego puedes usar este diseño en tus páginas:

pages/about.vue

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

<template>
  <div>Página Acerca de</div>
</template>

Debido a la falta de soporte para archivos .vue virtuales por @vitejs/plugin-vue, puedes solucionar esta limitación pasando write: true al primer argumento de addLayout.

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/kit/layout