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

app.vue

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

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

Компоненты

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

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

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

Страницы (Pages)

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

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

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

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

Макеты (Layouts)

Макеты — это обёртки вокруг страниц с общим интерфейсом (шапка, подвал и т.д.). Это Vue-файлы с компонентом <slot /> для вывода содержимого страницы. По умолчанию используется app/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) })
})