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

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
) })
})