From 14b8fe4013bdce1a26c9238c6c2d01f94a125540 Mon Sep 17 00:00:00 2001 From: MachinisteWeb Date: Fri, 16 Mar 2018 09:01:12 +0100 Subject: [PATCH 1/6] Update nuxt Signed-off-by: MachinisteWeb --- fr/api/configuration-build.md | 2 +- fr/api/configuration-env.md | 42 +++++------ fr/api/configuration-render.md | 2 + fr/api/configuration-router.md | 49 ++++++++----- fr/api/context.md | 4 +- fr/examples/auth-external-jwt.md | 118 +++++++++++++++++++++++++++++++ fr/faq/jsx.md | 2 +- fr/guide/development-tools.md | 70 ++++++++++++++---- fr/guide/menu.json | 2 +- fr/guide/vuex-store.md | 30 +++++++- fr/lang.json | 2 +- 11 files changed, 265 insertions(+), 58 deletions(-) create mode 100644 fr/examples/auth-external-jwt.md diff --git a/fr/api/configuration-build.md b/fr/api/configuration-build.md index 719c28e65..a71339e7d 100644 --- a/fr/api/configuration-build.md +++ b/fr/api/configuration-build.md @@ -9,7 +9,7 @@ description: Nuxt.js vous permet de personnaliser la configuration webpack pour ## analyze -> Nuxt.js utilise [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyze) pour vous permettre de visualiser vos paquetages (« bundles ») et les optimiser. +> Nuxt.js utilise [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) pour vous permettre de visualiser vos paquetages (« bundles ») et les optimiser. - Type : `Boolean` ou `Object` - Par défaut : `false` diff --git a/fr/api/configuration-env.md b/fr/api/configuration-env.md index 50b5576ed..4de551d41 100644 --- a/fr/api/configuration-env.md +++ b/fr/api/configuration-env.md @@ -1,15 +1,15 @@ --- -title: "API: The env Property" -description: Share environment variables between client and server. +title: "API : La propriété env" +description: Partager les variables d'environnement entre client et serveur. --- -# The env Property (En) +# La propriété env -- Type: `Object` +- Type : `Object` -> Nuxt.js lets you create environment variables that will be shared for the client and server-side. +> Nuxt.js vous permet de créer des variables d'environnement qui seront partagées entre le côté client et serveur. -

⚠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 !

Example (`nuxt.config.js`):

