Skip to content

Commit ee05137

Browse files
MachinisteWebMachinisteWeb
committed
Review of FAQ part
Signed-off-by: Bruno Lesieur <[email protected]>
1 parent f485174 commit ee05137

19 files changed

+201
-190
lines changed

‎en/faq/async-data-components.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: Async data in components
3-
description: Async data in components?
2+
title: Données asynchrones dans les composants
3+
description: Données asynchrones dans les composants ?
44
---
55

6-
# Async data in components? (En)
6+
# Données asynchrones dans les composants ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Because components do not have an asyncData method, you cannot directly fetch async data server side within a component. In order to get around there limitation you have two basic options:</p>
8+
Étant donné que les composants ne comportent pas de méthode `asyncData`, vous ne pouvez pas récupérer directement côté serveur de données asynchrones dans un composant. Pour contourner cette limitation, vous avez deux possibilités :
99

10-
1. Make the API call in the mounted() hook and set data properties when loaded. *Downside: Won't work for server side rendering.*
11-
2. Make the API call in the asyncData() or fetch() methods of the page component and pass the data as props to the sub components. Server rendering will work fine. *Downside: the asyncData() or fetch() of the page might be less readable because it's loading the data for other components*
10+
1. Effectuez l'appel à l'API dans le point d'ancrage `mounted` et définissez les données quand le composant est chargé. *Problème : ne fonctionne pas pour le rendu côté serveur*.
11+
2. Effectuez l'appel à l'API dans la méthode `asyncData` ou `fetch` du composant de page et passez les données en tant que props au sous-composant. Le rendu côté serveur fonctionnera. *Problème : les méthodes `asyncData` ou `fetch` pour une page peuvent êtres moins lisibles car elles chargent les données pour d'autres composants*.

‎en/faq/css-flash.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
title: CSS Flash
3-
description: Why a CSS Flash appears with Nuxt.js?
3+
description: Pourquoi un flash CSS apparaît avec Nuxt.js ?
44
---
55

6-
# Why a CSS Flash appears? (En)
6+
# Pourquoi un flash CSS apparaît ?
77

88
![cssflash](/flash_css.gif)
99

