Представления

app.vue

По умолчанию Nuxt будет рассматривать этот файл как точку входа и отображать его содержимое для каждого маршрута приложения.

<template>
  <div>
    <h1>Добро пожаловать на домашнюю страницу</h1>
  </div>
</template>

Компоненты

Большинство компонентов — это повторно используемые части пользовательского интерфейса, такие как кнопки и меню. В Nuxt вы можете создавать эти компоненты в директории components/, и они будут автоматически доступны в приложении без необходимости их явного импорта.

<template>
  <div>
    <h1>Добро пожаловать на домашнюю страницу</h1>
    <AppAlert>
      Это автоматически импортированный компонент.
    </AppAlert>
  </div>
</template>

<template>
  <span>
    <slot />
  </span>
</template>

Страницы

Страницы — это представления под конкретные маршруты: каждый файл в pages/ соответствует своему URL и рендерит своё содержимое.

Чтобы использовать страницы, создайте файл pages/index.vue и добавьте компонент <NuxtPage /> в app.vue (или удалите app.vue как точку входа по умолчанию). Теперь вы можете создавать больше страниц и соответствующих им маршрутов, добавляя новые файлы в директорию pages/.

<template>
  <div>
    <h1>Добро пожаловать на домашнюю страницу</h1>
    <AppAlert>
      Это автоматически импортированный компонент.
    </AppAlert>
  </div>
</template>

<template>
  <section>
    <p>Эта страница будет отображаться на маршруте /about.</p>
  </section>
</template>

Лейауты

Лейауты — это обёртки вокруг страниц, которые содержат общий пользовательский интерфейс для нескольких страниц, например, отображение хедера и футера. Лейауты — это файлы Vue, использующие компоненты <slot /> для отображения содержимого страницы. Файл layouts/default.vue будет использоваться по умолчанию. Пользовательские лейауты можно задать как часть метаданных вашей страницы.

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

<template>
  <div>
    <h1>Добро пожаловать на домашнюю страницу</h1>
    <AppAlert>
      Это автоматически импортированный компонент.
    </AppAlert>
  </div>
</template>

<template>
  <section>
    <p>Эта страница будет отображаться на маршруте /about.</p>
  </section>
</template>

Подробнее о нескольких лейаутах и их подключении к страницам — в разделе «Лейауты».

Дополнительно: Расширение HTML-шаблона

Вы можете получить полный контроль над шаблоном HTML, добавив плагин Nitro, который регистрирует хук. Коллбэк-функция хука render:html позволяет вам изменять HTML перед его отправкой клиенту.

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // Это будет объектное представление HTML-шаблона.
    console.log(html)
    html.head.push(`<meta name="description" content="Моё индивидуальное описание" />`)
  })
  // Вы также можете перехватить ответ здесь.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})