+Exemple (`nuxt.config.js`) : ```js module.exports = { @@ -19,18 +19,19 @@ module.exports = { } ``` -This lets me create a `baseUrl` property that will be equal to the `BASE_URL` environment variable if defined, otherwise, equal to `http://localhost:3000`. +Cela me permet de créer une propriété `baseUrl` qui sera égale à la variable d'environnement `BASE_URL` si définie, sinon à `'http://localhost:3000'`. -Then, I can access my `baseUrl` variable with 2 ways: +Puis, je peux accéder à ma variable `baseUrl` de deux manières : -1. Via `process.env.baseUrl` -2. Via `context.env.baseUrl`, see [context api](/api/context) +1. Via `process.env.baseUrl`. +2. Via `context.env.baseUrl`, voir l'[API context](/api/context). -You can use the `env` property for giving public token for example. +Vous pouvez utiliser la propriété `env` pour fournir un jeton public par exemple. -For the example above, we can use it to configure [axios](https://github.com/mzabriskie/axios). +Nous pouvons utiliser l'exemple ci-dessus pour configurer [axios](https://github.com/mzabriskie/axios). + +`plugins/axios.js` : -`plugins/axios.js`: ```js import axios from 'axios' @@ -39,21 +40,22 @@ export default axios.create({ }) ``` -Then, in your pages, you can import axios like this: `import axios from '~/plugins/axios'` +Puis, dans vos pages, vous pouvez importer axios ainsi : `import axios from '~/plugins/axios'` ## process.env == {} -Note that nuxt uses webpack's `definePlugin` to define the environmental variable. This means that, the actual `process` or `process.env` from node is not available and is not defined. Each of the env properties defined in nuxt.config.js is individually mapped to process.env.xxxx and converted during compilation. -Meaning, `console.log(process.env)` will output `{}` but `console.log(process.env.you_var)` will still output your value. When webpack compiles your code, it replaces all instances of `process.env.your_var` to the value you've set it to. ie: `env.test = 'testing123'`. If you use `process.env.test` in your code somewhere, it is actually translated to 'testing123'. +Notez que Nuxt utilise le `definePlugin` de webpack pour définir une variable d'environnement. Cela signifie que l'actuel `process` ou `process.env` de Node.js n'est ni accessible ni défini. Chacune des propriétés de `env` définie dans nuxt.config.js est individuellement associée à `process.env.xxxx` et convertie pendant la compilation. + +Cela signifie que `console.log(process.env)` affichera `{}` mais `console.log(process.env.you_var)` va tout de même afficher votre valeur. Quand webpack compile votre code, il remplace toutes les instances de `process.env.your_var` par la valeur qui lui est affectée. Par ex. : `env.test = 'testing123'`. Si vous utilisez `process.env.test` quelque part dans votre code, il sera transformé en 'testing123'. + +avant -before ``` if (process.env.test == 'testing123') ``` -after +après + ``` if ('testing123' == 'testing123') ``` - - diff --git a/fr/api/configuration-render.md b/fr/api/configuration-render.md index 30a2b255f..a3f4b66a6 100644 --- a/fr/api/configuration-render.md +++ b/fr/api/configuration-render.md @@ -33,6 +33,8 @@ It is recommended to not use this option as Nuxt.js is already providing best SS - Type: `object` - Default: `{ weak: true }` +To disable etag for pages set `etag: false` + See [etag](https://www.npmjs.com/package/etag) docs for possible options. ### gzip diff --git a/fr/api/configuration-router.md b/fr/api/configuration-router.md index f66435d9e..4979a37b6 100644 --- a/fr/api/configuration-router.md +++ b/fr/api/configuration-router.md @@ -142,28 +142,39 @@ module.exports = { The `scrollBehavior` option lets you define a custom behavior for the scroll position between the routes. This method is called every time a page is rendered. By default, the scrollBehavior option is set to: + ```js -const scrollBehavior = (to, from, savedPosition) => { - // savedPosition is only available for popstate navigations. +const scrollBehavior = function (to, from, savedPosition) { + // if the returned position is falsy or an empty object, + // will retain current scroll position. + let position = false + + // if no children detected + if (to.matched.length < 2) { + // scroll to the top of the page + position = { x: 0, y: 0 } + } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { + // if one of the children has scrollToTop option set to true + position = { x: 0, y: 0 } + } + + // savedPosition is only available for popstate navigations (back button) if (savedPosition) { - return savedPosition - } else { - let position = {} - // if no children detected - if (to.matched.length < 2) { - // scroll to the top of the page - position = { x: 0, y: 0 } - } - else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { - // if one of the children has scrollToTop option set to true - position = { x: 0, y: 0 } - } - // if link has anchor, scroll to anchor by returning the selector - if (to.hash) { - position = { selector: to.hash } - } - return position + position = savedPosition } + + return new Promise(resolve => { + // wait for the out transition to complete (if necessary) + window.$nuxt.$once('triggerScroll', () => { + // coords will be used if no selector is provided, + // or if the selector didn't match any element. + if (to.hash && document.querySelector(to.hash)) { + // scroll to anchor by returning the selector + position = { selector: to.hash } + } + resolve(position) + }) + }) } ``` diff --git a/fr/api/context.md b/fr/api/context.md index 2fd1f5c50..766158b85 100644 --- a/fr/api/context.md +++ b/fr/api/context.md @@ -10,8 +10,8 @@ Liste de toutes les propriétés disponibles dans `context` : | Propriété | Type | Disponibilité | Description | |------------------------|------------------------------------------------------------------------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `app` | Instance racine de Vue | Client et serveur | L'instance racine de Vue qui inclue tous vos plugins. Par exemple, en utilisant `axios`, vous avez accès à `$axios` à travers `context.app.$axios`. | -| `isClient` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si le rendu est effectué côté client. | -| `isServer` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si le rendu est effectué côté serveur. | +| `isClient` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si le rendu est effectué côté client (_déprécié._ utilisez `process.client`). | +| `isServer` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si le rendu est effectué côté serveur (_déprécié._ utilisez `process.server`). | | `isStatic` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si l'application est générée (via `nuxt generate`). | | `isDev` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si vous êtes en mode développement, ceci peut-être utile pour mettre des données en cache en production. | | `isHMR` | `Boolean` | Client et serveur | Valeur booléenne vous permettant de savoir si les méthodes et middlewares sont appelés depuis le système de rechargement à chaud des modules webpack (*seule sur la partie cliente en mode développement*) | diff --git a/fr/examples/auth-external-jwt.md b/fr/examples/auth-external-jwt.md new file mode 100644 index 000000000..a233db626 --- /dev/null +++ b/fr/examples/auth-external-jwt.md @@ -0,0 +1,118 @@ +--- +title: API d'authentification externe (JWT) +description: Exemple d'authentification avec le service d'API externe (jsonwebtoken) avec Nuxt.js +github: auth-jwt +code: https://github.com/ahadyekta/nuxt-auth-external-jwt +--- + +# Documentation + +Dans l'exemple auth-routes l'API et le site Nuxt se lancent ensemble et utilisent la même instance serveur Node.js. Cependant, il est parfois mieux de travailler avec une API externe avec jsonWebToken. Cela sera expliqué simplement à travers cet exemple. + +## Structure + +Puisque Nuxt.js fournit à la fois le rendu client et serveur ainsi qu'un cookie différent entre le navigateur et le serveur Node.js, nous devons fournir un jeton de donnée qui puisse être accessible par les deux parties. + +### Pour le rendu serveur + +Nous devons sauvegarder le jeton dans un cookie de session après connexion pour qu'il puisse être récupéré via `req.headers.cookie` par les fichiers middlewares, la fonction `nuxtServerInit` ou tout ce qui a accès à `req`. + +### Pour le rendu client + +Nous actons directement le jeton dans le store, aussi longtemps que la page n'est pas fermée ou rechargée, nous avons le jeton. + +Tout d'abord, installons les dépendances : + +```bash +npm install js-cookie --save +npm install cookieparser --save +``` + +## Page de connexion + +À l'intérieur du dossier des pages créez un fichier `login.vue` et dans ce fichier, dans la partie script, ajoutez : + +```js +import Cookie from 'js-cookie' + +export default { + middleware: 'notAuthenticated', + methods: { + postLogin () { + setTimeout(() => { + const auth = { + accessToken: 'someStringGotFromApiServiceWithAjax' + } + this.$store.commit('update', auth) // muter `auth` dans le store pour le rendu client + Cookie.set('auth', auth) // sauver le jeton dans un cookie pour le rendu serveur + this.$router.push('/') + }, 1000) + } + } +} +``` + +> Note : nous simulerons la requête asynchrone avec un délai. + +## Utiliser le store + +Après cela modifiez `index.js` dans le dossier `store` comme ci-dessous : + +```javascript +import Vuex from 'vuex' + +var cookieparser = require('cookieparser') + +const createStore = () => { + return new Vuex.Store({ + state: { + auth: null + }, + mutations: { + update (state, data) { + state.auth = data + } + }, + actions: { + nuxtServerInit ({ commit }, { req }) { + let accessToken = null + if (req.headers.cookie) { + var parsed = cookieparser.parse(req.headers.cookie) + accessToken = JSON.parse(parsed.auth) + } + commit('update', accessToken) + } + } + }) +} + +export default createStore +``` + +> Note : la fonction `nuxtServerInit` s'exécute seulement dans chaque rendu côté serveur. Nous l'utilisons pour muter le cookie de session du navigateur dans le store. Nous pouvons récupérer le cookie de session du navigateur avec `req.headers.cookie` et l'analyser en utilisant `cookieparser`. + +## Authentification vérifiée via middlewares + +Nous pouvons vérifier le store pour obtenir un accès au jeton sur toutes les pages qui demandent un accès limité. Dans le dossier des middlewares nous créons un fichier `authenticated.js` : + +```javascript +export default function ({ store, redirect }) { + // Si l'utilisateur n'est pas authentifié + if (!store.state.auth) { + return redirect('/login') + } +} +``` + +et dans le dossier des middlewares créez un fichier `notAuthenticated.js` pour la page de connexion : + +```javascript +export default function ({ store, redirect }) { + // Si l'utilisateur est authentifié, aller à la page d'accueil + if (store.state.auth) { + return redirect('/') + } +} +``` + +> Note : utilisez le middleware `authenticated.js` pour les pages qui ont besoin d'une authentification et le middleware `notAuthenticated.js` à l'intérieur des pages de type connexion / inscriptions, etc. diff --git a/fr/faq/jsx.md b/fr/faq/jsx.md index 03ef07dcc..b9f9ab7df 100644 --- a/fr/faq/jsx.md +++ b/fr/faq/jsx.md @@ -5,7 +5,7 @@ description: Comment utiliser JSX avec Nuxt.js ? # Comment utiliser JSX ? -Nuxt.js utilise le preset [babel-preset-vue-app](https://github.com/vuejs/babel-preset-vue-app) officiel comme configuration par défaut afin de pouvoir utiliser JSX dans vos composants. +Nuxt.js utilise le [babel-preset-vue-app](https://github.com/vuejs/babel-preset-vue-app) officiel comme configuration par défaut afin de pouvoir utiliser JSX dans vos composants. Vous pouvez utiliser JSX dans la méthode `render` de vos composants : diff --git a/fr/guide/development-tools.md b/fr/guide/development-tools.md index 78547716b..e64067fdb 100644 --- a/fr/guide/development-tools.md +++ b/fr/guide/development-tools.md @@ -117,14 +117,16 @@ npm test jsdom a certaines limitations parce qu'il n'utilise pas de navigateur. Cependant, cela couvrira la plupart de nos tests. Si vous souhaitez utiliser un navigateur pour tester votre application, vous pouvez consulter [Nightwatch.js](http://nightwatchjs.org). -## ESLint +## ESLint et Prettier -> ESLint est un excellent outil pour garder votre code propre. +> [ESLint](http://eslint.org) est un excellent outil pour garder votre code propre. -Vous pouvez ajouter [ESLint](http://eslint.org) assez facilement avec Nuxt.js. Ajouter les dépendances npm : +> [Prettier](prettier.io) is a very popular code formatter + +Vous pouvez ajouter ESLint assez facilement avec Nuxt.js. Ajouter les dépendances npm : ```bash -npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard eslint-plugin-import eslint-plugin-node +npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier ``` Puis, configurez ESLint via un fichier `.eslintrc.js` à la racine de votre projet : @@ -132,36 +134,80 @@ Puis, configurez ESLint via un fichier `.eslintrc.js` à la racine de votre proj ```js module.exports = { root: true, - parser: 'babel-eslint', env: { browser: true, node: true }, - extends: 'standard', + parserOptions: { + parser: 'babel-eslint' + }, + extends: [ + "eslint:recommended", + // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention + // préférer utiliser `plugin:vue/strongly-recommended` ou `plugin:vue/recommended` pour des règles stictes. + "plugin:vue/recommended", + "plugin:prettier/recommended" + ], // required to lint *.vue files plugins: [ - 'html' + 'vue' ], // add your custom rules here - rules: {}, - globals: {} + rules: { + "semi": [2, "never"], + "no-console": "off", + "vue/max-attributes-per-line": "off", + "prettier/prettier": ["error", { "semi": false }] + } } ``` -Ensuite, vous pouvez ajouter un script `lint` à `package.json` : +Ensuite, vous pouvez ajouter les scripts `lint` et `lintfix` au `package.json` : ```js "scripts": { - "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." + "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", + "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." } ``` -Vous pouvez alors lancer : +Vous pouvez alors lancer `lint` pour simplement vérifier les erreurs : ```bash npm run lint ``` +or `lintfix` to also fix those which are doable + +```bash +npm run lintfix +``` + ESLint va linter tous vos fichiers JavaScript et Vue sauf ceux ignorés par `.gitignore`. +Il est également recommandé d'activer ESLint en mode rechargement à chaud via webpack. De cette manière ESLint va s'exécuter au moment de la sauvegarde pendant le `npm run dev`. Ajoutez simplement le code suivant à votre `nuxt.config.js` : + +``` +... + /* + ** Configuration de build + */ + build: { + /* + ** Vous pouvez étendre la configuration webpack ici + */ + extend(config, ctx) { + // Exécuter ESLint lors de la sauvegarde + if (ctx.isDev && ctx.isClient) { + config.module.rules.push({ + enforce: "pre", + test: /\.(js|vue)$/, + loader: "eslint-loader", + exclude: /(node_modules)/ + }) + } + } + } +``` +

