Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit df25b58

Browse files
alexchopinalexchopin
committed
update views documentation
1 parent 0557838 commit df25b58

File tree

2 files changed

+81
-79
lines changed

2 files changed

+81
-79
lines changed

‎en/guide/menu.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@
4949
{
5050
"to": "/views", "name": "Views",
5151
"contents": [
52-
{ "to": "#pages", "name": "Pages" },
52+
{ "to": "#document", "name": "Document" },
5353
{ "to": "#layouts", "name": "Layouts" },
54-
{ "to": "#html-head", "name": "HTML Head" },
55-
{ "to": "#document", "name": "Document" }
54+
{ "to": "#pages", "name": "Pages" },
55+
{ "to": "#html-head", "name": "HTML Head" }
5656
]
5757
},
5858
{

‎en/guide/views.md

Lines changed: 78 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,46 @@
11
---
22
title: Views
3-
description: The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Pages, layouts and HTML Head)
3+
description: The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Document, Layouts, Pages and HTML Head)
44
---
55

6-
> The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Pages, layouts and HTML Head)
6+
> The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Document, Layouts, Pages and HTML Head)
77
8-
## Pages
8+
![nuxt-views-schema](/nuxt-views-schema.png)
99

10-
Every Page component is a Vue component, but Nuxt.js adds special keys to make the development of your universal application the easiest way possible.
10+
## Document
1111

12-
```html
13-
<template>
14-
<h1 class="red">Hello {{ name }}!</h1>
15-
</template>
12+
> You can customise the main document with nuxt.js
1613
17-
<script>
18-
export default {
19-
data (context) {
20-
// called every time before loading the component
21-
return { name: 'World' }
22-
},
23-
fetch () {
24-
// The fetch method is used to fill the store before rendering the page
25-
},
26-
head () {
27-
// Set Meta Tags for this Page
28-
},
29-
// and more functionality to discover
30-
...
31-
}
32-
</script>
14+
To extend the html template, create a `app.html` at the root of your project.
3315

34-
<style>
35-
.red {
36-
color: red;
37-
}
38-
</style>
39-
```
16+
The default template is:
4017

18+
```html
19+
<!DOCTYPE html>
20+
<html {{ HTML_ATTRS }}>
21+
<head>
22+
{{ HEAD }}
23+
</head>
24+
<body {{ BODY_ATTRS }}>
25+
{{ APP }}
26+
</body>
27+
</html>
28+
```
4129

42-
| Attribute | Description |
43-
|-----------|-------------|
44-
| data | The most important key, it has the same purpose as [Vue data](https://vuejs.org/v2/api/#Options-Data) but it can be asynchronous and receives the context as argument, please read the [async data documentation](/guide/async-data) to learn how it works. |
45-
| fetch | Used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. See the [API Pages fetch documentation](/api/pages-fetch). |
46-
| head | Set specific Meta Tags for the current page, see [API Pages head documentation](/api/pages-head). |
47-
| layout | Specify a layout defined in the `layouts` directory, see [API Pages layouts documentation](/api/pages-layout). |
48-
| transition | Set a specific transition for the page, see [API Pages transition](/api/pages-transition). |
49-
| scrollToTop | Boolean, by default: `false`. Specify if you want the page to scroll to the top before rendering the page, it's used for [nested routes](/guide/routing#nested-routes). |
50-
| validate | Validator function for a [dynamic route](/guide/routing#dynamic-routes). |
51-
| middleware | Set a middleware for this page, the middleware will be called before rendering the page, see [routes middleware](/guide/routing#middleware). |
30+
One example if to add conditional CSS classes for IE:
5231

53-
More information about the pages properties usage: [API Pages](/api)
32+
```html
33+
<!DOCTYPE html>
34+
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
35+
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
36+
<head>
37+
{{ HEAD }}
38+
</head>
39+
<body {{ BODY_ATTRS }}>
40+
{{ APP }}
41+
</body>
42+
</html>
43+
```
5444

5545
## Layouts
5646

@@ -123,6 +113,53 @@ More information about the layout property: [API Pages layout](/api/pages-layout
123113

124114
Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action.
125115

116+
## Pages
117+
118+
Every Page component is a Vue component, but Nuxt.js adds special keys to make the development of your universal application the easiest way possible.
119+
120+
```html
121+
<template>
122+
<h1 class="red">Hello {{ name }}!</h1>
123+
</template>
124+
125+
<script>
126+
export default {
127+
asyncData (context) {
128+
// called every time before loading the component
129+
return { name: 'World' }
130+
},
131+
fetch () {
132+
// The fetch method is used to fill the store before rendering the page
133+
},
134+
head () {
135+
// Set Meta Tags for this Page
136+
},
137+
// and more functionality to discover
138+
...
139+
}
140+
</script>
141+
142+
<style>
143+
.red {
144+
color: red;
145+
}
146+
</style>
147+
```
148+
149+
150+
| Attribute | Description |
151+
|-----------|-------------|
152+
| asyncData | The most important key, it can be asynchronous and receives the context as argument, please read the [async data documentation](/guide/async-data) to learn how it works. |
153+
| fetch | Used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. See the [API Pages fetch documentation](/api/pages-fetch). |
154+
| head | Set specific Meta Tags for the current page, see [API Pages head documentation](/api/pages-head). |
155+
| layout | Specify a layout defined in the `layouts` directory, see [API Pages layouts documentation](/api/pages-layout). |
156+
| transition | Set a specific transition for the page, see [API Pages transition](/api/pages-transition). |
157+
| scrollToTop | Boolean, by default: `false`. Specify if you want the page to scroll to the top before rendering the page, it's used for [nested routes](/guide/routing#nested-routes). |
158+
| validate | Validator function for a [dynamic route](/guide/routing#dynamic-routes). |
159+
| middleware | Set a middleware for this page, the middleware will be called before rendering the page, see [routes middleware](/guide/routing#middleware). |
160+
161+
More information about the pages properties usage: [API Pages](/api)
162+
126163
## HTML Head
127164

128165
Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application.
@@ -163,38 +200,3 @@ More information about the head method: [API Configuration head](/api/configurat
163200
More information about the head method: [API Pages head](/api/pages-head)
164201

165202
<p class="Alert">To avoid any duplication when used in child component, please give a unique identifier with the `hid` key, please [read more about it](https://github.com/declandewet/vue-meta#lists-of-tags).</p>
166-
167-
## Document
168-
169-
> You can customise the main document with nuxt.js
170-
171-
To extend the html template, create a `app.html` at the root of your project.
172-
173-
The default template is:
174-
175-
```html
176-
<!DOCTYPE html>
177-
<html {{ HTML_ATTRS }}>
178-
<head>
179-
{{ HEAD }}
180-
</head>
181-
<body {{ BODY_ATTRS }}>
182-
{{ APP }}
183-
</body>
184-
</html>
185-
```
186-
187-
One example if to add conditional CSS classes for IE:
188-
189-
```html
190-
<!DOCTYPE html>
191-
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
192-
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
193-
<head>
194-
{{ HEAD }}
195-
</head>
196-
<body {{ BODY_ATTRS }}>
197-
{{ APP }}
198-
</body>
199-
</html>
200-
```

0 commit comments

Comments
 (0)