mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 21:55:11 +00:00
164 lines
4.5 KiB
Markdown
164 lines
4.5 KiB
Markdown
---
|
|
title: 'Views'
|
|
description: 'Nuxt provides several component layers to implement the user interface of your application.'
|
|
navigation.icon: i-ph-layout
|
|
---
|
|
|
|
## `app.vue`
|
|
|
|
|
|
|
|
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>
|
|
```
|
|
|
|
::tip
|
|
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
|
|
|
|
|
|
|
|
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.
|
|
|
|
::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 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.
|
|
|
|
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.
|
|
|
|
::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>
|
|
```
|
|
|
|
::
|
|
|
|
:read-more{title="Routing Section" to="/docs/getting-started/routing"}
|
|
|
|
## Layouts
|
|
|
|
|
|
|
|
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.
|
|
|
|
::note
|
|
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.
|
|
::
|
|
|
|
::code-group
|
|
|
|
```vue [app.vue]
|
|
<template>
|
|
<div>
|
|
<NuxtLayout>
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
```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).
|
|
|
|
## Advanced: Extending the HTML Template
|
|
|
|
::note
|
|
If you only need to modify the `<head>`, you can refer to the [SEO and meta section](/docs/getting-started/seo-meta).
|
|
::
|
|
|
|
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.
|
|
|
|
```ts twoslash [server/plugins/extend-html.ts]
|
|
export default defineNitroPlugin((nitroApp) => {
|
|
nitroApp.hooks.hook('render:html', (html, { event }) => {
|
|
// 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) })
|
|
})
|
|
```
|
|
|
|
:read-more{to="/docs/guide/going-further/hooks"}
|