2022-10-06 09:15:30 +00:00
---
2023-10-18 10:59:43 +00:00
title: 'Views'
description: 'Nuxt provides several component layers to implement the user interface of your application.'
2024-09-17 15:33:49 +00:00
navigation.icon: i-ph-layout
2022-10-06 09:15:30 +00:00
---
2022-09-20 09:30:17 +00:00
## `app.vue`
2023-10-18 10:59:43 +00:00
2022-09-20 09:30:17 +00:00
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 >
```
2024-02-21 17:09:45 +00:00
::tip
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.
2022-09-20 09:30:17 +00:00
::
## Components
2022-11-16 10:04:28 +00:00
2022-09-20 09:30:17 +00:00
2023-10-18 10:59:43 +00:00
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/` ](/docs/guide/directory-structure/components ) directory, and they will be automatically available across your application without having to explicitly import them.
2022-09-20 09:30:17 +00:00
::code-group
2023-01-25 15:34:43 +00:00
```vue [app.vue]
2022-09-20 09:30:17 +00:00
< 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
2022-11-16 10:04:28 +00:00
2022-09-20 09:30:17 +00:00
2023-10-18 10:59:43 +00:00
Pages represent views for each specific route pattern. Every file in the [`pages/` ](/docs/guide/directory-structure/pages ) directory represents a different route displaying its content.
2022-09-20 09:30:17 +00:00
2023-10-18 10:59:43 +00:00
To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue` ](/docs/guide/directory-structure/app ) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/` ](/docs/guide/directory-structure/pages ) directory.
2022-09-20 09:30:17 +00:00
::code-group
```vue [pages/index.vue]
< template >
< div >
2022-10-07 18:00:51 +00:00
< h1 > Welcome to the homepage< / h1 >
2022-09-20 09:30:17 +00:00
< 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 >
```
2022-04-06 05:56:08 +00:00
::
2023-10-18 10:59:43 +00:00
:read-more{title="Routing Section" to="/docs/getting-started/routing"}
2022-04-06 05:56:08 +00:00
2022-09-20 09:30:17 +00:00
## Layouts
2022-11-16 10:04:28 +00:00
2022-09-20 09:30:17 +00:00
2022-09-20 17:57:34 +00:00
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.
2022-09-20 09:30:17 +00:00
2024-02-21 17:09:45 +00:00
::note
2023-10-18 10:59:43 +00:00
If you only have a single layout in your application, we recommend using [`app.vue` ](/docs/guide/directory-structure/app ) with [`<NuxtPage />` ](/docs/api/components/nuxt-page ) instead.
2022-04-06 05:56:08 +00:00
::
2022-09-20 09:30:17 +00:00
::code-group
2024-04-16 08:02:55 +00:00
```vue [app.vue]
< template >
< div >
< NuxtLayout >
< NuxtPage / >
< / NuxtLayout >
< / div >
< / template >
```
2022-09-20 09:30:17 +00:00
```vue [layouts/default.vue]
< template >
< div >
< AppHeader / >
2022-10-07 18:00:51 +00:00
< slot / >
2022-09-20 09:30:17 +00:00
< AppFooter / >
< / div >
< / template >
```
```vue [pages/index.vue]
< template >
< div >
2022-10-07 18:00:51 +00:00
< h1 > Welcome to the homepage< / h1 >
2022-09-20 09:30:17 +00:00
< 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 >
```
2022-04-06 05:56:08 +00:00
::
2022-09-20 09:30:17 +00:00
2022-11-16 10:04:28 +00:00
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 ).
2023-06-17 21:43:17 +00:00
2024-11-15 21:40:53 +00:00
## Advanced: Extending the HTML Template
2023-06-17 21:43:17 +00:00
2024-02-21 17:09:45 +00:00
::note
2023-10-18 10:59:43 +00:00
If you only need to modify the `<head>` , you can refer to the [SEO and meta section ](/docs/getting-started/seo-meta ).
2023-06-17 21:43:17 +00:00
::
You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
The callback function of the `render:html` hook allows you to mutate the HTML before it is sent to the client.
2025-03-17 11:18:59 +00:00
<!-- TODO: figure out how to use twoslash to inject types for a different context -->
```ts [server/plugins/extend-html.ts]
2023-06-17 21:43:17 +00:00
export default defineNitroPlugin((nitroApp) => {
2024-02-21 17:09:45 +00:00
nitroApp.hooks.hook('render:html', (html, { event }) => {
2023-06-17 21:43:17 +00:00
// This will be an object representation of the html template.
console.log(html)
html.head.push(`< meta name = "description" content = "My custom description" / > `)
})
// You can also intercept the response here.
nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
```
2023-10-18 10:59:43 +00:00
:read-more{to="/docs/guide/going-further/hooks"}
