Views · Начните работать с Nuxt

`app.vue`

Файл app.vue — это точка входа вашего приложения.

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

app.vue

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

Если вы знакомы с Vue, вы можете задаться вопросом, где находится main.js (файл, который обычно создает приложение Vue). Nuxt делает это "за кулисами".

Компоненты

Компоненты — это повторно используемые части пользовательского интерфейса.

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

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

Страницы

Страницы — это представления, привязанные к определенному маршруту.

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

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

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

Узнать больше Раздел маршрутизации.

Лейауты

Лейауты представляют собой обертку вокруг страниц.

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

Если в вашем приложении имеется только один лейаут, мы рекомендуем вместо этого использовать app.vue с <NuxtPage />.

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

Если вы хотите создать больше лейаутов и узнать, как использовать их на своих страницах, дополнительную информацию можно найти в разделе Лейауты.

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

Если вам нужно изменить только <head>, вы можете обратиться к разделу SEO и метаданные.

Вы можете получить полный контроль над шаблоном 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
) })
})

Узнать больше Docs > Guide > Going Further > Hooks.

Настройка

Nuxt по умолчанию настроен так, чтобы повысить вашу продуктивность.

Ассеты

Nuxt предлагает два варианта для ваших ассетов.