⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/auth-routes.md b/en/examples/auth-routes.md index 5ca8eeba3..106676651 100644 --- a/en/examples/auth-routes.md +++ b/en/examples/auth-routes.md @@ -1,6 +1,6 @@ --- -title: Auth Routes (En) -description: Authenticated routes example with Nuxt.js +title: Authentification de routes +description: Exemple d'authentification de routes avec Nuxt.js github: auth-routes livedemo: https://nuxt-auth-routes.gomix.me liveedit: https://gomix.com/#!/project/nuxt-auth-routes @@ -8,30 +8,32 @@ liveedit: https://gomix.com/#!/project/nuxt-auth-routes # Documentation -> Nuxt.js can be used to create authenticated routes easily. +> Nuxt.js peut être utilisé pour créer facilement des routes authentifiées. -## Using Express and Sessions +## Utilisation de Express et des sessions -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically.
+Pour ajouter la fonctionnalité de sessions dans notre application, nous utiliserons `express` et `express-session`. Pour cela, nous devons utiliser Nuxt.js de manière programmatique. + +Premièrement, nous installons les dépendances : -First, we install the dependencies: ```bash yarn add express express-session body-parser whatwg-fetch ``` -*We will talk about `whatwg-fetch` later.* +*Nous parlerons de `whatwg-fetch` plus loin.* + +Puis nous créons notre `server.js` : -Then we create our `server.js`: ```js const { Nuxt, Builder } = require('nuxt') const bodyParser = require('body-parser') const session = require('express-session') const app = require('express')() -// Body parser, to access req.body +// Analyse du corps de requête pour y accéder via `req.body` app.use(bodyParser.json()) -// Sessions to create req.session +// Mise en place de sessions pour y accéder via `req.session` app.use(session({ secret: 'super-secret-key', resave: false, @@ -39,7 +41,7 @@ app.use(session({ cookie: { maxAge: 60000 } })) -// POST /api/login to log in the user and add him to the req.session.authUser +// Accès à `/api/login` en POST pour connecter l'utilisateur et l'ajouter à `req.session.authUser` app.post('/api/login', function (req, res) { if (req.body.username === 'demo' && req.body.password === 'demo') { req.session.authUser = { username: 'demo' } @@ -48,16 +50,16 @@ app.post('/api/login', function (req, res) { res.status(401).json({ error: 'Bad credentials' }) }) -// POST /api/logout to log out the user and remove it from the req.session +// Accès à `/api/logout` en POST pour déconnecter l'utilisateur et le retirer de `req.session` app.post('/api/logout', function (req, res) { delete req.session.authUser res.json({ ok: true }) }) -// We instantiate Nuxt.js with the options +// Nous instancions Nuxt.js avec les options const isProd = process.env.NODE_ENV === 'production' const nuxt = new Nuxt({ dev: !isProd }) -// No build in production +// Pas de build en production if (!isProd) { const builder = new Builder(nuxt) builder.build() @@ -67,7 +69,8 @@ app.listen(3000) console.log('Server is listening on http://localhost:3000') ``` -And we update our `package.json` scripts: +Et nous modifions nos scripts dans `package.json` : + ```json // ... "scripts": { @@ -77,13 +80,14 @@ And we update our `package.json` scripts: } // ... ``` -Note: You'll need to run `npm install --save-dev cross-env` for the above example to work. If you're *not* developing on Windows you can leave cross-env out of your `start` script and set `NODE_ENV` directly. -## Using the store +Note : vous devrez exécuter `npm install --save-dev cross-env` afin de faire fonctionner l'exemple précédent. Si vous n'êtes pas en train de développer sur Windows, vous pouvez laisser cross-env en dehors de votre script `start` et définir `NODE_ENV` directement. + +## Utilisation du store -We need a global state to let our application know if the user is connected **across the pages**. +Nous avons besoin d'un état global pour informer notre application si l'utilisateur reste **connecté entre les pages**. -To let Nuxt.js use Vuex, we create a `store/index.js` file: +Pour laisser Nuxt.js utiliser Vuex, nous créons un fichier `store/index.js`: ```js import Vue from 'vue' @@ -91,10 +95,10 @@ import Vuex from 'vuex' Vue.use(Vuex) -// Polyfill for window.fetch() +// Polyfill pour `window.fetch()` require('whatwg-fetch') -const store = () => new Vuex.Store({ +const store = new Vuex.Store({ state: { authUser: null @@ -115,16 +119,17 @@ const store = () => new Vuex.Store({ export default store ``` -1. We import `Vue` and `Vuex` (included in Nuxt.js) and we tell Vue to use Vuex to let us use `$store` in our components -2. We `require('whatwg-fetch')` to polyfill the `fetch()` method across all browsers (see [fetch repo](https://github.com/github/fetch)) -3. We create our `SET_USER` mutation which will set the `state.authUser` to the connected user -4. We export our store instance to Nuxt.js can inject it to our main application +1. Nous importons `Vue` et `Vuex` (inclus dans Nuxt.js) et nous indiquons à Vue d'utiliser Vuex afin de pouvoir utiliser `$store` dans nos composants. +2. Nous utilisons `require('whatwg-fetch')` afin d'obtenir un polyfill pour la méthode `fetch()` pour tous les navigateurs (consultez le [dépôt fetch](https://github.com/github/fetch)). +3. Nous créons notre mutation `SET_USER` qui va instancier `state.authUser` avec l'utilisateur connecté. +4. Nous exportons notre instance du *store* vers Nuxt.js afin qu'il puisse l'injecter dans notre application principale. -### nuxtServerInit() action +### Fonction nuxtServerInit() -Nuxt.js will call a specific action called `nuxtServerInit` with the context in argument, so when the app will be loaded, the store will be already filled with some data we can get from the server. +Nuxt.js appellera une action spécifique nommée `nuxtServerInit` avec le contexte comme argument. Ainsi, lorsque l'application sera chargée, le store sera déjà rempli avec certaines données que nous pouvons obtenir du serveur. + +Dans notre `store/index.js`, nous pouvons ajouter l'action `nuxtServerInit` : -In our `store/index.js`, we can add the `nuxtServerInit` action: ```js nuxtServerInit ({ commit }, { req }) { if (req.session && req.session.authUser) { @@ -133,18 +138,19 @@ nuxtServerInit ({ commit }, { req }) { } ``` -To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with: +Pour rendre la méthode de données asynchrone, Nuxt.js vous offre différents moyens, choisissez celui avec lequel vous êtes le plus à l'aise : + +1. Retourner une `Promise`, Nuxt.js attendra la résolution de la promesse avant d'afficher le composant. +2. En utilisant [`async` / `await`](https://github.com/lukehoban/ecmascript-asyncawait) ([en savoir plus](https://zeit.co/blog/async-and-await)). -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)) +### L'action login() -### login() action +Nous ajoutons une action `login` qui sera appelée à partir de nos composants de pages pour connecter l'utilisateur : -We add a `login` action which will be called from our pages component to log in the user: ```js login ({ commit }, { username, password }) { return fetch('/api/login', { - // Send the client cookies to the server + // Envoie les cookies client au serveur credentials: 'same-origin', method: 'POST', headers: { @@ -168,12 +174,12 @@ login ({ commit }, { username, password }) { } ``` -### logout() method +### La méthode logout() ```js logout ({ commit }) { return fetch('/api/logout', { - // Send the client cookies to the server + // Envoie les cookies au serveur credentials: 'same-origin', method: 'POST' }) @@ -183,24 +189,25 @@ logout ({ commit }) { } ``` -## Pages components +## Composants de pages + +Ensuite, nous pouvons utiliser `$store.state.authUser` dans nos composants de pages pour vérifier si l'utilisateur est connecté ou non dans notre application. -Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not. +### Rediriger l'utilisateur s'il n'est pas connecté -### Redirect user if not connected +Ajoutons une route `/secret` dont le contenu ne peut être vu que par un utilisateur connecté : -Let's add a `/secret` route where only the connected user can see its content: ```html⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
\ No newline at end of file diff --git a/en/examples/custom-loading.md b/en/examples/custom-loading.md index 19bd08aaa..40878b18c 100644 --- a/en/examples/custom-loading.md +++ b/en/examples/custom-loading.md @@ -1,9 +1,7 @@ --- -title: Custom Loading Component (En) -description: Custom Loading Component example with Nuxt.js +title: Composant de chargement personnalisé +description: Exemple de composant de chargement personnalisé avec Nuxt.js github: custom-loading livedemo: https://custom-loading.nuxtjs.org documentation: /api/configuration-loading ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/custom-routes.md b/en/examples/custom-routes.md index f026b70eb..e9f8b27e2 100644 --- a/en/examples/custom-routes.md +++ b/en/examples/custom-routes.md @@ -1,9 +1,7 @@ --- -title: Custom Routes (En) -description: Custom Routes example with Nuxt.js +title: Routes personnalisées +description: Exemple de routes personnalisées avec Nuxt.js github: custom-routes livedemo: https://custom-routes.nuxtjs.org -documentation: /guide/routing#dynamic-routes ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+documentation: /guide/routing#routes-dynamiques +--- \ No newline at end of file diff --git a/en/examples/global-css.md b/en/examples/global-css.md index e9ccd48c5..c967be280 100644 --- a/en/examples/global-css.md +++ b/en/examples/global-css.md @@ -1,9 +1,7 @@ --- -title: Global CSS (En) -description: Global CSS example with Nuxt.js +title: CSS global +description: Exemple de CSS global avec Nuxt.js github: global-css livedemo: https://global-css.nuxtjs.org documentation: /api/configuration-css ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
\ No newline at end of file +--- \ No newline at end of file diff --git a/en/examples/hello-world.md b/en/examples/hello-world.md index c663ba84f..48614d1db 100644 --- a/en/examples/hello-world.md +++ b/en/examples/hello-world.md @@ -1,11 +1,9 @@ --- -title: Hello World (En) -description: Hello World example with Nuxt.js +title: Hello World +description: Exemple de Hello World avec Nuxt.js github: hello-world youtube: https://www.youtube.com/embed/kmf-p-pTi40 livedemo: https://hello-world.nuxtjs.org liveedit: https://gomix.com/#!/project/nuxt-hello-world -documentation: /guide/installation#starting-from-scratch ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+documentation: /guide/installation#commencer-depuis-z-ro +--- \ No newline at end of file diff --git a/en/examples/i18n.md b/en/examples/i18n.md index e8d3214d9..ed1fede3e 100644 --- a/en/examples/i18n.md +++ b/en/examples/i18n.md @@ -1,9 +1,7 @@ --- -title: Internationalization (i18n) (En) -description: Internationalization (i18n) example with Nuxt.js +title: Internationalisation (i18n) +description: Exemple d'internationalisation (i18n) avec Nuxt.js github: i18n livedemo: https://i18n.nuxtjs.org documentation: /guide/routing#middleware ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/layouts.md b/en/examples/layouts.md index 8e6fd6f03..8751aba4c 100644 --- a/en/examples/layouts.md +++ b/en/examples/layouts.md @@ -1,10 +1,8 @@ --- -title: Layouts (En) -description: Layouts example with Nuxt.js +title: Mises en page +description: Exemple de mises en page avec Nuxt.js github: custom-layouts livedemo: https://nuxt-custom-layouts.gomix.me/ liveedit: https://gomix.com/#!/project/nuxt-custom-layouts -documentation: /guide/views#layouts ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+documentation: /guide/views#mises-en-page +--- \ No newline at end of file diff --git a/en/examples/menu.json b/en/examples/menu.json index 6974085ed..01c07005d 100644 --- a/en/examples/menu.json +++ b/en/examples/menu.json @@ -1,33 +1,33 @@ [ { - "title": "Essentiel", + "title": "Essentiels", "links": [ - { "name": "Hello world (En)", "to": "" }, - { "name": "SEO HTML Head (En)", "to": "/seo-html-head" } + { "name": "Hello World", "to": "" }, + { "name": "Entête HTML SEO", "to": "/seo-html-head" } ] }, { "title": "Personnalisation", "links": [ - { "name": "Cached Components (En)", "to": "/cached-components" }, - { "name": "Custom Loading (En)", "to": "/custom-loading" }, - { "name": "Custom Routes (En)", "to": "/custom-routes" }, - { "name": "Global CSS (En)", "to": "/global-css" }, - { "name": "Layouts (En)", "to": "/layouts" }, - { "name": "Middleware (En)", "to": "/middleware" }, - { "name": "Nested Routes (En)", "to": "/nested-routes" }, - { "name": "Plugins (En)", "to": "/plugins" }, - { "name": "Routes transitions (En)", "to": "/routes-transitions" } + { "name": "Composants en cache", "to": "/cached-components" }, + { "name": "Composant de chargement personnalisé", "to": "/custom-loading" }, + { "name": "Routes personnalisées", "to": "/custom-routes" }, + { "name": "CSS global", "to": "/global-css" }, + { "name": "Mises en page (layouts)", "to": "/layouts" }, + { "name": "Middleware", "to": "/middleware" }, + { "name": "Routes imbriquées", "to": "/nested-routes" }, + { "name": "Plugins", "to": "/plugins" }, + { "name": "Transitions de routes", "to": "/routes-transitions" } ] }, { - "title": "Avancées", + "title": "Avancé", "links": [ - { "name": "Async Data (En)", "to": "/async-data" }, - { "name": "Auth Routes (En)", "to": "/auth-routes" }, - { "name": "Vuex Store (En)", "to": "/vuex-store" }, - { "name": "i18n (En)", "to": "/i18n" }, - { "name": "Testing (En)", "to": "/testing" } + { "name": "Données asynchrones", "to": "/async-data" }, + { "name": "Authentification de routes", "to": "/auth-routes" }, + { "name": "Store Vuex", "to": "/vuex-store" }, + { "name": "i18n", "to": "/i18n" }, + { "name": "Tests", "to": "/testing" } ] } ] diff --git a/en/examples/middleware.md b/en/examples/middleware.md index 1c1440ce9..aeb6bc08b 100644 --- a/en/examples/middleware.md +++ b/en/examples/middleware.md @@ -1,8 +1,7 @@ --- -title: Middleware (En) -description: Middleware example with Nuxt.js +title: Middleware +description: Exemple de middleware avec Nuxt.js github: middleware +livedemo: https://middleware.nuxtjs.org documentation: /guide/routing#middleware ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/nested-routes.md b/en/examples/nested-routes.md index fb04dd6d6..58e98804a 100644 --- a/en/examples/nested-routes.md +++ b/en/examples/nested-routes.md @@ -1,9 +1,7 @@ --- -title: Nested Routes (En) -description: Nested Routes example with Nuxt.js +title: Routes imbriquées +description: Exemple de routes imbriquées avec Nuxt.js github: nested-routes livedemo: https://nested-routes.nuxtjs.org -documentation: /guide/routing#nested-routes ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
\ No newline at end of file +documentation: /guide/routing#routes-imbriqu-es +--- \ No newline at end of file diff --git a/en/examples/plugins.md b/en/examples/plugins.md index 51725f6af..e3571041a 100644 --- a/en/examples/plugins.md +++ b/en/examples/plugins.md @@ -1,9 +1,7 @@ --- -title: Plugins (En) -description: Using external modules and plugins with nuxt.js +title: Plugins +description: Exemple d'utilisation de modules externes et de plugins avec Nuxt.js github: plugins-vendor livedemo: https://plugins-vendor.nuxtjs.org documentation: /guide/plugins ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/routes-transitions.md b/en/examples/routes-transitions.md index b7640076a..1d3fdaec1 100644 --- a/en/examples/routes-transitions.md +++ b/en/examples/routes-transitions.md @@ -1,10 +1,8 @@ --- -title: Routes transitions (En) -description: Routes transitions example with Nuxt.js +title: Transitions de routes +description: Exemple de transitions de routes avec Nuxt.js github: routes-transitions youtube: https://www.youtube.com/embed/RIXOzJWFfc8 livedemo: https://routes-transitions.nuxtjs.org documentation: /guide/routing#transitions ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/seo-html-head.md b/en/examples/seo-html-head.md index 3df7e1d01..d9f54b6a0 100644 --- a/en/examples/seo-html-head.md +++ b/en/examples/seo-html-head.md @@ -1,9 +1,7 @@ --- -title: SEO HTML Head (En) -description: SEO HTML Head example with Nuxt.js +title: Entête HTML SEO HTML +description: Exemple d'entête HTML pour la SEO avec Nuxt.js github: head-elements livedemo: https://head-elements.nuxtjs.org documentation: /guide/views#html-head ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/testing.md b/en/examples/testing.md index 80bdd2d13..e0328cec9 100644 --- a/en/examples/testing.md +++ b/en/examples/testing.md @@ -1,8 +1,6 @@ --- -title: Testing (En) -description: Testing example with Nuxt.js +title: Tests +description: Exemple de test unitaire avec Nuxt.js github: with-ava documentation: /guide/development-tools#end-to-end-testing ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file diff --git a/en/examples/vuex-store.md b/en/examples/vuex-store.md index 70f39479c..11542bc12 100644 --- a/en/examples/vuex-store.md +++ b/en/examples/vuex-store.md @@ -1,9 +1,7 @@ --- -title: Vuex Store (En) -description: Vuex Store example with Nuxt.js +title: Store Vuex +description: Exemple d'utilisation du store Vuex avec Nuxt.js github: vuex-store livedemo: https://vuex-store.nuxtjs.org documentation: /guide/vuex-store ---- - -⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !
+--- \ No newline at end of file