From 4df5588fb9b8cda77ed92f4392446420806e106c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 16 Sep 2017 16:38:33 +0200 Subject: [PATCH 1/3] Relecture de async-data.md Signed-off-by: Bruno Lesieur --- en/guide/async-data.md | 60 +++++++++++++++++++++--------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/en/guide/async-data.md b/en/guide/async-data.md index 78397d4f6..88a2d44cc 100644 --- a/en/guide/async-data.md +++ b/en/guide/async-data.md @@ -1,27 +1,27 @@ --- -title: Async Data -description: You may want to fetch data and render it on the server-side. Nuxt.js adds an `asyncData` method to let you handle async operations before setting the component data. +title: Données asynchrones +description: Vous voudriez peut-être récupérer des données et faire le rendu côté serveur. Nuxt.js ajoute une méthode `asyncData` pour vous permettre de gérer les opérations asynchrones avant de définir les données du composant. --- -> You may want to fetch data and render it on the server-side. -Nuxt.js adds an `asyncData` method to let you handle async operations before setting the component data. +> Vous voudriez peut-être récupérer des données et faire le rendu côté serveur. +Nuxt.js ajoute une méthode `asyncData` pour vous permettre de gérer les opérations asynchrones avant de définir les données du composant. -## The asyncData Method +## La méthode asyncData -Sometimes you just want to fetch data and pre-render it on the server-side without using a store. -`asyncData` is called every time before loading the component (**only for pages components**). -It can be called server-side or before navigating to the corresponding route. -This method receives [the context](/api/context) as the first argument, you can use it to fetch some data and nuxt.js will merge it with the component data. +Parfois vous souhaitez simplement récupérer des données et faire le rendu côté serveur sans utiliser de store. +`asyncData` est appelé avant chaque chargement du composant (**uniquement pour les composants de pages**). +On peut l'appeler côté serveur ou avant de naviguer vers la route correspondante. +Cette méthode reçoit [le contexte](/api#context) comme premier argument, vous pouvez l'utiliser pour récupérer différentes données et Nuxt.js les fusionnera avec les données du composant. -
You do **NOT** have access of the component instance through `this` inside `asyncData` because it is called **before initiating** the component.
+
Vous **n'**avez **PAS** accès à l'instance du composant via `this` au sein de `asyncData` parce que la fonction est appelée **avant d'initier** le composant.
-Nuxt.js offers you different ways to use `asyncData`. Choose the one you're the most familiar with: +Nuxt.js vous propose différentes façons d'utiliser `asyncData`. Choisissez celle avec laquelle vous êtes le plus à l'aise : -1. Returning a `Promise`. Nuxt.js will wait for the promise to be resolved before rendering the component. -2. Using the [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) ([learn more about it](https://zeit.co/blog/async-and-await)) -3. Define a callback as second argument. It has to be called like this: `callback(err, data)` +1. Retourner une `Promise`. Nuxt.js attends que la promesse soit résolue avant de faire le rendu du composant. +2. En utilisant [async / await](https://github.com/lukehoban/ecmascript-asyncawait) ([en savoir plus](https://zeit.co/blog/async-and-await)) +3. En définissant une fonction de rappel comme second argument. Elle doit être appelée comme suit : `callback(err, data)` -### Returning a Promise +### Retourner une promesse ```js export default { asyncData ({ params }) { @@ -33,7 +33,7 @@ export default { } ``` -### Using async/await +### Utiliser async / await ```js export default { async asyncData ({ params }) { @@ -43,7 +43,7 @@ export default { } ``` -### Using a callback +### Utiliser une fonction de rappel ```js export default { asyncData ({ params }, callback) { @@ -55,10 +55,10 @@ export default { } ``` -### Displaying the data +### Afficher les données -The result from asyncData will be **merged** with data. -You can display the data inside your template like you're used to doing: +Le résultat de `asyncData` sera **fusionné** avec les données. +Vous pouvez afficher les données au sein du template comme habituellement : ```html ``` -## The Context +## Le contexte -To see the list of available keys in `context`, take a look at the [API Pages data](/api). +Pour voir la liste des attributs disponibles dans `context`, jeter un œil à [la partie essentielle de l'API pour `context`](/api/context). -### Accessing dynamic route data +### Accéder aux données des routes dynamiques -You can use the context object injected into the `asyncData` property to access dynamic route data. For example, dynamic route params can be accessed using the name of the file or folder that configured it. So if you define a file named `_slug.vue`, you can acccess it via `context.params.slug`. +Vous pouvez utiliser l'objet du contexte injecté à la propriété `asyncData` afin d'accéder aux données des routes dynamiques. Par example, les données des routes dynamiques peuvent être accédées en utilisant le nom du fichier ou du dossier qui la configure. Si vous définissez un fichier nommé `_slug.vue`, vous pourrez y accéder via `context.params.slug`. -## Handling Errors +## Gestion des erreurs -Nuxt.js adds the `error(params)` method in the `context`, you can call it to display the error page. `params.statusCode` will be also used to render the proper status code form the server-side. +Nuxt.js ajoute la méthode `error(params)` au `context`, vous pouvez l'appeler pour afficher la page d'erreur. `params.statusCode` sera également utilisée pour faire le rendu avec le code de status approprié côté serveur. -Example with a `Promise`: +Exemple avec une `Promise` : ```js export default { asyncData ({ params, error }) { @@ -87,13 +87,13 @@ export default { return { title: res.data.title } }) .catch((e) => { - error({ statusCode: 404, message: 'Post not found' }) + error({ statusCode: 404, message: 'Billet non trouvé' }) }) } } ``` -If you're using the `callback` argument, you can call it directly with the error and nuxt.js will call the `error` method for you: +Si vous utilisez l'argument `callback`, vous pouvez l'appeler directement en lui passant l'erreur et Nuxt.js appellera la méthode `error` pour vous : ```js export default { asyncData ({ params }, callback) { @@ -108,4 +108,4 @@ export default { } ``` -To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). +Pour personnaliser la page d'erreur, consultez la [partie mises en page de la section vues](/guide/views#mises-en-page). From 85d20ade8e1877f548163a2ab1d75eb76c569ca9 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 08:59:40 +0200 Subject: [PATCH 2/3] Revue de @rspt Signed-off-by: Bruno Lesieur --- en/guide/async-data.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/guide/async-data.md b/en/guide/async-data.md index 88a2d44cc..7c134cfe5 100644 --- a/en/guide/async-data.md +++ b/en/guide/async-data.md @@ -17,7 +17,7 @@ Cette méthode reçoit [le contexte](/api#context) comme premier argument, vous Nuxt.js vous propose différentes façons d'utiliser `asyncData`. Choisissez celle avec laquelle vous êtes le plus à l'aise : -1. Retourner une `Promise`. Nuxt.js attends que la promesse soit résolue avant de faire le rendu du composant. +1. Retourner une `Promise`. Nuxt.js attend que la promesse soit résolue avant de faire le rendu du composant. 2. En utilisant [async / await](https://github.com/lukehoban/ecmascript-asyncawait) ([en savoir plus](https://zeit.co/blog/async-and-await)) 3. En définissant une fonction de rappel comme second argument. Elle doit être appelée comme suit : `callback(err, data)` @@ -72,11 +72,11 @@ Pour voir la liste des attributs disponibles dans `context`, jeter un œil à [l ### Accéder aux données des routes dynamiques -Vous pouvez utiliser l'objet du contexte injecté à la propriété `asyncData` afin d'accéder aux données des routes dynamiques. Par example, les données des routes dynamiques peuvent être accédées en utilisant le nom du fichier ou du dossier qui la configure. Si vous définissez un fichier nommé `_slug.vue`, vous pourrez y accéder via `context.params.slug`. +Vous pouvez utiliser l'objet du contexte injecté à la propriété `asyncData` afin d'accéder aux données des routes dynamiques. Par exemple, les données des routes dynamiques peuvent être accédées en utilisant le nom du fichier ou du dossier qui la configure. Si vous définissez un fichier nommé `_slug.vue`, vous pourrez y accéder via `context.params.slug`. ## Gestion des erreurs -Nuxt.js ajoute la méthode `error(params)` au `context`, vous pouvez l'appeler pour afficher la page d'erreur. `params.statusCode` sera également utilisée pour faire le rendu avec le code de status approprié côté serveur. +Nuxt.js ajoute la méthode `error(params)` au `context`, vous pouvez l'appeler pour afficher la page d'erreur. `params.statusCode` sera également utilisée pour faire le rendu avec le code de statut approprié côté serveur. Exemple avec une `Promise` : ```js From 0bb5f244ca681d1337f77b29f25a76391101f4ad Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 09:45:16 +0200 Subject: [PATCH 3/3] Ajout majuscule au lien vers des titres de page Signed-off-by: Bruno Lesieur --- en/guide/async-data.md | 4 ++-- en/guide/directory-structure.md | 2 +- en/guide/index.md | 10 +++++----- en/guide/installation.md | 4 ++-- en/guide/routing.md | 8 ++++---- en/guide/views.md | 24 ++++++++++++------------ 6 files changed, 26 insertions(+), 26 deletions(-) diff --git a/en/guide/async-data.md b/en/guide/async-data.md index 7c134cfe5..133884e8e 100644 --- a/en/guide/async-data.md +++ b/en/guide/async-data.md @@ -68,7 +68,7 @@ Vous pouvez afficher les données au sein du template comme habituellement : ## Le contexte -Pour voir la liste des attributs disponibles dans `context`, jeter un œil à [la partie essentielle de l'API pour `context`](/api/context). +Pour voir la liste des attributs disponibles dans `context`, jeter un œil à [la partie Essentielle de l'API pour `context`](/api/context). ### Accéder aux données des routes dynamiques @@ -108,4 +108,4 @@ export default { } ``` -Pour personnaliser la page d'erreur, consultez la [partie mises en page de la section vues](/guide/views#mises-en-page). +Pour personnaliser la page d'erreur, consultez [la partie Mises en page de la section Vues](/guide/views#mises-en-page). diff --git a/en/guide/directory-structure.md b/en/guide/directory-structure.md index 3fc8d4a92..52a355f4b 100644 --- a/en/guide/directory-structure.md +++ b/en/guide/directory-structure.md @@ -57,7 +57,7 @@ _Ce répertoire ne peut pas être renommé._ ### Le répertoire des stores -Le répertoire `store` contient vos fichiers [de store Vuex](https://vuex.vuejs.org/fr/). Les stores Vuex sont implémentés de manière optionnelle dans le framework Nuxt.js. La création d'un fichier `index.js` dans ce répertoire active automatiquement l'option dans le framework. +Le répertoire `store` contient vos fichiers de [store Vuex](https://vuex.vuejs.org/fr/). Les stores Vuex sont implémentés de manière optionnelle dans le framework Nuxt.js. La création d'un fichier `index.js` dans ce répertoire active automatiquement l'option dans le framework. _Ce répertoire ne peut pas être renommé._ diff --git a/en/guide/index.md b/en/guide/index.md index d39a2262b..9d4813a2e 100644 --- a/en/guide/index.md +++ b/en/guide/index.md @@ -26,10 +26,10 @@ En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vou Nuxt.js inclut les éléments suivants afin de créer une expérience de développement optimale : -- [Vue 2](https://github.com/vuejs/vue) -- [Vue Router](https://github.com/vuejs/vue-router) -- [Vuex](https://github.com/vuejs/vuex) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée) -- [Vue Meta](https://github.com/declandewet/vue-meta) +- [Vue 2](https://fr.vuejs.org/) +- [Vue Router](https://router.vuejs.org/fr/) +- [Vuex](https://ssr.vuejs.org/fr/) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée) +- [vue-meta](https://github.com/declandewet/vue-meta) Un total de seulement **57ko min+gzip** (53ko avec Vuex). @@ -68,7 +68,7 @@ Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté se Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus. -Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt). +Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide d'[Utilisation de Nuxt.js par programmation](/api/nuxt). ## Génération statique (pré-rendu) diff --git a/en/guide/installation.md b/en/guide/installation.md index 2456282df..951e50b50 100644 --- a/en/guide/installation.md +++ b/en/guide/installation.md @@ -32,7 +32,7 @@ L'application est désormais accessible à l'adresse http://localhost:3000.

Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire pages aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages.

