app.vue

Файл app.vue — это основной компонент приложения Nuxt.
Если в проекте есть каталог pages/, файл app.vue необязателен: Nuxt подставит app.vue по умолчанию, но свой файл можно добавить, чтобы задать структуру и разметку.

Использование

Минимальный вариант

В Nuxt каталог pages/ необязателен. Без него в бандл не попадёт зависимость vue-router. Так удобно делать лендинги или приложения без маршрутизации.

app.vue
<template>
  <h1>Привет мир!</h1>
</template>
Прочитайте и отредактируйте живой пример в Docs > 3 X > Examples > Hello World.

Вместе с pages/

Если есть каталог pages/, текущую страницу показывает <NuxtPage>:

app.vue
<template>
  <NuxtPage />
</template>

Общую оболочку приложения можно задать прямо в app.vue — например, глобальный заголовок и подвал:

app.vue
<template>
  <header>
    Содержимое шапки
  </header>
  <NuxtPage />
  <footer>
    Содержимое подвала
  </footer>
</template>
Помните: app.vue — корневой компонент Nuxt. Всё, что вы к нему подключаете (JS и CSS), становится глобальным и попадает на каждую страницу.
Подробнее о структуре страниц в каталоге pages/.

Использование с лейаутами

Если для разных страниц нужны разные лейауты, используйте каталог layouts/ и компонент <NuxtLayout>: можно описать несколько лейаутов и назначать их по страницам.

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Подробнее об организации лейаутов в каталоге layouts/.