app.vue

Por defecto, Nuxt tratará este archivo como el punto de entrada y renderizará su contenido para cada ruta de la aplicación.

<template>
  <div>
   <h1>Bienvenido a la página principal</h1>
  </div>
</template>

Componentes

La mayoría de los componentes son piezas reutilizables de la interfaz de usuario, como botones y menús. En Nuxt, puedes crear estos componentes en el directorio components/, y estarán automáticamente disponibles en toda tu aplicación sin necesidad de importarlos explícitamente.

<template>
  <div>
    <h1>Bienvenido a la página principal</h1>
    <AppAlert>
      Este es un componente auto-importado.
    </AppAlert>
  </div>
</template>

Páginas

Las páginas representan vistas para cada patrón de ruta específico. Cada archivo en el directorio pages/ representa una ruta diferente mostrando su contenido.

Para usar páginas, crea el archivo pages/index.vue y añade el componente <NuxtPage /> al app.vue (o elimina app.vue para la entrada predeterminada). Ahora puedes crear más páginas y sus rutas correspondientes añadiendo nuevos archivos en el directorio pages/.

<template>
  <div>
    <h1>Bienvenido a la página principal</h1>
    <AppAlert>
      Este es un componente auto-importado
    </AppAlert>
  </div>
</template>

Diseños

Los diseños son envoltorios alrededor de las páginas que contienen una interfaz de usuario común para varias páginas, como una cabecera y un pie de página. Los diseños son archivos Vue que utilizan componentes <slot /> para mostrar el contenido de la página. El archivo layouts/default.vue se usará por defecto. Los diseños personalizados pueden establecerse como parte de los metadatos de tu página.

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

Si deseas crear más diseños y aprender cómo usarlos en tus páginas, encuentra más información en la sección de Diseños.

Avanzado: Extender la Plantilla HTML

Puedes tener control total sobre la plantilla HTML añadiendo un plugin de Nitro que registre un hook. La función de callback del hook render:html te permite modificar el HTML antes de que se envíe al cliente.

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // Esto será una representación en objeto de la plantilla html.
    console.log(html)
    html.head.push(`<meta name="description" content="Mi descripción personalizada" />`)
  })
  // También puedes interceptar la respuesta aquí.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})