Skip to content

Commit b3a1ff6

Browse files
MachinisteWebMachinisteWeb
authored
Merge pull request #12 from vuejs-fr/views
Relecture de `views.md`
2 parents c9bb7c8 + dd34783 commit b3a1ff6

File tree

1 file changed

+63
-63
lines changed

1 file changed

+63
-63
lines changed

‎en/guide/views.md

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
2-
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. (Document, Layouts, Pages and HTML Head)
2+
title: Vues
3+
description: La section des vues décrit tout ce dont vous avez besoin pour configurer les données et les vues pour une route spécifique dans votre application Nuxt.js (document, mises en page, pages et entête HTML).
44
---
5-
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)
5+
6+
> La section des vues décrit tout ce dont vous avez besoin pour configurer les données et les vues pour une route spécifique dans votre application Nuxt.js (document, mises en page, pages et entête HTML).
77
88
![nuxt-views-schema](/nuxt-views-schema.png)
99

1010
## Document
1111

12-
> You can customise the main document with nuxt.js
12+
> Vous pouvez personnaliser le document principal avec Nuxt.js.
1313
14-
To extend the html template, create a `app.html` at the root of your project.
14+
Pour étendre le modèle HTML, créez un fichier `app.html` à la racine de votre projet.
1515

16-
The default template is:
16+
Le modèle par défaut est le suivant :
1717

1818
```html
1919
<!DOCTYPE html>
@@ -27,11 +27,11 @@ The default template is:
2727
</html>
2828
```
2929

30-
One example if to add conditional CSS classes for IE:
30+
Un exemple pour ajouter des classes CSS conditionnelles pour IE :
3131

3232
```html
3333
<!DOCTYPE html>
34-
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
34+
<!--[if IE 9]><html lang="fr-FR" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
3535
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
3636
<head>
3737
{{ HEAD }}
@@ -42,66 +42,66 @@ One example if to add conditional CSS classes for IE:
4242
</html>
4343
```
4444

45-
## Layouts
45+
## Mises en page
4646

47-
Nuxt.js lets you extend the main layout or create custom layouts by adding them in the `layouts` directory.
47+
Nuxt.js vous permet d'étendre la mise en page principale ou de créer des mises en page personnalisées en les ajoutant dans le répertoire `layouts`.
4848

49-
### Default Layout
49+
### Mise en page par défaut
5050

51-
You can extend the main layout by adding a `layouts/default.vue` file.
51+
Vous pouvez étendre la mise en page principale en ajoutant un fichier `layouts/default.vue`.
5252

53-
*Make sure to add the `<nuxt/>` component when creating a layout to display the page component.*
53+
*Assurez-vous d'ajouter le composant `<nuxt/>` lors de la création d'une mise en page afin d'afficher le composant de la page.*
5454

55-
The default layout source code is:
55+
Le code source de mise en page par défaut est :
5656
```html
5757
<template>
5858
<nuxt/>
5959
</template>
6060
```
6161

62-
### Error Page
62+
### Page d'erreur
6363

64-
You can customize the error page by adding a `layouts/error.vue` file.
64+
Vous pouvez personnaliser la page d'erreur en ajoutant un fichier `layouts/error.vue`.
6565

66-
This layout is special since you should not include `<nuxt/>` inside its template. You must see this layout as a component displayed when an error occurs (404, 500, etc).
66+
Cette mise en page est spéciale car vous ne devez pas inclure `<nuxt />` dans son modèle. Vous devez voir cette mise en page en tant que composant affiché lorsqu'une erreur se produit (404, 500, etc.).
6767

68-
The default error page source code is [available on GitHub](https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue).
68+
Le code source de la page d'erreur par défaut est [disponible sur GitHub](https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue).
6969

