app.vue и NuxtPage

app/app.vue — корневой компонент: с него Nuxt начинает строить любую страницу сайта. Всё, что написано в нём, видно на каждом адресе, а компонент <NuxtPage /> показывает страницу, которая соответствует текущему адресу.

Файл после создания проекта

Файл app/app.vue уже есть в проекте:

<!-- app/app.vue -->
<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

<NuxtWelcome /> — приветственная страница, которую вы видели по адресу http://localhost:3000. <NuxtRouteAnnouncer /> сообщает программам чтения с экрана заголовок новой страницы после перехода — его стоит оставить.

Свой корневой компонент

Замените содержимое файла:

<!-- app/app.vue -->
<template>
  <div>
    <NuxtRouteAnnouncer />
    <h1>Мой блог</h1>
  </div>
</template>

Сохраните файл — страница обновится сама и покажет заголовок «Мой блог». Пока в проекте нет папки app/pages/, app.vue — единственная страница: любой адрес покажет этот же заголовок.

Вывод страниц

Чтобы у сайта появились отдельные страницы, создайте первую командой:

npx nuxi add page index

Команда создаст файл app/pages/index.vue. Замените его содержимое:

<!-- app/pages/index.vue -->
<template>
  <section>
    <h2>Главная</h2>
    <p>Здесь будут свежие статьи.</p>
  </section>
</template>

Теперь укажите в app.vue, где выводить страницы:

<!-- app/app.vue -->
<template>
  <div>
    <NuxtRouteAnnouncer />
    <header>Мой блог</header>
    <main>
      <NuxtPage />
    </main>
  </div>
</template>

На месте <NuxtPage /> Nuxt подставит компонент страницы для текущего адреса. По адресу / вы увидите шапку «Мой блог» и под ней раздел «Главная». Если вы знакомы с Vue Router, <NuxtPage /> играет ту же роль, что <RouterView />.

Что писать в app.vue

Шапка здесь оставлена для простоты; в уроке о макетах она переедет в отдельный файл.

Частая ошибка

Создав файлы в app/pages/, легко забыть про app.vue. Если в нём по-прежнему стоит <NuxtWelcome /> или просто нет <NuxtPage />, страницы не появятся: по любому адресу будет то же содержимое app.vue. Как только в проекте есть страницы, в app.vue обязательно должен быть <NuxtPage />.