Skip to content

translate: docs/1.getting-started/3.views #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

translate: docs/1.getting-started/3.views #62

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions docs/1.getting-started/3.views.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,42 @@
navigation.icon: uil:window-section
---

# Views
# Подання {#views}

Nuxt provides several component layers to implement the user interface of your application.
Nuxt надає декілька рівнів компонентів для реалізації інтерфейсу користувача вашого застосунку.

## `app.vue`

![The `app.vue` file is the entry point of your application](/assets/docs/getting-started/views/app.svg)
![Файл `app.vue` є точкою входу для вашого застосунку](/assets/docs/getting-started/views/app.svg)

By default, Nuxt will treat this file as the **entrypoint** and render its content for every route of the application.
За промовчанням, Nuxt розглядатиме цей файл як **точку входу** та відтворюватиме його вміст для кожного маршруту застосунку.

```vue [app.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<h1>Вітаємо вас на сайті</h1>
</div>
</template>
```

::alert
If you are familiar with Vue, you might wonder where `main.js` is (the file that normally creates a Vue app). Nuxt does this behind the scene.
Якщо ви знайомі з Vue, вам може бути цікаво, де знаходиться `main.js` (файл, який зазвичай створює застосунок Vue). Nuxt робить це за лаштунками.
::

## Components
## Компоненти {#components}

![Components are reusable pieces of UI](/assets/docs/getting-started/views/components.svg)
![Компоненти є багаторазовими частинами UI](/assets/docs/getting-started/views/components.svg)

Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
Більшість компонентів є багаторазово використовуваними частинами інтерфейсу користувача, на зразок кнопок та меню. У Nuxt ви маєте змогу створити ці компоненти у католозі `components/` та вони будуть автоматично доступні вздовж вашого здобутку без додаткового імпортування їх.

::code-group

```vue [app.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<h1>Вітаємо вас на сайті</h1>
<AppAlert>
This is an auto-imported component.
Це - автоімпортований компонент
</AppAlert>
</div>
</template>
Expand All @@ -53,22 +53,22 @@ Most components are reusable pieces of the user interface, like buttons and menu

::

## Pages
## Сторінки {#pages}

![Pages are views tied to a specific route](/assets/docs/getting-started/views/pages.svg)
![Сторінки є подання, що вичитуються по спецефічним маршрутам](/assets/docs/getting-started/views/pages.svg)

Pages represent views for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
Сторінки представляють подання для кожного спецефічного шаблону маршруту. Кожен файл у каталозі `pages/` представляє окремі маршрути відображення їх змісту.

To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
Заради використання сторінок, створіть файл `pages/index.vue` та додайте компонент `<NuxtPage />` до `app.vue` (або видалить `app.vue` для входу за промовчанням). Тепер ви можете створити більше сторинок та відповідні маршрути, додаючи нові файли в каталог `pages/`.

::code-group

```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<h1>Вітаємо вас на сайті</h1>
<AppAlert>
This is an auto-imported component
Це - автоімпортований компонент
</AppAlert>
</div>
</template>
Expand All @@ -77,25 +77,25 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
```vue [pages/about.vue]
<template>
<section>
<p>This page will be displayed at the /about route.</p>
<p>Ця сторінка буде відображена за маршрутом /about.</p>
</section>
</template>
```

::

::alert
You will learn more about pages in the [Routing section](/docs/getting-started/routing)
Ви дізнаєтеся більше про сторінки у [розділі про маршрутизацію](/docs/getting-started/routing)
::

## Layouts
## Макети {#layouts}

![Layouts are wrapper around pages](/assets/docs/getting-started/views/layouts.svg)
![Макети обгортаються навколо сторінок](/assets/docs/getting-started/views/layouts.svg)

Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
Макети є обгорками навколо сторінок, що місять загальний інтерфейс користувача для декількох сторінок, на зразок відображення верхнього та нижнього колнтитулів. Макети є файлами Vue, що використовують компонент `<slot />` для відображення змісту **сторінки**. Файл `layouts/default.vue` буде використаний за промовчанням. Власні макети можуть встановлювати частину метаданих вашої сторінки.

::alert
If you only have a single layout in your application, we recommend using app.vue with the [`<NuxtPage />` component](/docs/api/components/nuxt-page) instead.
Якщо ви використовуєте єдиний макет для вашого застосунку, то ми рекомендуємо використовувати app.vue разом з [компонентом `<NuxtPage />`](/docs/api/components/nuxt-page) в ньому.
::

::code-group
Expand All @@ -113,9 +113,9 @@ If you only have a single layout in your application, we recommend using app.vue
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<h1>Вітаємо вас на сайті</h1>
<AppAlert>
This is an auto-imported component
Це - автоімпортований компонент
</AppAlert>
</div>
</template>
Expand All @@ -124,11 +124,11 @@ If you only have a single layout in your application, we recommend using app.vue
```vue [pages/about.vue]
<template>
<section>
<p>This page will be displayed at the /about route.</p>
<p>Ця сторінка буде відображена за маршрутом /about.</p>
</section>
</template>
```

::

If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/guide/directory-structure/layouts).
Якщо ви бажаєте створити більше макеті та як їх використовувати для сторінок, більше інформації у [розділі про макети](/docs/guide/directory-structure/layouts).