70-
Example of a custom error page in `layouts/error.vue`:
70+
Exemple d'une page d'erreur personnalisée à l'aide de `layouts/error.vue`:
7171
```html
7272
<template>
7373
<div class="container">
74-
<h1 v-if="error.statusCode === 404">Page not found</h1>
75-
<h1 v-else>An error occurred</h1>
76-
<nuxt-link to="/">Home page</nuxt-link>
74+
<h1 v-if="error.statusCode === 404">Page non trouvée</h1>
75+
<h1 v-else>Une erreur s'est produite</h1>
76+
<nuxt-link to="/">Accueil</nuxt-link>
7777
</div>
7878
</template>
7979

8080
<script>
8181
export default {
8282
props: ['error'],
83-
layout: 'blog' // you can set a custom layout for the error page
83+
layout: 'blog' // vous pouvez définir une mise en page personnalisée pour la page d'erreur
8484
}
8585
</script>
8686
```
8787

88-
### Custom Layout
88+
### Mise en page personnalisée
8989

90-
Every file (*first level*) in the `layouts` directory will create a custom layout accessible with the `layout` property in the page component.
90+
Chaque fichier (*premier niveau*) dans le répertoire `layouts` créera une mise en page personnalisée accessible via la propriété `layout` dans le composant de la page.
9191

92-
*Make sure to add the `<nuxt/>` component when creating a layout to display the page component.*
92+
*Assurez-vous d'ajouter le composant `<nuxt/>` lors de la création d'une mise en page afin d'afficher le composant de la page.*
9393

94-
Example of `layouts/blog.vue`:
94+
Exemple avec `layouts/blog.vue` :
9595
```html
9696
<template>
9797
<div>
98-
<div>My blog navigation bar here</div>
98+
<div>Ma navigation de blog est ici</div>
9999
<nuxt/>
100100
</div>
101101
</template>
102102
```
103103

104-
And then in `pages/posts.vue`, you can tell Nuxt.js to use your custom layout:
104+
Puis dans `pages/posts.vue`, vous pouvez spécifier à Nuxt.js d'utiliser votre mise en page personnalisée :
105105
```html
106106
<script>
107107
export default {
@@ -110,32 +110,32 @@ export default {
110110
</script>
111111
```
112112

113-
More information about the layout property: [API Pages layout](/api/pages-layout)
113+
Plus d'informations à propos de la propriété `layout` dans [la partie pages de l'API sur `layout`](/api/pages-layout)
114114