10-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>This is because the CSS is in the JavaScript build in **development mode** to allow hot-reloading via Webpack.</p>
10+
C'est parce qu'en **mode développement** le CSS se trouve dans le JavaScript afin de permettre le rechargement à chaud via Webpack. Ce flash est appelé [FOUC](https://fr.wikipedia.org/wiki/FOUC).
1111

12-
Don't worry in production mode, the CSS is separated and put in the header so this "flash" does not appear anymore.
12+
Ne vous inquiétez pas, en **mode production** le CSS est séparé et placé dans l'en-tête afin que le phénomène de FOUC n'apparaisse plus.

‎en/faq/dokku-deployment.md

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
---
2-
title: Dokku Deployment
3-
description: How to deploy a Nuxt.js application on Dokku?
2+
title: Déploiement sur Dokku
3+
description: Comment déployer une application Nuxt.js sur Dokku ?
44
---
55

6-
# How to deploy on Dokku? (En)
6+
# Comment déployer sur Dokku ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>We recommend to read [Dokku documentation for the setup](http://dokku.viewdocs.io/dokku/getting-started/installation/) and [Deploying a Node.js Application on Digital Ocean using dokku](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/)</p>
8+
Nous vous recommandons de lire la [documentation de la prise en main de Dokku](http://dokku.viewdocs.io/dokku/getting-started/installation/) et [Deploying a Node.js Application on Digital Ocean using dokku](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/).
99

10-
For the example, we will call our nuxt.js application `my-nuxt-app`
10+
Pour l'exemple, nous allons appeler notre application Nuxt.js `my-nuxt-app`.
1111

12-
We need to tell Dokku to install the `devDependencies` of the project (to be able to launch `npm run build`):
12+
Demandons à Dokku d'installer les `devDependencies` de notre projet (afin de pouvoir exécuter `npm run build`) :
1313

1414
```bash
15-
// on Dokku Server
15+
// sur le serveur Dokku
1616
dokku config:set my-nuxt-app NPM_CONFIG_PRODUCTION=false
1717
```
1818

19-
Also, we want our application to listen on the port `0.0.0.0` and run in production mode:
19+
Nous voulons également que notre application écoute le port `0.0.0.0` et s'exécute en mode production :
2020

2121
```bash
22-
// on Dokku Server
22+
// sur le serveur Dokku
2323
dokku config:set my-nuxt-app HOST=0.0.0.0 NODE_ENV=production
2424
```
2525

26-
You should see these 3 line when you type `dokku config my-nuxt-app`
26+
Vous devriez voir ces trois lignes quand vous tapez `dokku config my-nuxt-app`
2727

2828
![nuxt config vars Dokku](https://i.imgur.com/9FNsaoQ.png)
2929

30-
Then, we tell Dokku to launch `npm run build` via the `scripts.dokku.predeploy` script in our project `app.json`:
31-
`create a file name app.json in our project root folder`
30+
Puis nous pouvons demander à Dokku d'exécuter `npm run build` via le script `scripts.dokku.predeploy` dans `app.json` :
31+
32+
`créez un fichier nommé app.json dans le répertoire racine de votre projet`
3233

3334
```js
3435
{
@@ -40,12 +41,12 @@ Then, we tell Dokku to launch `npm run build` via the `scripts.dokku.predeploy`
4041
}
4142
```
4243

43-
Finally, we can push our app on Dokku with:
44+
Pour finir, nous pouvons déployer notre application sur Dokku :
4445

4546
```bash
46-
// commit your change before push.
47+
// actez vos changements avant de les pousser.
4748
git remote add dokku dokku@yourServer:my-nuxt-app
4849
git push dokku master
4950
```
5051

51-
Voilà! Our nuxt.js application is now hosted on Dokku!
52+
Voilà ! Votre application Nuxt.js est hébergée sur Dokku !

‎en/faq/duplicated-meta-tags.md

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
---
2-
title: Duplicated Meta tags
3-
description: Duplicated Meta tags with Nuxt.js?
2+
title: Balises meta dupliquées
3+
description: Balises meta dupliquées avec Nuxt.js ?
44
---
55

6-
# Duplicated Meta tags? (En)
6+
# Balises meta dupliquées ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>This is a "feature" of [vue-meta](https://github.com/declandewet/vue-meta), please take a look at the [documentation of head elements](/guide/views#html-head).</p>
8+
Il s'agit d'une « fonctionnalité » de [vue-meta](https://github.com/declandewet/vue-meta), merci de lire la [documentation des éléments d'entête](/guide/views#html-head).
99

10-
> To avoid any duplication when used in child component, please give an unique identifier with the `hid` key, please [read more](https://github.com/declandewet/vue-meta#lists-of-tags) about it.
10+
> Afin d'éviter toute duplication lors de l'utilisation d'un composant enfant, donner un identifiant unique à l'aide de la clé `hid`. [En savoir plus](https://github.com/declandewet/vue-meta#lists-of-tags).
1111
12-
For the meta description, you need to add the unique identifier `hid` so vue-meta will know that it has to overwrite the default tag.
12+
Pour la meta description, vous devez ajouter un identifiant unique `hid` afin que vue-meta sache qu'il doit remplacer la balise par défaut.
13+
14+
Votre `nuxt.config.js` :
1315

14-
Your `nuxt.config.js`:
1516
```js
1617
...head: {
1718
title: 'starter',
@@ -25,18 +26,19 @@ Your `nuxt.config.js`:
2526
...
2627
```
2728

28-
An then in your individual page:
29+
Dans votre page individuelle :
30+
2931
```js
3032
export default {
3133
head () {
3234
return {
3335
title: `Page 1 (${this.name}-side)`,
3436
meta: [
35-
{ hid: 'description', name: 'description', content: 'Page 1 description' }
36-
]
37+
{ hid: 'description', name: 'description', content: "Page 1 description" }
38+
],
3739
}
3840
}
3941
}
4042
```
4143

42-
To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views#html-head).
44+
Pour apprendre à utiliser la propriété `head` dans vos pages, consultez la documentation [d'entête HTML](/guide/views#html-head).

‎en/faq/extend-webpack.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: Extend Webpack
3-
description: How to extend webpack config into my Nuxt.js application?
2+
title: Étendre webpack
3+
description: Comment étendre la configuration de webpack dans mon application Nuxt.js ?
44
---
55

6-
# How to extend webpack config? (En)
6+
# Comment étendre la configuration de webpack ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>You can extend the webpack configuration via the `extend` option in your `nuxt.config.js`:</p>
8+
Vous pouvez étendre la configuration de webpack via l'option `extend` de votre fichier `nuxt.config.js` :
99

1010
```js
1111
module.exports = {
1212
build: {
13-
extend (config, { dev, isClient }) {
13+
extend (config, { isDev, isClient }) {
1414
// ...
1515
}
1616
}

‎en/faq/external-resources.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
2-
title: External resources
3-
description: How to use external resources with Nuxt.js?
2+
title: Ressources externes
3+
description: Comment utiliser des ressources externes avec Nuxt.js ?
44
---
55

6-
# How to use external resources? (En)
6+
# Comment utiliser des ressources externes ?
77

8-
## Global Settings
8+
## Paramètres globaux
99

10-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Include your resources in the `nuxt.config.js` file:</p>
10+
Inclure vos ressources dans le fichier `nuxt.config.js` :
1111

1212
```js
1313
module.exports = {
@@ -22,9 +22,9 @@ module.exports = {
2222
}
2323
```
2424

25-
## Local Settings
25+
## Paramètres locaux
2626

27-
Include your resources in your `.vue` file inside the `pages/` directory:
27+
Inclure vos ressources dans votre fichier `.vue` dans votre répertoire `pages/` :
2828

2929
```html
3030
<template>

‎en/faq/github-pages.md

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
---
2-
title: GitHub Pages Deployment
3-
description: How to deploy Nuxt.js on GitHub Pages?
2+
title: Déployer sur GitHub Pages
3+
description: Comment déployer une application Nuxt.js sur GitHub Pages
44
---
55

6-
# How to deploy on GitHub Pages? (En)
6+
# Comment déployer sur GitHub Pages ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Nuxt.js gives you the possibility to host your web application on any static hosting like [GitHub Pages](https://pages.github.com/) for example.</p>
8+
Nuxt.js vous offre la possibilité d'héberger votre application web sur n'importe quel hébergeur statique tel que [GitHub Pages](https://pages.github.com/) par exemple.
99

10-
To deploy on GitHub Pages, you need to generate your static web application:
10+
Pour déployer sur GitHub Pages, vous devez générer votre applicaiton web de manière statique :
1111

1212
```bash
1313
npm run generate
1414
```
1515

16-
It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting.
17-
Branch `gh-pages` for project repository OR branch `master` for user or organization site
16+
Cette commande créé un répertoire `dist` contenant l'intégralité de l'application prête à être déployée sur GitHub Pages. Cela sur la branche `gh-pages` pour un dépôt de projet OU sur la branche `master` pour le site d'un utilisateur ou d'une organisation.
1817

19-
<p class="Alert Alert--nuxt-green"><b>INFO:</b> If you use a custom domain for your GitHub Pages and put `CNAME` file, it is recommended that CNAME file is put in the `static` directory. [More documentation](/guide/assets#static) about it.</p>
18+
<p class="Alert Alert--nuxt-green"><b>Info :</b> si vous utilisez un nom de domaine personalisé pour GitHub Pages à l'aide d'un fichier `CNAME`, il est recommandé de placer ce fichier dans le répertoire `static`. [Plus d'informations](/guide/assets#static) à ce propos.</p>
2019

21-
## Command line deployment
20+
## Déploiement en ligne de commande
2221

23-
You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir):
22+
Vous pouvez également utiliser le package [push-dir](https://github.com/L33T-KR3W/push-dir):
2423

25-
First install it via npm:
24+
Installez le via npm :
2625

2726
```bash
2827
npm install push-dir --save-dev
2928
```
3029

31-
Add a `deploy` command to your package.json with the branch as `gh-pages` for project repository OR `master` for user or organization site.
30+
Ajouter une commande `deploy` à votre `package.json` avec la branche `gh-pages` pour un dépôt de projet OU avec la branche `master` pour le site d'un utilisateur ou d'une organisation.
3231

3332
```js
3433
"scripts": {
@@ -40,7 +39,7 @@ Add a `deploy` command to your package.json with the branch as `gh-pages` for pr
4039
},
4140
```
4241

43-
Then generate and deploy your static application:
42+
Puis générez et déployez votre application statique :
4443

4544
```bash
4645
npm run generate

‎en/faq/google-analytics.md

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
11
---
2-
title: Google Analytics Integration
3-
description: How to use Google Analytics?
2+
title: Intégration de Google Analytics
3+
description: Comment intégrer Google Analytics ?
44
---
55

6-
# How to use Google Analytics? (En)
6+
# Comment intégrer Google Analytics ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>First, please check the [official Google Analytics module](https://github.com/nuxt-community/modules/tree/master/modules/google-analytics) for nuxt.js*</p>
8+
Tout d'abord consultez le [module officiel Google Analytics](https://github.com/nuxt-community/modules/tree/master/modules/google-analytics) pour Nuxt.js.
99

10-
Ortherwise, to use [Google Analytics](https://analytics.google.com/analytics/web/) with your nuxt.js application, we recommend to create a file `plugins/ga.js`:
10+
Ensuite, pour utiliser [Google Analytics](https://analytics.google.com/analytics/web/) avec votre application Nuxt.js, nous recommandons de créer un plugin `plugins/ga.js` :
1111

1212
```js
1313
/* eslint-disable */
1414

1515
export default ({ app }) => {
1616
/*
17-
** Only run on client-side and only in production mode
17+
** Seulement lu côté client et en mode production
1818
*/
1919
if (process.env.NODE_ENV !== 'production') return
2020
/*
21-
** Include Google Analytics Script
21+
** Inclusion du script Google Analytics
2222
*/
2323
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
2424
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
2525
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
2626
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
2727
/*
28-
** Set the current page
28+
** Affecter la page courante
2929
*/
3030
ga('create', 'UA-XXXXXXXX-X', 'auto')
3131
/*
32-
** Every time the route changes (fired on initialization too)
32+
** Chaque fois que la route change
3333
*/
3434
app.router.afterEach((to, from) => {
3535
/*
36-
** We tell Google Analytic to add a page view
36+
** Nous expliquons à Google Analytics d'ajouter une `pageview`
3737
*/
3838
ga('set', 'page', to.fullPath)
3939
ga('send', 'pageview')
4040
})
4141
}
4242
```
4343

44-
> Replace `UA-XXXXXXXX-X` by your Google Analytics tracking ID.
44+
> Remplacez `UA-XXXXXXXX-X` par votre ID de suivi Google Analytics.
4545
46-
Then, we tell nuxt.js to import it in our main application:
46+
Puis nous expliquons à Nuxt.js d'importer le plugin dans notre application pricinpale :
4747

4848
`nuxt.config.js`
49+
4950
```js
5051
module.exports = {
5152
plugins: [
@@ -54,6 +55,6 @@ module.exports = {
5455
}
5556
```
5657

57-
Voilà, Google Analytics is integrated into your nuxt.js application and will track every page view!
58+
Voilà, Google Analytics est intégré dans notre application Nuxt.js et trackera chaque page vue !
5859

59-
<p class="Alert Alert--nuxt-green"><b>INFO:</b> you can use this method for any other tracking service.</p>
60+
<p class="Alert Alert--nuxt-green"><b>Info :</b> cette méthode est valable pour n'importe quel autre service de suivi.</p>

‎en/faq/heroku-deployment.md

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
---
2-
title: Heroku Deployment
3-
description: How to deploy Nuxt.js on Heroku?
2+
title: Déployer sur Heroku
3+
description: Comment déployer Nuxt.js sur Heroku ?
44
---
55

6-
# How to deploy on Heroku? (En)
6+
# Comment déployer sur Heroku ?
77

8-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>We recommend you to read the [Heroku documentation for node.js](https://devcenter.heroku.com/articles/nodejs-support).</p>
8+
Nous vous recommandons de lire la [documentation Heroku pour Node.js](https://devcenter.heroku.com/articles/nodejs-support).
9+
10+
Premièrement, nous devons demander à Heroku d'installer les `devDependencies` du projet (afin de pouvoir exécuter `npm run build`) :
911

10-
First, we need to tell Heroku to install the `devDependencies` of the project (to be able to launch `npm run build`):
1112
```bash
1213
heroku config:set NPM_CONFIG_PRODUCTION=false
1314
```
1415

15-
Also, we want our application to listen on the host `0.0.0.0` and run in production mode:
16+
Nous voulons également que notre application écoute le port `0.0.0.0` et s'exécute en mode production :
17+
1618
```bash
1719
heroku config:set HOST=0.0.0.0
1820
heroku config:set NODE_ENV=production
1921
```
2022

21-
You should see this in your Heroku dashboard (Settings section):
23+
Vous devriez voir cela dans votre tableau de bord Heroku (section Settings) :
2224

2325
![nuxt config vars Heroku](https://i.imgur.com/EEKl6aS.png)
2426

25-
Then, we tell Heroku to launch `npm run build` via the `heroku-postbuild` script in our `package.json`:
27+
Puis nous demandons à Heroku d'exécuter `npm run build` via le script `heroku-postbuild` de notre `package.json` :
28+
2629
```js
2730
"scripts": {
2831
"dev": "nuxt",
@@ -32,9 +35,10 @@ Then, we tell Heroku to launch `npm run build` via the `heroku-postbuild` script
3235
}
3336
```
3437

35-
Finally, we can push the app on Heroku with:
38+
Pour finir, nous pouvons déployer notre application sur Heroku :
39+
3640
```bash
3741
git push heroku master
3842
```
3943

40-
Voilà! Your nuxt.js application is now hosted on Heroku!
44+
Voilà! Votre application Nuxt.js est hébergée sur Heroku !

0 commit comments

Comments
 (0)