Une bonne pratique est également d'ajouter `"precommit": "npm run lint"` dans `package.json` afin de linter votre code automatiquement avant de l'acter.

diff --git a/fr/guide/menu.json b/fr/guide/menu.json index c59e88ece..3d224292e 100644 --- a/fr/guide/menu.json +++ b/fr/guide/menu.json @@ -117,7 +117,7 @@ "to": "/development-tools", "name": "Outils de développement", "contents": [ { "to": "#tests-de-bout-en-bout", "name": "Tests de bout en bout" }, - { "to": "#eslint", "name": "ESLint" } + { "to": "#eslint-et-prettier", "name": "ESLint et Prettier" } ] } ] diff --git a/fr/guide/vuex-store.md b/fr/guide/vuex-store.md index 077751cc6..c60c7afa0 100644 --- a/fr/guide/vuex-store.md +++ b/fr/guide/vuex-store.md @@ -165,6 +165,26 @@ export default { ``` +> La méthode module fonctionne également pour les définitions de premier niveau sans implémenter de sous-répertoire dans le dossier `store` + +Exemple pour l'état ; créer un fichier `store/state.js` et ajouter ceci + +```js +export default { + counter: 0 +} +``` + +Et les mutations correspondantes peuvent être dans le fichier `store/mutations.js` + +```js +export default { + increment (state) { + state.counter++ + } +} +``` +
Vous pouvez également avoir des modules en exportant une instance de store vous devrez les ajouter manuellement sur votre store.
### Plugins @@ -213,6 +233,14 @@ actions: { > Si vous utilisez le mode _Modules_ du store Vuex, seul le module principal (dans `store/index.js`) recevra cette action. Vous devrez chainer vos actions de module à partir de là. -Le contexte est fourni par `nuxtServerInit` comme deuxième argument. C'est le même que pour les méthodes `data` et `fetch` excepté que `context.redirect()` et `context.error()` sont omis. +Le [contexte](/api/context) est fourni par `nuxtServerInit` comme deuxième argument. C'est le même que pour les méthodes `data` et `fetch`. > Note : Les actions `nuxtServerInit` asynchrones doivent retourner une promesse pour permettre au serveur `nuxt` de les attendre. + +```js +actions: { + async nuxtServerInit({ dispatch }) { + await dispatch('core/load') + } +} +``` diff --git a/fr/lang.json b/fr/lang.json index 34349a8b2..5d055eef3 100644 --- a/fr/lang.json +++ b/fr/lang.json @@ -1,6 +1,6 @@ { "iso": "fr", - "docVersion": "1.3.0", + "docVersion": "1.4.0", "links": { "api": "API", "blog": "Blog", From 60994489d5be56fb8127e318c63930af0f526e2a Mon Sep 17 00:00:00 2001 From: MachinisteWeb Date: Fri, 27 Apr 2018 16:10:00 +0200 Subject: [PATCH 2/6] Hook or Tapable plugin ?! Signed-off-by: MachinisteWeb --- en/api/components-no-ssr.md | 6 +++--- en/api/internals-builder.md | 17 ++++++++--------- en/api/internals-generator.md | 24 +++++++++++------------- en/api/internals-renderer.md | 16 +++++++--------- 4 files changed, 29 insertions(+), 34 deletions(-) diff --git a/en/api/components-no-ssr.md b/en/api/components-no-ssr.md index 2fedd854e..1be81493c 100644 --- a/en/api/components-no-ssr.md +++ b/en/api/components-no-ssr.md @@ -9,7 +9,7 @@ description: Skip component rendering on server side(rendering), and display pla **Props**: - placeholder: `string` - - Use a text as placeholder until is mounted on client-side. + - Use a text as placeholder until `` is mounted on client-side. ```html