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

Commit b6f7b6e

Browse files
rsptrspt
committed
Translate guide/views
1 parent 594b508 commit b6f7b6e

File tree

1 file changed

+203
-0
lines changed

1 file changed

+203
-0
lines changed

‎fr/guide/views.md

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
---
2+
title: Vues
3+
description: La section 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, Layouts, Pages et HTML Head)
4+
---
5+
6+
> La section 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, Layouts, Pages et HTML Head)
7+
8+
![nuxt-views-schema](/nuxt-views-schema.png)
9+
10+
## Document
11+
12+
> Vous pouvez personnaliser le document principal avec nuxt.js
13+
14+
Pour étendre le modèle html, créez un fichier `app.html` à la racine de votre projet.
15+
16+
Le modèle par défaut est le suivant:
17+
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+
```
29+
30+
Un exemple pour ajouter des classes CSS conditionnelles pour IE:
31+
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+
```
44+
45+
## Mise en page
46+
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`.
48+
49+
### Mise en page par défaut
50+
51+
Vous pouvez étendre la mise en page principale en ajoutant un fichier `layouts/default.vue`.
52+
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.*
54+
55+
Le code source de mise en page par défaut est:
56+
```html
57+
<template>
58+
<nuxt/>
59+
</template>
60+
```
61+
62+
### Page d'erreur
63+
64+
Vous pouvez personnaliser la page d'erreur en ajoutant un fichier `layouts/error.vue`.
65+
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.).
67+
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).
69+
70+
Exemple d'une page d'erreur personalisée à l'aide de `layouts/error.vue`:
71+
```html
72+
<template>
73+
<div class="container">
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>
77+
</div>
78+
</template>
79+
80+
<script>
81+
export default {
82+
props: ['error'],
83+
layout: 'blog' // vous pouvez définir une mise en page personalisée pour la page d'erreur
84+
}
85+
</script>
86+
```
87+
88+
### Mise en page personalisée
89+
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.
91+
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.*
93+
94+
Exemple avec `layouts/blog.vue`:
95+
```html
96+
<template>
97+
<div>
98+
<div>Ma navigation de blog est ici</div>
99+
<nuxt/>
100+
</div>
101+
</template>
102+
```
103+
104+
Puis dans `pages/posts.vue`, vous pouvez spécifier à Nuxt.js d'utiliser votre mise en page personalisée:
105+
```html
106+
<script>
107+
export default {
108+
layout: 'blog'
109+
}
110+
</script>
111+
```
112+
113+
Plus d'informations à propos de la propriété des mises en pages: [API Pages layout](/api/pages-layout)
114+
115+
Regardez la [vidéo de démonstration](https://www.youtube.com/watch?v=YOKnSTp7d38) pour la voir en action (EN).
116+
117+
## Pages
118+
119+
Chaque composant Page est un composant Vue, mais Nuxt.js ajoute des clés spéciales pour rendre le développement de votre application universelle la plus simple possible.
120+
121+
```html
122+
<template>
123+
<h1 class="red">Hello {{ nom }}!</h1>
124+
</template>
125+
126+
<script>
127+
export default {
128+
asyncData (context) {
129+
// appellé avant le "loading" du composant
130+
return { nom: 'World' }
131+
},
132+
fetch () {
133+
// La méthode "fetch" est utilisé pour peupler le "store" avant d'effectuer le rendu de la page
134+
},
135+
head () {
136+
// Définit les meta tags pour cette page
137+
},
138+
// et plus de fonctionnalités à découvrir
139+
...
140+
}
141+
</script>
142+
143+
<style>
144+
.red {
145+
color: red;
146+
}
147+
</style>
148+
```
149+
150+
151+
| Attribut | Description |
152+
|-----------|-------------|
153+
| asyncData | L'attribut le plus important. Il peut être asynchrone et reçoit le contexte comme argument, lisez la [documentation sur asyncData](/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 [API Pages fetch](/api/pages-fetch). |
155+
| head | Définissez des Meta tags spécifiques pour la page en cours, voir [API Pages head](/api/pages-head). |
156+
| layout | Spécifie une mise en page existantes dans le répertoire `layouts`, voir [API Pages layouts](/api/pages-layout). |
157+
| transition | Défini une transition spécifique pour une page, voir [API Pages 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#nested-routes). |
159+
| validate | Fonction de validation pour une [route dynamique](/guide/routing#dynamic-routes). |
160+
| middleware | Définissez un middleware pour cette page, ce middleware sera exécuté avant d'effectuer le rendu de la page, voir [routes middleware](/guide/routing#middleware). |
161+
162+
Plus d'informations à propos de l'utilisation des attributs des pages: [API Pages](/api)
163+
164+
## HTML Head
165+
166+
Nuxt.js utilise [vue-meta](https://github.com/declandewet/vue-meta) pour mettre à jour les `headers` et les `html attributes` de votre application.
167+
168+
Nuxt.js configure `vue-meta` avec les options suivantes:
169+
```js
170+
{
171+
keyName: 'head', // le nom de l'option où vue-meta va chercher les infos.
172+
attribute: 'data-n-head', // l'attribut que vue-meta ajoute aux tags observés
173+
ssrAttribute: 'data-n-head-ssr', // le nom de l'attribut qui permet à vue-meta de savoir que la méta-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 un tag
175+
}
176+
```
177+
178+
### Meta tags par défaut
179+
180+
Nuxt.js vous permet de définir tous les meta par défaut de votre application dans `nuxt.config.js`, en utilisant la propriété `head`:
181+
182+
Exemple d'un viewport spécifique et d'une police Google:
183+
```js
184+
head: {
185+
meta: [
186+
{ charset: 'utf-8' },
187+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
188+
],
189+
link: [
190+
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
191+
]
192+
}
193+
```
194+
195+
Pour connaitre la liste des options que vous pouvez donner à `head`, jeter un oeil à la [documentation vue-meta](https://github.com/declandewet/vue-meta#recognized-metainfo-properties).
196+
197+
Plus d'informations à propos de la méthode head: [API Configuration head](/api/configuration-head)
198+
199+
### Meta tags personalisé pour une page
200+
201+
Plus d'informations à propos de la méthode head: [API Pages head](/api/pages-head)
202+
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`; [en lire plus à ce propos.](https://github.com/declandewet/vue-meta#lists-of-tags)</p>

0 commit comments

Comments
 (0)