mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs(getting-started): add views page (#7556)
Co-authored-by: Pooya Parsa <pooya@pi0.io> Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
parent
98ce2e6492
commit
d47572e55e
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@ -1,2 +1,3 @@
|
|||||||
schema
|
schema
|
||||||
**/*.configuration/nuxt.config.md
|
**/*.configuration/nuxt.config.md
|
||||||
|
**/*.configuration/nuxt-config.md
|
||||||
|
@ -1,13 +1,130 @@
|
|||||||
# Views
|
# Views
|
||||||
|
|
||||||
::NeedContribution
|
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](/img/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
|
||||||
|
If you are familiar with Vue, you might wonder where `main.js` is (the file is that normally creates a Vue app). Nuxt does this behind the scene.
|
||||||
::
|
::
|
||||||
|
|
||||||
::ReadMore{link="/guide/directory-structure/components"}
|
## Components
|
||||||
|
|
||||||
|
![Components are reusable pieces of UI](/img/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>
|
||||||
|
```
|
||||||
|
|
||||||
::
|
::
|
||||||
|
|
||||||
::ReadMore{link="/guide/directory-structure/pages"}
|
## Pages
|
||||||
|
|
||||||
|
![Pages are views tied to a specific route](/img/getting-started/views/pages.svg)
|
||||||
|
|
||||||
|
Pages represent views use 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>
|
||||||
|
```
|
||||||
|
|
||||||
::
|
::
|
||||||
|
|
||||||
::ReadMore{link="/guide/directory-structure/layouts"}
|
::alert
|
||||||
|
You will learn more about pages in the [Routing section](/getting-started/routing)
|
||||||
::
|
::
|
||||||
|
|
||||||
|
## Layouts
|
||||||
|
|
||||||
|
![Layouts are wrapper around pages](/img/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 `layout/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](/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](/guide/directory-structure/layouts).
|
||||||
|
1
docs/static/img/getting-started/views/app.svg
vendored
Normal file
1
docs/static/img/getting-started/views/app.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 5.6 KiB |
1
docs/static/img/getting-started/views/components.svg
vendored
Normal file
1
docs/static/img/getting-started/views/components.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 6.5 KiB |
1
docs/static/img/getting-started/views/layouts.svg
vendored
Normal file
1
docs/static/img/getting-started/views/layouts.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 12 KiB |
1
docs/static/img/getting-started/views/pages.svg
vendored
Normal file
1
docs/static/img/getting-started/views/pages.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in New Issue
Block a user