Nuxt/docs/1.getting-started/3.views.md

135 lines
3.4 KiB
Markdown
Raw Normal View History

---
navigation.icon: uil:window-section
---
# Views
Nuxt provides several component layers to implement the user interface of your application.
## `app.vue`
![The `app.vue` file is the entry point of your application](/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.
```vue [app.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
</div>
</template>
```
::alert
2022-10-24 08:06:39 +00:00
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.
::
## Components
![Components are reusable pieces of 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.
::code-group
```vue [app.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component.
</AppAlert>
</div>
</template>
```
```vue [components/AppAlert.vue]
<template>
<span>
<slot />
</span>
</template>
```
::
## Pages
![Pages are views tied to a specific route](/assets/docs/getting-started/views/pages.svg)
2023-02-03 22:44:12 +00:00
Pages represent views for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
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.
::code-group
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
```
```vue [pages/about.vue]
<template>
<section>
<p>This page will be displayed at the /about route.</p>
</section>
</template>
```
::
::alert
You will learn more about pages in the [Routing section](/docs/getting-started/routing)
::
## Layouts
![Layouts are wrapper around pages](/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.
::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.
::
::code-group
```vue [layouts/default.vue]
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
```
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
```
```vue [pages/about.vue]
<template>
<section>
<p>This page will be displayed at the /about route.</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).