-Pour en savoir plus sur la structure des répertoires du projet, consultez [la documentation de l'architecture des répertoires](/guide/directory-structure). +Pour en savoir plus sur l'organisation des répertoires dans un projet, consultez la documentation de l'[Architecture des répertoires](/guide/directory-structure). ## Commencer depuis zéro @@ -89,4 +89,4 @@ L'application est désormais accessible à l'adresse http://localhost:3000.

Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire pages aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages

-Pour en savoir plus sur la structure des dossiers du projet, consultez [la documentation de l'architecture des dossiers](/guide/directory-structure). +Pour en savoir plus sur la structure des dossiers du projet, consultez la documentation de l'[Architecture des répertoires](/guide/directory-structure). diff --git a/en/guide/routing.md b/en/guide/routing.md index 5cb8cf6c1..065d667be 100644 --- a/en/guide/routing.md +++ b/en/guide/routing.md @@ -88,7 +88,7 @@ router: { Comme vous pouvez le voir, la route nommée `users-id` contient le chemin `:id?` ce qui le rend optionnel. Si vous voulez le rendre obligatoire, créez un fichier `index.vue` dans le dossier `users/_id`. -

Attention : les routes dynamiques sont ignorées par la commande `generate` : [ Configuration de l'API pour la génération](/api/configuration-generate#routes)

+

Attention : les routes dynamiques sont ignorées par la commande `generate`, consultez la configuration de l'API pour La propriété `generate`](/api/configuration-generate#routes)

### Validation des paramètres de route @@ -107,7 +107,7 @@ export default { Si la méthode de validation ne renvoie pas `true`, Nuxt.js chargera automatiquement la page d'erreur 404. -Plus d'informations à propos de la méthode de validation : [API pour la validation de pages](/api/pages-validate) +Pour plus d'informations à propos de la méthode de validation, consultez [la partie Pages de l'API pour La méthode `validate`](/api/pages-validate) ## Routes imbriquées @@ -240,7 +240,7 @@ module.exports = { } ``` -Plus d'informations à propos des transitions : [Configuration de l'API pour les transitions](/api/pages-transition) +Pour plus d'informations à propos des transitions, consultez [la partie Configuration de l'API pour La propriété `transition`](/api/pages-transition) ### Paramètres des pages @@ -263,7 +263,7 @@ export default { } ``` -Plus d'informations à propos de la propriété transition : [API pour la transition de pages](/api/pages-transition) +Pour plus d'informations à propos de la propriété transition, consultez [la partie Configuration de l'API pour La propriété `transition`](/api/pages-transition) ## Middleware diff --git a/en/guide/views.md b/en/guide/views.md index 1454c32a5..4f8b96893 100644 --- a/en/guide/views.md +++ b/en/guide/views.md @@ -110,7 +110,7 @@ export default { ``` -Plus d'informations à propos de la propriété `layout` dans [la partie pages de l'API sur `layout`](/api/pages-layout) +Pour plus d'informations, consultez la configuration de l'API à propos de [La propriété `layout`](/api/pages-layout). Regardez la [vidéo de démonstration](https://www.youtube.com/watch?v=YOKnSTp7d38) pour la voir en action (EN). @@ -150,16 +150,16 @@ export default { | Attribut | Description | |-----------|-------------| -| 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. | -| 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). | -| 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). | -| 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). | -| transition | Défini une transition spécifique pour une page, voir [la partie pages de l'API sur `transition`](/api/pages-transition). | -| 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). | -| validate | Fonction de validation pour les [routes dynamiques](/guide/routing#routes-dynamiques). | -| 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). | +| 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. | +| 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). | +| 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). | +| 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). | +| transition | Défini une transition spécifique pour une page, voir [la partie Pages de l'API sur `transition`](/api/pages-transition). | +| 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). | +| validate | Fonction de validation pour les [Routes dynamiques](/guide/routing#routes-dynamiques). | +| middleware | Défini un middleware pour cette page, ce middleware sera exécuté avant d'effectuer le rendu de la page, voir le [Middleware dans le Routage](/guide/routing#middleware). | -Plus d'informations à propos de l'utilisation des attributs des pages : [La partie pages de l'API](/api) +Pour plus d'informations à propos de l'utilisation des attributs de pages, consultez [la partie Pages de l'API](/api) ## Entête HTML @@ -194,10 +194,10 @@ head: { 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). -Plus d'informations à propos de la méthode `head` dans [la partie configuration de l'API sur `head`](/api/configuration-head). +Plus d'informations à propos de la méthode `head` dans [la partie Configuration de l'API sur `head`](/api/configuration-head). ### Balises meta personnalisées pour une page -Plus d'informations à propos de la méthode `head` dans [la partie configuration de l'API sur `head`](/api/pages-head). +Plus d'informations à propos de la méthode `head` dans [la partie Configuration de l'API sur `head`](/api/pages-head).

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).