115-
Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action.
115+
Regardez la [vidéo de démonstration](https://www.youtube.com/watch?v=YOKnSTp7d38) pour la voir en action (EN).
116116

117117
## Pages
118118

119-
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+
Chaque composant de page est un composant Vue, mais Nuxt.js ajoute des clés spéciales pour rendre le développement de votre application universelle le plus simple possible.
120120

121121
```html
122122
<template>
123-
<h1 class="red">Hello {{ name }}!</h1>
123+
<h1 class="red">Hello {{ name }} !</h1>
124124
</template>
125125

126126
<script>
127127
export default {
128128
asyncData (context) {
129-
// called every time before loading the component
129+
// appelé avant le chargement du composant
130130
return { name: 'World' }
131131
},
132132
fetch () {
133-
// The fetch method is used to fill the store before rendering the page
133+
// La méthode `fetch` est utilisée pour peupler le store avant d'effectuer le rendu de la page
134134
},
135135
head () {
136-
// Set Meta Tags for this Page
136+
// Définit les balises meta pour cette page
137137
},
138-
// and more functionality to discover
138+
// et plus de fonctionnalités à découvrir
139139
...
140140
}
141141
</script>
@@ -148,38 +148,38 @@ export default {
148148
```
149149

150150

151-
| Attribute | Description |
151+
| Attribut | Description |
152152
|-----------|-------------|
153-
| 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. |
154-
| 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). |
155-
| head | Set specific Meta Tags for the current page, see [API Pages head documentation](/api/pages-head). |
156-
| layout | Specify a layout defined in the `layouts` directory, see [API Pages layouts documentation](/api/pages-layout). |
157-
| transition | Set a specific transition for the page, see [API Pages transition](/api/pages-transition). |
158-
| 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). |
159-
| validate | Validator function for a [dynamic route](/guide/routing#dynamic-routes). |
160-
| middleware | Set a middleware for this page, the middleware will be called before rendering the page, see [routes middleware](/guide/routing#middleware). |
153+
| asyncData | L'attribut le plus important. Il peut être asynchrone et reçoit le contexte comme argument, lisez la [documentation sur les données asynchrones](/guide/async-data) pour savoir comment il fonctionne. |
154+
| fetch | Utilisé pour peupler le store avant de faire le rendu de la page, équivalent à la méthode `data` sauf qu'il ne peuple pas le composant `data`. Voir [la partie pages de l'API sur `fetch`](/api/pages-fetch). |
155+
| head | Défini des balises meta spécifiques pour la page en cours, voir [la partie pages de l'API sur `head`](/api/pages-head). |
156+
| layout | Défini une mise en page existantes dans le répertoire `layouts`, voir [la partie pages de l'API sur `layout`](/api/pages-layout). |
157+
| transition | Défini une transition spécifique pour une page, voir [la partie pages de l'API sur `transition`](/api/pages-transition). |
158+
| scrollToTop | Booléen, par défaut: `false`. Indiquez si vous souhaitez que la position se déplace vers le haut avant d'afficher la page, est utilisé pour les [routes imbriquées](/guide/routing#routes-imbriqu-es). |
159+
| validate | Fonction de validation pour les [routes dynamiques](/guide/routing#routes-dynamiques). |
160+
| middleware | Défini un middleware pour cette page, ce middleware sera exécuté avant d'effectuer le rendu de la page, voir [middleware dans le routage](/guide/routing#middleware). |
161161

162-
More information about the pages properties usage: [API Pages](/api)
162+
Plus d'informations à propos de l'utilisation des attributs des pages : [La partie pages de l'API](/api)
163163

164-
## HTML Head
164+
## Entête HTML
165165

166-
Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application.
166+
Nuxt.js utilise [vue-meta](https://github.com/declandewet/vue-meta) pour mettre à jour les `headers` et les `html attributes` de votre application.
167167

168-
Nuxt.js configures `vue-meta` with these options:
168+
Nuxt.js configure `vue-meta` avec les options suivantes :
169169
```js
170170
{
171-
keyName: 'head', // the component option name that vue-meta looks for meta info on.
172-
attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
173-
ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
174-
tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
171+
keyName: 'head', // le nom de l'option où vue-meta va chercher les informations.
172+
attribute: 'data-n-head', // l'attribut que vue-meta ajoute aux balises observées
173+
ssrAttribute: 'data-n-head-ssr', // le nom de l'attribut qui permet à vue-meta de savoir que la meta information a déjà été générée par le serveur
174+
tagIDKeyName: 'hid' // Le nom de la propriété que vue-meta utilise pour déterminer s'il faut écraser ou ajouter une balise
175175
}
176176
```
177177

178-
### Default Meta Tags
178+
### Balises meta par défaut
179179

180-
Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property:
180+
Nuxt.js vous permet de définir tous les meta par défaut de votre application dans `nuxt.config.js`, en utilisant la même propriété `head` :
181181

182-
Example of a custom viewport with a custom Google font:
182+
Exemple d'un viewport spécifique et d'une police Google personnalisée :
183183
```js
184184
head: {
185185
meta: [
@@ -192,12 +192,12 @@ head: {
192192
}
193193
```
194194

195-
To know the list of options you can give to `head`, take a look at [vue-meta documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties).
195+
Pour connaitre la liste des options que vous pouvez donner à `head`, jeter un œil à la [documentation vue-meta](https://github.com/declandewet/vue-meta#recognized-metainfo-properties).
196196

197-
More information about the head method: [API Configuration head](/api/configuration-head)
197+
Plus d'informations à propos de la méthode `head` dans [la partie configuration de l'API sur `head`](/api/configuration-head).
198198

199-
### Custom Meta Tags for a Page
199+
### Balises meta personnalisées pour une page
200200

201-
More information about the head method: [API Pages head](/api/pages-head)
201+
Plus d'informations à propos de la méthode `head` dans [la partie configuration de l'API sur `head`](/api/pages-head).
202202

203-
<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>
203+
<p class="Alert">Afin d'éviter toutes duplications lors de l'utilisation d'un composant enfant, donnez un identifiant unique à l'aide de l'attribut `hid`. Pour [en savoir plus](https://github.com/declandewet/vue-meta#lists-of-tags).</p>

0 commit comments

Comments
 (0)