app.vue
O arquivo app.vue é o componente principal da sua aplicação Nuxt.
Se você tiver um diretório pages/, o arquivo app.vue é opcional. O Nuxt incluirá automaticamente um app.vue padrão, mas você ainda pode adicionar o seu próprio para personalizar a estrutura e o conteúdo conforme necessário.
Uso
Uso Mínimo
Com o Nuxt, o diretório pages/ é opcional. Se ele não estiver presente, o Nuxt não incluirá a dependência vue-router. Isso é útil ao construir uma página de destino ou uma aplicação que não requer roteamento.
<template>
<h1>Hello World!</h1>
</template>
Uso com Páginas
Quando você tem um diretório pages/, você precisa usar o componente <NuxtPage> para exibir a página atual:
<template>
<NuxtPage />
</template>
Você também pode definir a estrutura comum da sua aplicação diretamente no app.vue. Isso é útil quando você deseja incluir elementos globais, como um cabeçalho ou rodapé:
<template>
<header>
Conteúdo do cabeçalho
</header>
<NuxtPage />
<footer>
Conteúdo do rodapé
</footer>
</template>
Lembre-se de que app.vue atua como o componente principal da sua aplicação Nuxt. Qualquer coisa que você adicionar a ele (JS e CSS) será global e incluída em todas as páginas.
Uso com Layouts
Quando sua aplicação requer diferentes layouts para diferentes páginas, você pode usar o diretório layouts/ com o componente <NuxtLayout>. Isso permite definir múltiplos layouts e aplicá-los por página.
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.
A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/guide/directory-structure/app