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

---

app.vue

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

<!-- app/app.vue -->

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

 

Компоненты

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

<!-- app/app.vue -->

<template>
  <div>
    <h1>Это автоматически импортированный компонент</h1>
    <AppAlert>
      Это автоматически импортируемый компонент
    </AppAlert>
  </div>
</template>

 

<!-- app/components/AppAlert.vue -->

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

 

Страницы

Страницы представляют собой представления для каждого конкретного шаблона маршрута. Каждый файл в каталоге app/pages/ представляет отдельный маршрут, отображающий его содержимое.

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

<!-- app/pages/index.vue -->

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

 

<!-- app/pages/about.vue -->

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

 

Макеты

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

<!-- app/app.vue -->

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

 

<!-- app/layouts/default.vue -->

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

 

<!-- app/pages/index.vue -->

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

 

<!-- app/pages/about.vue -->

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

 

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

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

// server/plugins/extend-html.ts

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