app.vue
El archivo app.vue es el componente principal de tu aplicación Nuxt.
Si tienes un directorio pages/, el archivo app.vue es opcional. Nuxt incluirá automáticamente un app.vue predeterminado, pero aún puedes agregar el tuyo propio para personalizar la estructura y el contenido según sea necesario.
Uso
Uso Mínimo
Con Nuxt, el directorio pages/ es opcional. Si no está presente, Nuxt no incluirá la dependencia vue-router. Esto es útil al construir una página de aterrizaje o una aplicación que no requiere enrutamiento.
<template>
<h1>¡Hola Mundo!</h1>
</template>
Uso con Páginas
Cuando tienes un directorio pages/, necesitas usar el componente <NuxtPage> para mostrar la página actual:
<template>
<NuxtPage />
</template>
También puedes definir la estructura común de tu aplicación directamente en app.vue. Esto es útil cuando deseas incluir elementos globales como un encabezado o pie de página:
<template>
<header>
Contenido del encabezado
</header>
<NuxtPage />
<footer>
Contenido del pie de página
</footer>
</template>
Recuerda que app.vue actúa como el componente principal de tu aplicación Nuxt. Cualquier cosa que agregues a él (JS y CSS) será global y se incluirá en cada página.
Uso con Diseños
Cuando tu aplicación requiere diferentes diseños para diferentes páginas, puedes usar el directorio layouts/ con el componente <NuxtLayout>. Esto te permite definir múltiples diseños y aplicarlos por página.
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
※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/guide/directory-structure/app