Don't miss Vue.js Amsterdam in March 2025! Save 10% with code NUXT.

app.vue

Файл app.vue — это основной компонент приложения Nuxt.

Минимальное использование

В Nuxt 3 директория pages/ необязательна. Если ее нет, Nuxt не будет включать зависимость vue-router. Это полезно при работе над целевой страницей или приложением, которому не нужна маршрутизация.

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

Использование со страницами

Если у вас есть директория pages/, для отображения текущей страницы используйте компонент <NuxtPage>:

app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>
Поскольку <NuxtPage> внутренне использует компонент Vue <Suspense>, его нельзя установить в качестве корневого элемента.
Помните, что app.vue выступает в качестве основного компонента приложения Nuxt. Все, что вы добавляете к нему (JS и CSS), будет глобальным и включенным в каждую страницу.
Если вы хотите иметь возможность настраивать структуру страницы вокруг страниц, ознакомьтесь с директорией layouts/.