# app.vue

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

<tip>

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

</tip>

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

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

В Nuxt каталог [`pages/`](/docs/3.x/directory-structure/pages/) необязателен. Без него в бандл не попадёт зависимость [vue-router](https://router.vuejs.org). Так удобно делать лендинги или приложения без маршрутизации.

```vue [app.vue]
<template>
  <h1>Привет мир!</h1>
</template>
```

<link-example to="/docs/3.x/examples/hello-world">



</link-example>

### Вместе с `pages/`

Если есть каталог [`pages/`](/docs/3.x/directory-structure/pages/), текущую страницу показывает [`<NuxtPage>`](/docs/3.x/api/components/nuxt-page):

```vue [app.vue]
<template>
  <NuxtPage />
</template>
```

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

```vue [app.vue]
<template>
  <header>
    Содержимое шапки
  </header>
  <NuxtPage />
  <footer>
    Содержимое подвала
  </footer>
</template>
```

<note>

Помните: `app.vue` — корневой компонент Nuxt. Всё, что вы к нему подключаете (JS и CSS), становится глобальным и попадает на каждую страницу.

</note>

<read-more to="/docs/3.x/directory-structure/pages/">

Подробнее о структуре страниц в каталоге `pages/`.

</read-more>

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

Если для разных страниц нужны разные лейауты, используйте каталог `layouts/` и компонент [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-layout): можно описать несколько лейаутов и назначать их по страницам.

```vue [app.vue]
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

<read-more to="/docs/3.x/directory-structure/layouts/">

Подробнее об организации лейаутов в каталоге `layouts/`.

</read-more>