diff --git a/nuxtjs.org/content/fr/.1.examples/async-data.md b/nuxtjs.org/content/fr/.1.examples/async-data.md new file mode 100644 index 000000000..7843873aa --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/async-data.md @@ -0,0 +1,8 @@ +--- +title: Données asynchrones +description: Exemple de données asynchrones avec Nuxt.js +github: async-data +documentation: /docs/2.x/features/data-fetching#async-data +category: advanced +position: 41 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/auth-external-jwt.md b/nuxtjs.org/content/fr/.1.examples/auth-external-jwt.md new file mode 100644 index 000000000..bed554e4d --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/auth-external-jwt.md @@ -0,0 +1,153 @@ +--- +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 +category: advanced +position: 43 +--- + +# 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. + +## Module officiel `auth-module` + +Si vous souhaitez implémenter un flux d'authentification complexe, par exemple OAuth2, nous suggérons d'utiliser le module officiel [`auth-module`](https://github.com/nuxt-community/auth-module) + +## Official `auth-module` + +If you want to implement complex authentication flows, for example OAuth2, we suggest using the official [`auth-module`](https://github.com/nuxt-community/auth-module) + +## 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 +const Cookie = process.client ? require('js-cookie') : undefined + +export default { + middleware: 'notAuthenticated', + methods: { + postLogin() { + setTimeout(() => { + // nous simulons la requête asynchrone avec un timeout. + const auth = { + accessToken: 'uneChaineObtenueDuServiceApiAVecAjax' + } + this.$store.commit('setAuth', 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' + +const cookieparser = process.server ? require('cookieparser') : undefined + +const createStore = () => { + return new Vuex.Store({ + state: () => ({ + auth: null + }), + mutations: { + setAuth(state, auth) { + state.auth = auth + } + }, + actions: { + nuxtServerInit({ commit }, { req }) { + let auth = null + if (req.headers.cookie) { + const parsed = cookieparser.parse(req.headers.cookie) + try { + auth = JSON.parse(parsed.auth) + } catch (err) { + // aucun cookie valide trouvé + } + } + commit('setAuth', auth) + } + } + }) +} + +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` pour les pages nécessitant une authentification et utilisez le middleware `notAuthenticated` pour les pages login/register et similaires. + +## Déconnecter l'utilisateur + +Enfin pour laisser l'utilisateur pouvoir se déconnecter du système, nous pouvons retirer le cookie : + +```javascript +const Cookie = process.client ? require('js-cookie') : undefined + +export default { + methods: { + logout() { + // Un code sera également requis pour invalider le cookie JWT sur une API externe + Cookie.remove('auth') + this.$store.commit('setAuth', null) + } + } +} +``` + +> Note: se référer à la méthode en utilisant @click="logout" diff --git a/nuxtjs.org/content/fr/.1.examples/auth-routes.md b/nuxtjs.org/content/fr/.1.examples/auth-routes.md new file mode 100644 index 000000000..9f066eea5 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/auth-routes.md @@ -0,0 +1,230 @@ +--- +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 +category: advanced +position: 42 +--- + +# Documentation + +> Nuxt.js peut être utilisé pour créer facilement des routes authentifiées. + +## Module officiel `auth-module` + +Si vous souhaitez implémenter des flux d'authentification complexes, par exemple OAuth2, nous vous suggérons d'utiliser la fonction officielle [`auth-module`](https://github.com/nuxt-community/auth-module) + +## Avec Express et Sessions + +Si vous souhaitez implémenter un flux d'authentification complexe, par exemple OAuth2, nous suggérons d'utiliser le module officiel [`auth-module`](https://github.com/nuxt-community/auth-module) + +## Utilisation de Express et des sessions + +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 : + +```bash +yarn add express express-session body-parser whatwg-fetch +``` + +_Nous parlerons de `whatwg-fetch` plus loin._ + +Puis nous créons notre `server.js` : + +```js +const { Nuxt, Builder } = require('nuxt') +const bodyParser = require('body-parser') +const session = require('express-session') +const app = require('express')() + +// Analyse du corps de requête pour y accéder via `req.body` +app.use(bodyParser.json()) + +// Mise en place de sessions pour y accéder via `req.session` +app.use( + session({ + secret: 'cle-super-secrete', + resave: false, + saveUninitialized: false, + cookie: { maxAge: 60000 } + }) +) + +// 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' } + return res.json({ username: 'demo' }) + } + res.status(401).json({ error: 'Mauvaise authentification' }) +}) + +// 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 }) +}) + +// Nous instancions Nuxt.js avec les options +const isProd = process.env.NODE_ENV === 'production' +const nuxt = new Nuxt({ dev: !isProd }) +// Pas de build en production +if (!isProd) { + const builder = new Builder(nuxt) + builder.build() +} +app.use(nuxt.render) +app.listen(3000) +console.log('Le serveur écoute sur http://localhost:3000') +``` + +Et nous modifions nos scripts dans `package.json` : + +```json +// ... +"scripts": { + "dev": "node server.js", + "build": "nuxt build", + "start": "cross-env NODE_ENV=production node server.js" +} +// ... +``` + +Remarque: 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 + +Nous avons besoin d'un état global pour informer notre application si l'utilisateur reste **connecté entre les pages**. + +Pour laisser Nuxt.js utiliser Vuex, nous créons un fichier `store/index.js`: + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +// Polyfill pour `window.fetch()` +require('whatwg-fetch') + +const store = new Vuex.Store({ + state: () => ({ + authUser: null + }), + + mutations: { + SET_USER(state, user) { + state.authUser = user + } + }, + + actions: { + // ... + } +}) + +export default store +``` + +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. + +### Fonction nuxtServerInit() + +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` : + +```js +nuxtServerInit ({ commit }, { req }) { + if (req.session && req.session.authUser) { + commit('SET_USER', req.session.authUser) + } +} +``` + +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)). + +### L'action login() + +Nous ajoutons une action `login` qui sera appelée à partir de nos composants de pages pour connecter l'utilisateur : + +```js +login ({ commit }, { username, password }) { + return fetch('/api/login', { + // Envoie les cookies client au serveur + credentials: 'same-origin', + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + username, + password + }) + }) + .then((res) => { + if (res.status === 401) { + throw new Error('Mauvaise authentification') + } else { + return res.json() + } + }) + .then((authUser) => { + commit('SET_USER', authUser) + }) +} +``` + +### La méthode logout() + +```js +logout ({ commit }) { + return fetch('/api/logout', { + // Envoie les cookies au serveur + credentials: 'same-origin', + method: 'POST' + }) + .then(() => { + commit('SET_USER', null) + }) +} +``` + +## 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. + +### Rediriger l'utilisateur s'il n'est pas connecté + +Ajoutons une route `/secret` dont le contenu ne peut être vu que par un utilisateur connecté : + +```html + + + +``` + +Nous pouvons voir dans la méthode `fetch` que nous appelons `redirect('/')` lorsque notre utilisateur n'est pas connecté. diff --git a/nuxtjs.org/content/fr/.1.examples/cached-components.md b/nuxtjs.org/content/fr/.1.examples/cached-components.md new file mode 100644 index 000000000..14ba71f02 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/cached-components.md @@ -0,0 +1,6 @@ +--- +title: Composants en cache +description: Exemple de composants mis en cache avec Nuxt.js +github: cached-components +documentation: /api/configuration-cache +--- diff --git a/nuxtjs.org/content/fr/.1.examples/custom-loading.md b/nuxtjs.org/content/fr/.1.examples/custom-loading.md new file mode 100644 index 000000000..b8a16198e --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/custom-loading.md @@ -0,0 +1,10 @@ +--- +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 +menu: Custom Loading +category: customization +position: 21 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/custom-page-loading.md b/nuxtjs.org/content/fr/.1.examples/custom-page-loading.md new file mode 100644 index 000000000..28c756177 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/custom-page-loading.md @@ -0,0 +1,9 @@ +--- +title: Page de chargement personnalisé +description: Exemple de page de chargement personnalisé avec Nuxt.js +github: custom-page-loading +livedemo: https://custom-loading.nuxtjs.org +documentation: /api/configuration-loading +category: customization +position: 22 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/custom-routes.md b/nuxtjs.org/content/fr/.1.examples/custom-routes.md new file mode 100644 index 000000000..3806bd101 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/custom-routes.md @@ -0,0 +1,9 @@ +--- +title: Routes personnalisées +description: Exemple de routes personnalisées avec Nuxt.js +github: custom-routes +livedemo: https://custom-routes.nuxtjs.org +documentation: /docs/2.x/directory-structure/pages#dynamic-pages +category: customization +position: 23 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/global-css.md b/nuxtjs.org/content/fr/.1.examples/global-css.md new file mode 100644 index 000000000..01e2da1d6 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/global-css.md @@ -0,0 +1,9 @@ +--- +title: CSS global +description: Exemple de CSS global avec Nuxt.js +github: global-css +livedemo: https://global-css.nuxtjs.org +documentation: /api/configuration-css +category: customization +position: 24 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/hello-world.md b/nuxtjs.org/content/fr/.1.examples/hello-world.md new file mode 100644 index 000000000..e98bbd978 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/hello-world.md @@ -0,0 +1,11 @@ +--- +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: /docs/2.x/get-started/installation#commencer-depuis-z-ro +category: essentials +position: 1 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/i18n.md b/nuxtjs.org/content/fr/.1.examples/i18n.md new file mode 100644 index 000000000..dc973fa93 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/i18n.md @@ -0,0 +1,13 @@ +--- +title: Internationalisation (i18n) +description: Exemple d'internationalisation (i18n) avec Nuxt.js +github: i18n +livedemo: https://i18n.nuxtjs.org +documentation: /docs/2.x/directory-structure/middleware +category: advanced +position: 45 +--- + +## Module officiel `i18n-module` + +Si vous souhaitez implémenter un flux d'authentification complexe, par exemple OAuth2, nous vous suggérons d'utiliser le module officiel [`i18n-module`](https://github.com/nuxt-community/nuxt-i18n/) diff --git a/nuxtjs.org/content/fr/.1.examples/layouts.md b/nuxtjs.org/content/fr/.1.examples/layouts.md new file mode 100644 index 000000000..d6a66be7a --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/layouts.md @@ -0,0 +1,10 @@ +--- +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: docs/2.x/concepts/views#mises-en-page +category: customization +position: 25 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/middleware.md b/nuxtjs.org/content/fr/.1.examples/middleware.md new file mode 100644 index 000000000..44ecd7aec --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/middleware.md @@ -0,0 +1,8 @@ +--- +title: Middleware +description: Exemple de middleware avec Nuxt.js +github: middleware +documentation: /docs/2.x/directory-structure/middleware +category: customization +position: 26 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/named-views.md b/nuxtjs.org/content/fr/.1.examples/named-views.md new file mode 100644 index 000000000..6347ec980 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/named-views.md @@ -0,0 +1,9 @@ +--- +title: Vues nommées +description: Exemple de vue nommées avec Nuxt.js +github: named-views +livedemo: https://named-views.nuxtjs.org +documentation: /docs/2.x/features/file-system-routing#named-views +category: customization +position: 27 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/nested-routes.md b/nuxtjs.org/content/fr/.1.examples/nested-routes.md new file mode 100644 index 000000000..9669adc40 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/nested-routes.md @@ -0,0 +1,9 @@ +--- +title: Routes imbriquées +description: Exemple de routes imbriquées avec Nuxt.js +github: nested-routes +livedemo: https://nested-routes.nuxtjs.org +documentation: /docs/2.x/features/file-system-routing#routes-imbriqu-es +category: customization +position: 28 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/plugins.md b/nuxtjs.org/content/fr/.1.examples/plugins.md new file mode 100644 index 000000000..54b7d6b11 --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/plugins.md @@ -0,0 +1,9 @@ +--- +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 +category: customization +position: 29 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/routes-transitions.md b/nuxtjs.org/content/fr/.1.examples/routes-transitions.md new file mode 100644 index 000000000..9983b693d --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/routes-transitions.md @@ -0,0 +1,10 @@ +--- +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: /docs/2.x/features/file-system-routing +category: customization +position: 30 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/seo-html-head.md b/nuxtjs.org/content/fr/.1.examples/seo-html-head.md new file mode 100644 index 000000000..90fb0208e --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/seo-html-head.md @@ -0,0 +1,8 @@ +--- +title: Entête HTML SEO +description: Exemple d'entête HTML pour la SEO avec Nuxt.js +github: meta-info +documentation: docs/2.x/concepts/views#html-head +category: essentials +position: 2 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/testing.md b/nuxtjs.org/content/fr/.1.examples/testing.md new file mode 100644 index 000000000..bdb208a8a --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/testing.md @@ -0,0 +1,8 @@ +--- +title: Tests +description: Exemple de test unitaire avec Nuxt.js +github: with-ava +documentation: /guide/development-tools#end-to-end-testing +category: advanced +position: 46 +--- diff --git a/nuxtjs.org/content/fr/.1.examples/vuex-store.md b/nuxtjs.org/content/fr/.1.examples/vuex-store.md new file mode 100644 index 000000000..0bc882e8e --- /dev/null +++ b/nuxtjs.org/content/fr/.1.examples/vuex-store.md @@ -0,0 +1,9 @@ +--- +title: Store Vuex +description: Exemple d'utilisation du store Vuex avec Nuxt.js +github: vuex-store +livedemo: https://vuex-store.nuxtjs.org +documentation: /docs/2.x/directory-structure/store +category: advanced +position: 44 +--- diff --git a/nuxtjs.org/content/fr/.archives/api/$nuxt.md b/nuxtjs.org/content/fr/.archives/api/$nuxt.md new file mode 100644 index 000000000..8e7fad1a4 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/$nuxt.md @@ -0,0 +1,29 @@ +--- +title: "$nuxt: L'assistant NuxtJS" +description: $nuxt est un assistant conçu pour améliorer l'expérience utilisateur. +menu: $nuxt +category: utils +position: 50 +--- + +`$nuxt` est un assistant conçu pour améliorer l'expérience utilisateur. + +- `isOffline` + - Type: `Boolean` + - Description: `true` lorsque la connexion Internet de l'utilisateur se déconnecte +- `isOnline` + - Type: `Boolean` + - Description: L'opposé de `isOffline` + +Exemple: + +`layouts/default.vue`: + +```html + +``` diff --git a/nuxtjs.org/content/fr/.archives/api/components-client-only.md b/nuxtjs.org/content/fr/.archives/api/components-client-only.md new file mode 100644 index 000000000..06095687d --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/components-client-only.md @@ -0,0 +1,54 @@ +--- +title: 'API: Le composant ' +description: Rendre un composant uniquement côté client et afficher un texte d'espace réservé côté serveur. +menu: client-only +category: components +position: 44 +--- + +> Ce composant est utilisé pour rendre intentionnellement un composant uniquement côté client. Pour importer un composant uniquement sur le client, enregistrez-le dans un [plugin côté client uniquement](/guide/plugins#client-side-only). + +
+ +**Attention:** Si vous utilisez une version de Nuxt < `v2.9.0`, utiliser `` à la place de ``. + +
+ +**Propriétés**: + +- chaine prédéfinie : `string` + - Utiliser un texte comme chaine prédéfinie jusqu'à ce que `` soit monté côté client. + +```html + +``` + +**Slots**: + +- chaine prédéfinie : + - Utiliser un espace comme chaine prédéfinie jusqu'à ce que `` soit monté côté client. + +```html + +``` + +Ce composant est importé de [egoist/vue-client-only](https://github.com/egoist/vue-client-only). Merci [@egoist](https://github.com/egoist) ! diff --git a/nuxtjs.org/content/fr/.archives/api/components-nuxt-child.md b/nuxtjs.org/content/fr/.archives/api/components-nuxt-child.md new file mode 100644 index 000000000..f178da4a9 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/components-nuxt-child.md @@ -0,0 +1,86 @@ +--- +title: 'API: Le composant ' +description: Afficher la page courante. +menu: nuxt-child +category: components +position: 42 +--- + +> Ce composant est utilisé pour afficher les composants enfants dans une [route imbriquée](/guide/routing#nested-routes). + +Exemple: + +```bash +-| pages/ +---| parent/ +------| child.vue +---| parent.vue +``` + +Cette arborescence de fichiers va générer ces chemins : + +```js +;[ + { + path: '/parent', + component: '~/pages/parent.vue', + name: 'parent', + children: [ + { + path: 'child', + component: '~/pages/parent/child.vue', + name: 'parent-child' + } + ] + } +] +``` + +Pour afficher le composant `child.vue`, nous devons insérer `` à l'intérieur de `pages/parent.vue`: + +```html + +``` + +`` accepte `keep-alive` et `keep-alive-props`: + +```html + + + +
+ + + +
+``` + +> Les composants enfants peuvent également recevoir des propriétés comme un composant Vue standard. + +Pour voir un exemple, jetez un œil à l'exemple des [routes imbriquées](/examples/nested-routes). + +## Vue nommée + +> Introduite avec Nuxt v2.4.0 + +`` accepte la propriété `name` pour rendre la vue nommée : + +```html + +``` + +Pour voir un exemple, jetez un œil à l'exemple des [vues nommées](/examples/named-views). diff --git a/nuxtjs.org/content/fr/.archives/api/components-nuxt-link.md b/nuxtjs.org/content/fr/.archives/api/components-nuxt-link.md new file mode 100644 index 000000000..6ea63e61a --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/components-nuxt-link.md @@ -0,0 +1,50 @@ +--- +title: 'API: Le composant ' +description: Reliez les pages entre elles avec nuxt-link. +menu: nuxt-link +category: components +position: 43 +--- + +> Ce composant est utilisé pour fournir une navigation entre les composants de page et améliorer les performances grâce à la prélecture intelligente. + +Le composant `` est un élément essentiel de Nuxt. Il **doit être utiliser pour naviguer** à travers l'application, similaire au composant `` d'une application traditionnelle Vue. + +En effet, `` étend [``](https://router.vuejs.org/api/#router-link). Cela signifie qu'il prend les mêmes propriétés et peut être utilisé de la même manière. Lisez la [documentation de Vue Router](https://router.vuejs.org/api/#router-link) pour plus d'informations. + +Exemple (`pages/index.vue`): + +```html + +``` + +**Alias:** ``, ``, et `` + +> Ajoutés avec Nuxt.js v2.4.0 + +Pour améliorer la réactivité de vos applications Nuxt.js, lorsque le lien sera affiché dans la fenêtre, Nuxt.js récupèrera automatiquement le _code fractionnée_ de la page. Cette fonctionnalité est inspirée de [quicklink.js](https://github.com/GoogleChromeLabs/quicklink) par Google Chrome Labs. + +Pour désactiver la prélecture de la page liée, vous pouvez utiliser la propriété `no-prefetch`. Depuis Nuxt.js v2.10.0, vous pouvez également modifier la propriété `prefetch` à `false` : + +```html +About page not pre-fetched +About page not pre-fetched +``` + +Vous pouvez configurer globalement ce comportement avec [router.prefetchLinks](/api/configuration-router#prefetchlinks). + +Depuis Nuxt.js v2.10.0, si vous avez définie globalement [router.prefetchLinks](/api/configuration-router#prefetchlinks) à `false` mais que vous souhaitez pré-extraire un lien spécifique, vous pouvez utiliser la propriété`prefetch` : + +```html +About page pre-fetched +``` + +La propriété `prefetched-class` est également disponible pour personnaliser la classe ajoutée lorsque le code fractionnée de la page a été pré-lue. Assurez-vous de configurer cette fonctionnalité globalement avec [router.linkPrefetchedClass](/api/configuration-router#linkprefetchedclass). diff --git a/nuxtjs.org/content/fr/.archives/api/components-nuxt.md b/nuxtjs.org/content/fr/.archives/api/components-nuxt.md new file mode 100644 index 000000000..9bc52c72d --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/components-nuxt.md @@ -0,0 +1,57 @@ +--- +title: 'API: Le composant ' +description: Affichez les composants de la page dans une mise en page. +menu: nuxt +category: components +position: 41 +--- + +> Ce composant est utilisé uniquement dans les [mises en page](/guide/views#layouts) pour afficher les composants de la page. + +Exemple (`layouts/default.vue`): + +```html + +``` + +Pour voir un example, jetez un œil à [l'exemple de mise en page](/examples/layouts). + +**Propriétés**: + +- nuxtChildKey: `string` + - Cette propriété sera définie sur ``, utile pour effectuer des transitions à l'intérieur d'une page dynamique et de différentes routes. + - Par défaut: `$route.path` + +Il y a 3 façons de gérer les propriétés internes `key` de ``. + +1. `nuxtChildKey` propriété + +```html + +``` + +2. l'option `key` à l'intérieur des composants de la page : `string` ou `function` + +```js +export default { + key(route) { + return route.fullPath + } +} +``` + +- nom: `string` (_introduit avec Nuxt v2.4.0_) + - Cette propriété sera définie sur ``, utilisé pour rendre la vue nommée de la page du composant. + - Par défaut: `default` + +Pour voir un example, jetez un œil à [l'exemple de vue nommée](/examples/named-views). diff --git a/nuxtjs.org/content/fr/.archives/api/configuration-build.md b/nuxtjs.org/content/fr/.archives/api/configuration-build.md new file mode 100644 index 000000000..068faaaca --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/configuration-build.md @@ -0,0 +1,781 @@ +--- +title: 'API: La propriété build' +description: Nuxt.js vous permet de personnaliser la configuration de webpack pour créer votre application web comme vous le souhaitez. +menu: build +category: configuration +position: 101 +--- + +> Nuxt.js vous permet de personnaliser la configuration de webpack pour créer votre application web comme vous le souhaitez. + +## analyze + +> Nuxt.js utilise [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) pour vous permettre de visualiser vos paquets et comment les optimiser. + +- Type: `Boolean` ou `Object` +- Par défaut: `false` + +Si c'est un objet, voir les propriétés disponibles [ici](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin). + +Exemple (`nuxt.config.js`): + +```js +export default { + build: { + analyze: true, + // ou + analyze: { + analyzerMode: 'static' + } + } +} +``` + +
+ +**Info:** vous pouvez utiliser la commande `yarn nuxt build --analyze` ou `yarn nuxt build -a` pour construire votre application et lancer l'analyseur de paquet [http://localhost:8888](http://localhost:8888). Si vous n'utilisez pas `yarn`, vous pouvez exécuter la commande avec `npx`. + +
+ +## babel + +> Personnalisez la configuration Babel pour les fichiers JavaScript et Vue. `.babelrc` est ignoré par défaut. + +- Type: `Object` Voir les [options](https://github.com/babel/babel-loader#options) de `babel-loader` ainsi que les [options](https://babeljs.io/docs/en/options) de `babel` +- Par défaut: + + ```js + { + babelrc: false, + cacheDirectory: undefined, + presets: ['@nuxt/babel-preset-app'] + } + ``` + +Les cibles par défaut de [@nuxt/babel-preset-app](https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js) sont `ie: '9'` dans la version `client`, et `node: 'current'` dans la version `server`. + +### presets + +- Type: `Function` +- Argument: + 1. `Object`: { isServer: true | false } + 2. `Array`: + - le nom du préréglage `@nuxt/babel-preset-app` + - [`options`](https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app#options) de `@nuxt/babel-preset-app` + +**Remarque**: Les pré-réglages configurés dans `build.babel.presets` seront appliqués à la fois à la génération du client et du serveur. La cible sera fixée par Nuxt en conséquence (client/serveur). Si vous souhaitez configurer le préréglage différemment pour le client ou la version du serveur, veuillez utiliser `presets` comme fonction: + +> Nous **recommandons vivement** d'utiliser le pré-réglage par défaut au lieu de la personnalisation ci-dessous: + +```js +export default { + build: { + babel: { + presets({ isServer }, [ preset, options ]) { + // changer les options directement + options.targets = isServer ? ... : ... + options.corejs = ... + // ne retourne rien + } + } + } +} +``` + +Ou remplacez la valeur par défaut en renvoyant la liste complète des pré-réglages: + +```js +export default { + build: { + babel: { + presets({ isServer }, [preset, options]) { + return [ + [ + preset, + { + targets: isServer ? ... : ..., + ...options + } + ], + [ + // Autres pré-réglage + ] + ] + } + } + } +} +``` + +## cache + +- Type: `Boolean` +- Par défaut: `false` +- ⚠️ Expérimentale + +> Activer le cache [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin#options) et [cache-loader](https://github.com/webpack-contrib/cache-loader#cache-loader) + +## crossorigin + +- Type: `String` +- Par défaut: `undefined` + + Configurez l'attribut `crossorigin` sur les balises `` et ` + + +``` + +Ensuite, nous mettons à jour notre `nuxt.config.js` pour indiquer à Nuxt.js d'utiliser notre composant : + +```js +export default { + loading: '~/components/loading.vue' +} +``` diff --git a/nuxtjs.org/content/fr/.archives/api/configuration-mode.md b/nuxtjs.org/content/fr/.archives/api/configuration-mode.md new file mode 100644 index 000000000..6608c1ac5 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/configuration-mode.md @@ -0,0 +1,15 @@ +--- +title: 'API: La propriété mode' +description: Changer le mode nuxt par défaut +menu: mode +category: configuration +position: 117 +--- + +- Type: `string` + - Par défaut: `universal` + - Valeurs possibles: + - `'spa'`: Pas de rendu côté serveur (uniquement navigation côté client) + - `'universal'`: Application isomorphe (rendu côté serveur + navigation côté client) + +> Vous pouvez utiliser cette option pour changer le mode nuxt par défaut pour votre projet en utilisant `nuxt.config.js` diff --git a/nuxtjs.org/content/fr/.archives/api/configuration-modern.md b/nuxtjs.org/content/fr/.archives/api/configuration-modern.md new file mode 100644 index 000000000..371d81010 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/configuration-modern.md @@ -0,0 +1,48 @@ +--- +title: 'API: La propriété modern' +description: Créez et servez un bundle moderne +menu: modern +category: configuration +position: 118 +--- + +> Cette fonctionnalité est inspirée du [mode moderne vue-cli](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode) + +- Type: `String` or `Boolean` + - Par défaut: false + - Valeurs possibles: + - `'client'`: Servir les deux, le bundle moderne ` +``` + +### Exemple + +
+ +Nous allons utiliser le [module http](https://http.nuxtjs.org) officiel pour faire des requêtes HTTP. + +
+ +Récupérons un blog avec notre page d'accueil répertoriant nos articles: + +`pages/index.vue` + +```html + + + +``` + +Si vous allez directement sur [http://localhost:3000/](http://localhost:3000/), vous verrez directement la liste complète des articles qui ont été **rendus par le serveur** (idéal pour le référencement) . + +Screenshot 2019-03-11 at 23 04 57 + +
+ +Nuxt détectera intelligemment les données que vous avez mutées dans `fetch` et optimisera le JSON inclus dans le code HTML renvoyé. + +
+ +Maintenant, ajoutons la page `pages/posts/_id.vue` pour afficher une publication sur `/posts/:id`. + +`pages/posts/_id.vue` + +```html + + + +``` + +Lors de la navigation, vous devriez maintenant voir `"Fetching post #... "` côté client, et pas de chargement lors de l'actualisation d'un article (actualisation depuis le navigateur). + +fetch-nuxt3 + +
+ +Si le composant contient l'écouteur `fetch`, vous aurez également accès à `this.$fetch()` pour rappeler l'écouteur +`fetch` (`$fetchState.pending` deviendra à nouveau` true`). + +
+ +### Écoute des modifications de chaîne de requête + +L'écouteur `fetch` **n'est pas appelé** lors des changements de chaîne de requête par défaut. Pour surveiller les changements de requête, vous pouvez ajouter un observateur sur `$route.query` et appeler `$fetch`: + +```js +export default { + watch: { + '$route.query': '$fetch' + }, + async fetch() { + // Appelé également lors des modifications de requête + } +} +``` + +### Mise en cache + +Vous pouvez utiliser la directive `keep-alive` dans les composants `` et `` pour enregistrer les appels `fetch` sur les pages que vous avez déjà visitées: + +`layouts/default.vue` + +```html + +``` + +
+ +Vous pouvez également spécifier les [propriétés](https://vuejs.org/v2/api/#keep-alive) transmis à `` en +passant une propriété `keep-alive-props` au composant `` component.
+Exemple: `` pour ne conserver que 10 composants de page en mémoire. + +
+ +### Utilisation de l'écouteur `activated` + +Nuxt remplira directement `this.$fetchState.timestamp` (timestamp) du dernier appel `fetch` (ssr inclus). Vous pouvez utiliser cette propriété combinée avec l'écouteur `activated` pour ajouter un cache de 30 secondes à `fetch`: + +`pages/posts/_id.vue` + +```html + + + +``` + +La navigation vers la même page n'appellera pas `fetch` si le dernier appel `fetch` remonte à moins de 30 secondes. + +![fetch-keep-alive-nuxt](https://user-images.githubusercontent.com/904724/54164405-c6881d80-445c-11e9-94e0-366406270874.gif) + +## Nuxt <= 2.11 + +> La méthode fetch est utilisée pour remplir le store avant le rendu de la page, elle est similaire à la méthode `asyncData` sauf qu'elle ne définit pas les données du composant. + +- **Type:** `Function` + +La méthode `fetch`, _si définie_, est appelée à chaque fois avant de charger le composant (**uniquement pour les composants de page**). Elle sera appelée une fois côté serveur (lors de la première requête à l'application Nuxt) et côté client lors de la navigation vers d'autres routes. + +La méthode `fetch` reçoit l'object [`context`](/api/context) comme premier argument. Nous pouvons l'utiliser pour récupérer des données et remplir le store. Pour rendre la méthode `fetch` asynchrone, **renvoyer une promesse**, Nuxt.js attendra que la promesse soit résolue avant de restituer le composant. + +
+ +**Avertissement**: Vous **n'avez** pas accès à l'instance du composant via `this` avec`fetch` car elle s'appelle **avant d'initier** le composant. + +
+ +Exemple `pages/index.vue`: + +```html + + + +``` + +Vous pouvez également utiliser `async`/`await` pour rendre votre code plus propre: + +```html + + + +``` + +## Vuex + +Si vous souhaitez appeler une action du store, utilisez `store.dispatch` à l'intérieur de la méthode `fetch`, assurez-vous d'attendre la fin de l'action en utilisant `async`/`await`: + +```html + +``` + +`store/index.js` + +```js +// ... +export const actions = { + async GET_STARS({ commit }) { + const { data } = await axios.get('http://my-api/stars') + commit('SET_STARS', data) + } +} +``` + +## Écoute des changements de chaîne de requête + +Par défaut, la méthode `fetch` **n'est pas appelée** lors d'un changement de chaîne de requête. Si vous souhaitez modifier ce comportement, par exemple lors de la construction d'un composant de pagination, vous pouvez configurer les paramètres à écouter via la propriété `watchQuery` de votre composant de page. En savoir plus sur la [propriété `watchQuery`](/api/pages-watchquery). diff --git a/nuxtjs.org/content/fr/.archives/api/pages-head.md b/nuxtjs.org/content/fr/.archives/api/pages-head.md new file mode 100644 index 000000000..0e79568c4 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-head.md @@ -0,0 +1,50 @@ +--- +title: 'API : la méthode head' +description: Nuxt.js utilise vue-meta pour mettre à jour les entêtes et les attributs HTML de votre application. +menu: head +category: pages +position: 23 +--- + +> Nuxt.js utilise [vue-meta](https://github.com/nuxt/vue-meta) pour mettre à jour les entêtes et les attributs HTML de votre application. + +- **Type :** `Object` ou `Function` + +Utilisez la méthode `head` pour définir les balises d'entête HTML de la page courante. + +Les données de votre composant sont disponibles avec `this` au sein de la méthode `head`, vous pouvez définir des balises meta personnalisées avec les données de page. + +```html + + + +``` + +
+ +Info : Afin d'éviter les doublons quand vous utilisez un composant enfant, utilisez un identifiant unique à l'aide de la clé `hid`. En savoir [plus à ce propos](https://vue-meta.nuxtjs.org/api/#tagidkeyname). + +
diff --git a/nuxtjs.org/content/fr/.archives/api/pages-key.md b/nuxtjs.org/content/fr/.archives/api/pages-key.md new file mode 100644 index 000000000..7c61af798 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-key.md @@ -0,0 +1,23 @@ +--- +title: 'API: la propriété key' +description: Définir la propriété `key` du composant `` +menu: key +category: pages +position: 24 +--- + +> Définir la propriété `key` du composant `` + +- **Type:** `String` ou `Function` + +La propriété `key` est propagée dans ``, ce qui est utile pour effectuer des transitions à l'intérieur d'une page dynamique et d'une route différente. Des clés différentes entraînent le rerendering des composants de la page. + +Il y a plusieurs façons de définir key. Pour plus de détails, veuillez vous référer à la propriété `nuxtChildKey` du [composant nuxt](/api/components-nuxt). + +```js +export default { + key(route) { + return route.fullPath + } +} +``` diff --git a/nuxtjs.org/content/fr/.archives/api/pages-layout.md b/nuxtjs.org/content/fr/.archives/api/pages-layout.md new file mode 100644 index 000000000..ab8aa97da --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-layout.md @@ -0,0 +1,29 @@ +--- +title: 'API : la propriété layout' +description: Chaque fichier (premier niveau) dans le répertoire `layouts` créera un layout personnalisé accessible avec la propriété layout dans le composant page. +menu: layout +category: pages +position: 25 +--- + +> Chaque fichier (premier niveau) dans le répertoire `layouts` créera une mise en page personnalisée accessible avec la propriété `layout` dans le composant de page. + +- **Type :** `String` ou `Function` (par défaut : `'default'`) + +Utilisez la clé `layout` dans vos composants de page pour définir la mise en page à utiliser : + +```js +export default { + layout: 'blog', + // OU + layout(context) { + return 'blog' + } +} +``` + +Dans cet exemple, Nuxt.js inclura le fichier `layouts/blog.vue` comme mise en page pour ce composant de page. + +Voyez cela en action dans [cette vidéo de démonstration](https://www.youtube.com/watch?v=YOKnSTp7d38). + +Afin de comprendre comment les mises en page fonctionnent avec Nuxt.js, regardez la documentation sur les [Mises en page](/guide/views#mises-en-page). diff --git a/nuxtjs.org/content/fr/.archives/api/pages-loading.md b/nuxtjs.org/content/fr/.archives/api/pages-loading.md new file mode 100644 index 000000000..3d9754b84 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-loading.md @@ -0,0 +1,29 @@ +--- +title: 'API: la propriété loading' +description: La propriété `loading` vous permet de désactiver la barre de progression du chargement par défaut sur une page spécifique. +menu: loading +category: pages +position: 26 +--- + +> La propriété loading vous permet de désactiver la barre de progression du chargement par défaut sur une page spécifique. + +- **Type:** `Boolean` (défaut: `true`) + +Par défaut, Nuxt.js utilise son propre composant pour afficher une barre de progression entre les routes. + +Vous pouvez le désactiver ou le personnaliser globalement via l'[option loading](/api/configuration-loading), mais aussi le désactiver pour des pages spécifiques en définissant la propriété `loading` sur `false`: + +```html + + + +``` + +Vous pouvez trouver un exemple officiel en utilisant cette propriété [ici](/examples/custom-page-loading). diff --git a/nuxtjs.org/content/fr/.archives/api/pages-middleware.md b/nuxtjs.org/content/fr/.archives/api/pages-middleware.md new file mode 100644 index 000000000..1bc7dc90b --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-middleware.md @@ -0,0 +1,41 @@ +--- +title: 'API : la propriété middleware' +description: Définit le middleware pour une page spécifique de l'application. +menu: middleware +category: pages +position: 27 +--- + +- Type : `String` ou `Array` + - Type des éléments : `String` + +Définit le middleware pour une page spécifique de l'application. + +Exemple : + +`pages/secret.vue` : + +```html + + + +``` + +`middleware/authenticated.js` : + +```js +export default function ({ store, redirect }) { + // Si l'utilisateur n'est pas authentifié + if (!store.state.authenticated) { + return redirect('/login') + } +} +``` + +Pour en savoir plus sur les middlewares, voir le [guide middleware](/guide/routing#middleware). diff --git a/nuxtjs.org/content/fr/.archives/api/pages-scrolltotop.md b/nuxtjs.org/content/fr/.archives/api/pages-scrolltotop.md new file mode 100644 index 000000000..f17b84150 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-scrolltotop.md @@ -0,0 +1,29 @@ +--- +title: 'API : la propriété scrollToTop' +description: La propriété `scrollToTop` vous permet d'indiquer à Nuxt.js de faire défiler la page tout en haut avant de faire le rendu. +menu: scrollToTop +category: pages +position: 28 +--- + +> La propriété `scrollToTop` vous permet d'indiquer à Nuxt.js de faire défiler la page tout en haut avant de faire le rendu. + +- **Type :** `Boolean` (défaut : `false`) + +Par défaut, Nuxt.js fait défiler la page vers le sommet quand vous changez de page. Mais dans le cas de routes enfants, Nuxt.js reste à sa position actuelle. Si vous désirez indiquer à Nuxt.js de défiler vers le haut de la page lors du rendu de la page enfant, utilisez `scrollToTop: true` : + +```html + + + +``` + +À l'inverse, vous pouvez manuellement définir `scrollToTop` à `false` sur les routes parentes aussi. + +Si vous désirez écraser le comportement par défaut du défilement, regardez l'[option `scrollBehavior`](/api/configuration-router#scrollbehavior). diff --git a/nuxtjs.org/content/fr/.archives/api/pages-transition.md b/nuxtjs.org/content/fr/.archives/api/pages-transition.md new file mode 100644 index 000000000..83be9f07d --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-transition.md @@ -0,0 +1,122 @@ +--- +title: 'API : la propriété transition' +description: Nuxt.js utilise le composant de `` afin de créer des transitions / animations époustouflantes entre vos pages. +menu: transition +category: pages +position: 29 +--- + +> Nuxt.js utilise le composant de `` afin de créer des transitions / animations époustouflantes entre vos pages. + +- **Type :** `String` ou `Object` ou `Function` + +Pour définir une transition personnalisée pour une route spécifique, ajoutez la propriété `transition` au composant de page. + +```js +export default { + // Peut-être une chaine de caractères + transition: '' + // Ou un objet + transition: {} + // Ou une fonction + transition (to, from) {} +} +``` + +## Chaine de caractères + +Si la propriété `transition` est définie en tant que chaine de caractère, elle sera utilisée comme `transition.name`. + +```js +export default { + transition: 'test' +} +``` + +Nuxt.js utilisera ces paramètres pour définir le composant comme suit : + +```html + +``` + +## Objet + +Si la propriété `transition` est un objet : + +```js +export default { + transition: { + name: 'test', + mode: 'out-in' + } +} +``` + +Nuxt.js utilisera ces paramètres pour définir le composant comme suit : + +```html + +``` + +L'objet `transition` peut avoir les propriétés suivantes : + +| Propriété | type | défaut | définition | +| ------------------ | --------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `String` | `"page"` | Le nom de la transition appliqué aux transitions de route. | +| `mode` | `String` | `"out-in"` | Le mode de la transition appliqué aux routes. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Les-modes-de-transition). | +| `css` | `Boolean` | `true` | Défini s'il faut utiliser les transitions de classes CSS. Par défaut à `true`. Si mis à `false`, cela ne déclenchera que les points d'ancrage JavaScript abonnés via les évènements de composant. | +| `duration` | `Integer` | aucune | La durée (en millisecondes) appliquée a une transition, voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Durees-de-transition-explicites). | +| `type` | `String` | aucune | Spécifie le type d'évènement de transition attendu pour déterminer le moment de fin de transition. Les valeurs disponibles sont `"transition"` et `"animation"`. Par défaut, cela sera automatiquement déterminé s'il n'y a pas de durée précisée. | +| `enterClass` | `String` | aucune | L'état de départ de la classe de transition. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Classes-de-transition-personnalisees). | +| `enterToClass` | `String` | aucune | L'état final de la transition. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Classes-de-transition-personnalisees). | +| `enterActiveClass` | `String` | aucune | La classe appliquée pendant l'intégralité de la transition. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Classes-de-transition-personnalisees) | +| `leaveClass` | `String` | aucune | L'état de départ de la classe de transition. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Classes-de-transition-personnalisees). | +| `leaveToClass` | `String` | aucune | L'état final de la transition. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Classes-de-transition-personnalisees). | +| `leaveActiveClass` | `String` | aucune | La classe appliquée pendant l'intégralité de la transition. Voir la [documentation Vue.js](https://fr.vuejs.org/v2/guide/transitions.html#Classes-de-transition-personnalisees). | + +Vous pouvez également définir des méthodes dans l'objet `transition` afin de pouvoir utiliser des [points d'ancrage JavaScript](https://fr.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) : + +- `beforeEnter(el)` +- `enter(el, done)` +- `afterEnter(el)` +- `enterCancelled(el)` +- `beforeLeave(el)` +- `leave(el, done)` +- `afterLeave(el)` +- `leaveCancelled(el)` + +_Note : c'est une bonne pratique que de définir explicitement `css: false` pour les transitions uniquement JavaScript afin que Vue passe la détection CSS. Cela prévient également les potentielles interférences entre les déclarations CSS._ + +### Mode de transition + +**Le mode par défault pour les transitions diffère de Vue.js**. Le mode par défaur pour `transition` est `out-in`. Si vous voulez avoir les transitions de sortie et d'entrée en même temps, vous devez mettre `mode: ''`. + +```js +export default { + transition: { + name: 'test', + mode: '' + } +} +``` + +## Fonction + +Si la propriété `transition` est une fonction : + +```js +export default { + transition(to, from) { + if (!from) { + return 'slide-left' + } + return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left' + } +} +``` + +Transitions appliquées à la navigation : + +- `/` vers `/posts` => `slide-left`, +- `/posts` vers `/posts?page=3` => `slide-left`, +- `/posts?page=3` vers `/posts?page=2` => `slide-right`. diff --git a/nuxtjs.org/content/fr/.archives/api/pages-validate.md b/nuxtjs.org/content/fr/.archives/api/pages-validate.md new file mode 100644 index 000000000..70b72abc8 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-validate.md @@ -0,0 +1,69 @@ +--- +title: 'API : la méthode validate' +description: Nuxt.js vous permet de définir une méthode de validation dans votre composant de route dynamique. +menu: validate +category: pages +position: 31 +--- + +> Nuxt.js vous permet de définir une méthode de validation dans votre composant de route dynamique. + +- **Type:** `Function` ou `Async Function` + +```js +validate({ params, query, store }) { + return true // si le paramètre est valide + return false // nous arrêtons Nuxt.js pour faire le rendu de la route et afficher la page d'erreur +} +``` + +```js +async validate({ params, query, store }) { + // await operations (EN) + return true // si le paramètre est valide + return false // va stopper le process de rendering de Nuxt.js et afficher la page d'erreur +} +``` + +Vous pouvez aussi retourner une promesse: + +```js +validate({ params, query, store }) { + return new Promise((resolve) => setTimeout(() => resolve())) +} +``` + +Nuxt.js vous permet de définir une méthode de validation dans votre composant de route dynamique (dans cet exemple : `pages/users/_id.vue`). + +Si la méthode de validation retourne `false`, Nuxt.js chargera automatiquement la page d'erreur 404. + +```js +export default { + validate({ params }) { + // Doit être un nombre + return /^\d+$/.test(params.id) + } +} +``` + +Vous pouvez aussi vérifier les données dans votre [store](/guide/vuex-store) (remplies au préalable avec l'action [`nuxtServerInit`](/guide/vuex-store#the-nuxtserverinit-action)) : + +```js +export default { + validate({ params, store }) { + // Vérifier si `params.id` est une catégorie existante + return store.state.categories.some(category => category.id === params.id) + } +} +``` + +Vous pouvez aussi émettre une erreur dans la fonction directement pour afficher la page d'erreur : + +```js +export default { + async validate({ params, store }) { + // Émet une erreur 500 (internal server error) avec un message + throw new Error('En construction!') + } +} +``` diff --git a/nuxtjs.org/content/fr/.archives/api/pages-watchquery.md b/nuxtjs.org/content/fr/.archives/api/pages-watchquery.md new file mode 100644 index 000000000..a692f2dd7 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/api/pages-watchquery.md @@ -0,0 +1,33 @@ +--- +title: 'API: la propriété watchQuery' +description: Observer les chaînes de requête et exécuter les méthodes du composant lors d'une modification (asyncData, fetch, validate, layout, ...) +menu: watchQuery +category: pages +position: 32 +--- + +> Observer les chaînes de requête et exécuter les méthodes du composant lors de modifications (asyncData, fetch, validate, layout, ...) + +- **Type:** `Boolean` our `Array` our `Function` (défaut: `[]`) + +Utilisez la clé `watchQuery` pour configurer un watcher pour les chaînes de requête. Si les chaînes définies changent, toutes les méthodes du composant (asyncData, fetch, validate, layout, ...) seront appelées. Watching est désactivée par défaut pour améliorer les performances. + +Si vous souhaitez configurer un watcher pour toutes les chaînes de requête, définissez `watchQuery: true`. + +```js +export default { + watchQuery: ['page'] +} +``` + +Vous pouvez également utiliser la fonction `watchQuery(newQuery, oldQuery)` pour avoir des watchers plus affinés. + +```js +export default { + watchQuery(newQuery, oldQuery) { + // Exécute les méthodes de composant uniquement si l'ancienne chaîne de requête contenait `bar` + // et que la nouvelle chaîne de requête contient `foo` + return newQuery.foo && oldQuery.bar + } +} +``` diff --git a/nuxtjs.org/content/fr/.archives/guide/assets.md b/nuxtjs.org/content/fr/.archives/guide/assets.md new file mode 100644 index 000000000..da06b1843 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/assets.md @@ -0,0 +1,110 @@ +--- +title: Ressources +description: Nuxt utilise vue-loader, file-loader et url-loader avec webpack par défaut pour servir les fichiers statiques mais vous pouvez également utiliser un répertoire `static` pour les fichiers statiques. +category: getting-started +position: 107 +--- + +> Par défaut, Nuxt utilise vue-loader, file-loader et url-loader avec webpack pour servir les fichiers statiques. Vous pouvez également utiliser un répertoire `static` pour les fichiers statiques. + +## Avec webpack + +Par défaut, [vue-loader](http://vue-loader.vuejs.org/) traite automatiquement vos fichiers de styles et vos templates à l'aide de `css-loader` et du compilateur de template de Vue. Dans ce processus de compilation, toutes les URL des fichiers comme ``, `background: url(...)` et les CSS `@import` sont résolus en tant que dépendances des modules. + +Imaginons par exemple cette arborescence : + +```bash +-| assets/ +----| image.png +-| pages/ +----| index.vue +``` + +Dans votre CSS, si vous utilisez `url('~assets/image.png')`, cela sera _transformé_ en `require('~/assets/image.png')`. + +
+ +**Attention:** À partir de Nuxt 2.0 l'alias `~/` n'est plus résolu correctement dans vos fichiers CSS. Vous devez utiliser `~assets` (sans le slash) ou l'alias `@` dans la référence CSS `url`, par exemple `background: url("~assets/banner.svg")` + +
+ +Ou si vous référencez cette image dans `pages/index.vue` : + +```html + +``` + +Ce sera compilé en : + +```js +createElement('img', { attrs: { src: require('~/assets/image.png') } }) +``` + +Puisque que les fichiers `.png` ne sont pas des fichiers JavaScript, Nuxt.js configure webpack pour utiliser [file-loader](https://github.com/webpack/file-loader) et [url-loader](https://github.com/webpack/url-loader) afin de pouvoir s'en charger à votre place. + +Les avantages de ces chargeurs sont : + +- `file-loader` vous laisse définir où copier et placer les ressources, et comment les nommer en utilisant des hashs de version pour un meilleur cache. En production, vous bénéficierez par défaut de la mise en cache à long terme ! +- `url-loader` vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodée en base 64 si sa taille est inférieure à un seuil donné. Cela peut réduire le nombre de demandes HTTP pour les fichiers triviaux. Si la taille du fichier est supérieure au seuil, il retombe automatiquement sur file-loader. + +Pour ces deux chargeurs, la configuration par défaut est la suivante : + +```js +// https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L297-L316 +;[ + { + test: /\.(png|jpe?g|gif|svg|webp)$/, + loader: 'url-loader', + query: { + limit: 1000, // 1 ko + name: 'img/[name].[hash:7].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 1000, // 1 ko + name: 'fonts/[name].[hash:7].[ext]' + } + } +] +``` + +Ce qui signifie que tous les fichiers inférieurs à 1 ko seront intégrés comme URL base-64. Sinon, l'image / police sera copiée dans son dossier correspondant (dans le répertoire `.nuxt`) avec un nom contenant des hashs de version pour une meilleure mise en cache. + +Lors du lancement de notre application avec `nuxt`, notre template dans `pages/index.vue` : + +```html + +``` + +Sera transformé en : + +```html + +``` + +Si vous désirez modifier la configuration de ces loaders, merci d'utiliser [build.extend](/api/configuration-build#extend). + +## Avec des fichiers statiques + +Si vous ne souhaitez pas utiliser les ressources à l'aide de webpack à partir du répertoire `assets`, vous pouvez créer et utiliser le répertoire `static` (dans le répertoire racine du projet). + +Tous les fichiers inclus seront automatiquement servis par Nuxt et accessibles via l'URL racine du projet. (`static/favicon.ico` sera disponible à l'adresse `localhost:3000/favicon.ico`) + +Cette option est utile pour les fichiers tels que `robots.txt`, `sitemap.xml` ou `CNAME` (Ce qui est important pour le déploiement des pages GitHub). + +Dans votre code, vous pouvez ensuite référencer ces fichiers relativement à la racine (`/`) : + +```html + + + + + +``` diff --git a/nuxtjs.org/content/fr/.archives/guide/async-data.md b/nuxtjs.org/content/fr/.archives/guide/async-data.md new file mode 100644 index 000000000..4d256aab6 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/async-data.md @@ -0,0 +1,137 @@ +--- +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. +category: getting-started +position: 106 +--- + +> Vous voudriez peut-être récupérer des données et faire leur rendu côté serveur. Nuxt.js ajoute une méthode `asyncData` pour vous permettre de gérer les opérations asynchrones avant d'initialiser le composant. + + + +## La méthode asyncData + +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 **page**. Il sera appelé côté serveur une seule fois (au premier appel à l'application Nuxt) et côté client lors de la navigation 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. + +Nuxt.js fusionnera automatiquement l'objet retourné avec les données du composant. + +
+ +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 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 attendra 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)) + +
+ +Nous utilisons [axios](https://github.com/mzabriskie/axios) pour faire des requêtes HTTP isomorphiques, nous recommandons fortement d'utiliser notre [module axios](https://axios.nuxtjs.org/) pour vos projets Nuxt. + +
+ +### Retourner une promesse + +```js +export default { + asyncData({ params }) { + return axios.get(`https://my-api/posts/${params.id}`).then(res => { + return { title: res.data.title } + }) + } +} +``` + +### Utiliser async/await + +```js +export default { + async asyncData({ params }) { + const { data } = await axios.get(`https://my-api/posts/${params.id}`) + return { title: data.title } + } +} +``` + +### Afficher les données + +Le résultat de `asyncData` sera **fusionné** avec les données. Vous pouvez afficher les données au sein du template comme habituellement : + +```html + +``` + +## Le contexte + +Pour voir la liste des attributs disponibles dans `context`, jeter un œil à [la partie Essentielle de l'API pour `context`](/api/context). + +### Utiliser les objets `req`/`res` + +Lorsque `asyncData` est appelé du côté serveur, vous avez accès aux objets `req` et `res` de la requête utilisateur. + +```js +export default { + async asyncData({ req, res }) { + // Merci de vérifier en premier lieu si vous êtes du côté serveur + // avant d'utiliser req et res + if (process.server) { + return { host: req.headers.host } + } + + return {} + } +} +``` + +### Accéder aux données des routes dynamiques + +Vous pouvez utiliser le paramètre `context` 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` dans votre dossier `page`, vous pourrez accéder à sa valeur via `context.params.slug` : + +```js +export default { + async asyncData({ params }) { + const slug = params.slug // en appelant /abc la valeur de slug sera "abc" + return { slug } + } +} +``` + +### Écouter les changements de query + +La méthode `asyncData` **n'est pas appelée** par défaut lors du changement sur la chaine de requête. Si vous souhaitez changer ce comportement, par exemple quand vous construisez un composant de pagination, vous pouvez initialiser les paramètres qui devraient être écoutés avec la propriété `watchQuery` de votre composant de page. Consultez la page de [l'API `watchQuery`](/api/pages-watchquery) pour en savoir plus. + +## Gestion des erreurs + +Nuxt.js ajoute la méthode `error(params)` au `context`, que vous pouvez 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 +export default { + asyncData({ params, error }) { + return axios + .get(`https://my-api/posts/${params.id}`) + .then(res => { + return { title: res.data.title } + }) + .catch(e => { + error({ statusCode: 404, message: 'Billet non trouvé' }) + }) + } +} +``` + +Pour personnaliser la page d'erreur, jeter un œil à [Mises en page de la section Vues](/guide/views#mises-en-page). diff --git a/nuxtjs.org/content/fr/.archives/guide/commands.md b/nuxtjs.org/content/fr/.archives/guide/commands.md new file mode 100644 index 000000000..0c23371fc --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/commands.md @@ -0,0 +1,129 @@ +--- +title: Commandes et déploiement +description: Nuxt.js est livré avec un ensemble de commandes utiles, tant pour le développement que pour la production. +category: getting-started +position: 113 +--- + +> Nuxt.js est livré avec un ensemble de commandes utiles, tant pour le développement que pour la production. + +## Liste des commandes + +| Commande | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------- | +| nuxt | Lancer un serveur de développement sur localhost:3000 avec du rechargement à chaud. | +| nuxt build | Créez votre application avec webpack et minifiez les JS & CSS (pour la production). | +| nuxt start | Démarrez le serveur en mode production (après avoir exécuté `nuxt build`). | +| nuxt generate | Créez l'application et générez toutes les routes en tant que fichiers HTML (utilisé pour l'hébergement statique). | + +#### Arguments + +Vous pouvez utiliser `--help` avec n'importe quelle commande pour obtenir des détails d'utilisation. Les arguments communs sont : + +- **`--config-file` ou `-c`:** spécifie le chemin vers le fichier `nuxt.config.js`. +- **`--spa` ou `-s`:** lance la commande en mode application monopage et désactive le rendu côté serveur. +- **`--unix-socket` ou `-n`:** Spécifie le chemin d'un socket UNIX. + +#### Utiliser un fichier package.json + +Vous devriez ajouter ces commandes au `package.json` : + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate" +} +``` + +Ensuite, vous pouvez lancer vos commandes via `npm run ` (exemple : `npm run dev`). + +
+ +Astuce : pour passer des arguments à une commande npm, vous devez utiliser un -- supplémentaire après le nom du script (exemple : npm run dev -- --spa). + +
+ +## Environnement de développement + +Pour lancer Nuxt dans le mode de développement avec le rechargement à chaud : + +```bash +nuxt +// OU +npm run dev +``` + +## Déploiement en production + +Nuxt.js vous permet de choisir entre trois modes de déploiement pour votre application : rendu côté serveur, application monopage ou généré de manière statique. + +### Déploiement pour un rendu côté serveur (universelle) + +Pour déployer, au lieu d'exécuter `nuxt`, vous voulez probablement faire d'abord la construction. Par conséquent, la construction et le démarrage sont des commandes distinctes : + +```bash +nuxt build +nuxt start +``` + +Vous pouvez aussi définir `server.https` dans votre fichier `nuxt.config.js` avec le même ensemble d'options passé à [`https.createServer`](https://nodejs.org/api/https.html), si vous décidez de servir Nuxt.js en mode HTTPS. Les sockets Unix sont aussi disponibles si vous spécifiez l'option `server.socket` dans `nuxt.config.js` (ou `-n` dans [CLI](https://nuxtjs.org/guide/commands#list-of-commands)). Si vous utilisez les [sockets Unix](https://en.wikipedia.org/wiki/Berkeley_sockets), assurez-vous de laisser les paramètres `host` et `port` vides, sinon le paramètre `socket` sera ignoré. + +Le fichier `package.json` suivant est recommandé : + +```json +{ + "name": "my-app", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} +``` + +Note : nous recommandons d'ajouter `.nuxt` dans `.npmignore` ou `.gitignore`. + +### Déploiement pour une génération statique (pré-rendue) + +Nuxt.js vous offre la possibilité d'héberger votre application web sur tout hébergement statique. + +Pour générer votre application web en fichiers statiques : + +```bash +npm run generate +``` + +Il créera un dossier `dist` avec tout à l'intérieur prêt à être déployé sur un hébergement de site statique. + +Si vous avez un projet avec des [routes dynamiques](/guide/routing#dynamic-routes), regardez la [configuration de la commande generate](/api/configuration-generate) afin de dire à Nuxt.js comment générer ces routes dynamiques. + +
+ +Lors de la génération de votre application web avec `nuxt generate`, [le contexte](/api/context) donné à [asyncData](/guide/async-data) et [fetch](/guide/vuex-store#la-m-thode-fetch) n'aura pas de `req` et `res`. + +
+ +### Déploiement pour une application monopage (SPA) + +`nuxt generate` a toujours besoin du moteur SSR pendant la génération afin de pré-rendre toutes les pages, et d'avoir du contenu solide pour la SEO et un chargement de page rapide. Le contenu est généré lors de la _phase de build_. Il ne faut pas l'utiliser, par exemple, pour les applications où le contenu dépend de l'authentification de l'utilisateur ou pour une API en temps réel (du moins pour le premier chargement). + +L'idée de l'application monopage est simple ! Quand le mode SPA est activé en utilisant `mode: 'spa'` ou l'option `--spa`, et que nous lançons la construction, la génération se lance automatiquement après la construction. Cette génération contient les meta, ressources et liens communs, mais sans contenu de page. + +Donc pour un déploiement en mode SPA, vous devez : + +- Changez le `mode` dans `nuxt.config.js` pour `spa`. +- Lancez `npm run build`. +- Déployez le dossier `dist/` créé sur votre hébergement statique comme Surge, GitHub Pages ou nginx. + +Une autre possibilité de déploiement est d'utiliser Nuxt comme un middleware dans des frameworks si le mode est `spa`. Ceci aide à réduire le temps de chargement et à utiliser Nuxt dans des projets ou le SSR n'est pas possible. + +
+ +Consultez les [Questions fréquentes](/faq) et trouvez des exemples astucieux de déploiements sur des hôtes populaires. + +
diff --git a/nuxtjs.org/content/fr/.archives/guide/configuration.md b/nuxtjs.org/content/fr/.archives/guide/configuration.md new file mode 100644 index 000000000..f6b315d1e --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/configuration.md @@ -0,0 +1,104 @@ +--- +title: Configuration +description: La configuration par défaut de Nuxt.js couvre la plupart des cas d'usage. Cette configuration peut être surchargée en utilisant le fichier `nuxt.config.js`. +category: getting-started +position: 103 +--- + +> La configuration par défaut de Nuxt.js couvre la plupart des cas d'usage. Cette configuration peut être surchargée en utilisant le fichier `nuxt.config.js`. + +### build + +Cette option vous permet de configurer différents paramètres pour l'étape de `build`, incluant les `loaders`, `filenames`, et la configuration de `webpack` et de `transpilation`. + +[Consultez la documentation à propos de `build`](/api/configuration-build) + +### css + +Cette option vous permet de définir les fichiers CSS, modules et bibliothèques que vous voulez inclure en global (dans chaque page). + +[Consultez la documentation à propos de `css`](/api/configuration-css) + +### dev + +Cette option vous permet de définir le mode `development` ou le mode `production` de Nuxt.js (important si vous utilisez Nuxt.js dans un programme). + +[Consultez la documentation à propos de `dev`](/api/configuration-dev) + +### env + +Cette option vous permet de définir des variables d'environnements disponible côté client et côté serveur. + +[Consultez la documentation à propos de `env`](/api/configuration-env) + +### generate + +Cette option vous permet de définir chaque paramètre pour chaque route dynamique de votre application qui sera transformée en fichiers HTML par Nuxt.js. + +[Consultez la documentation à propos de `generate`](/api/configuration-generate) + +### head + +Cette option vous permet de définir les balises meta par défaut de votre application. + +[Consultez la documentation à propos de `head`](/api/configuration-head) + +### loading + +Cette option vous permet de personnaliser le composant de chargement par défaut chargé par Nuxt.js + +[Consultez la documentation à propos de `loading`](/api/configuration-loading) + +### modules + +Cette option vous permet d'ajouter des modules Nuxt a votre projet. + +[Consultez la documentation à propos de `modules`](/api/configuration-modules) + +### modulesDir + +Cette option vous permet de définir le répertoire node_modules de votre application Nuxt.js. + +[Consultez la documentation à propos de `modulesDir`](/api/configuration-modulesdir) + +### plugins + +Cette option vous permet de définir des plugins JavaScript qui seront exécutés avant d'instancier la racine de l'application Vue.js. + +[Consultez la documentation à propos de `plugins`](/api/configuration-plugins) + +### rootDir + +Cette option vous permet de définir l'espace de travail de votre application Nuxt.js. + +[Consultez la documentation à propos de `rootDir`](/api/configuration-rootdir) + +### router + +Avec l'option `router` vous modifiez la configuration Nuxt.js par défaut de Vue Router. + +[Consultez la documentation à propos de `router`](/api/configuration-router) + +### server + +Cette option vous permet de configurer les variables de connexion à l'instance du serveur de votre application Nuxt.js. + +[Consultez la documentation à propos de `server`](/api/configuration-server) + +### srcDir + +Cette option vous permet de définir le dossier source de votre application Nuxt.js. + +[Consultez la documentation à propos de `srcDir`](/api/configuration-srcdir) + +### dir + +Cette option vous permet de définir les dossiers personnalisés de votre application Nuxt.js. + +[Consultez la documentation à propos de `dir`](/api/configuration-dir) + +### transition + +Cette option vous permet de définir les propriétés par défaut des transitions de pages. + +[Consultez la documentation à propos de `transition`](/api/configuration-transition) diff --git a/nuxtjs.org/content/fr/.archives/guide/contribution-guide.md b/nuxtjs.org/content/fr/.archives/guide/contribution-guide.md new file mode 100644 index 000000000..63aa7f40a --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/contribution-guide.md @@ -0,0 +1,105 @@ +--- +title: Guide de contribution +description: Toute contribution à Nuxt.js est plus que bienvenue ! +category: prologue +position: 2 +--- + +> Toute contribution à Nuxt.js est plus que bienvenue ! + +## Signaler des problèmes + +Une excellente façon de contribuer au projet est d'envoyer un rapport détaillé (« issue ») lorsque vous rencontrez un problème. Pour simplifier les choses pour les contributeurs et les responsables, nous utilisons [CMTY](https://cmty.nuxtjs.org/). + +Merci de vous assurer d'inclure la méthode pour reproduire ou un [CodeSandBox](https://template.nuxtjs.org/) de sorte que les bogues puissent être reproduits sans grands efforts. Plus un bogue peut être reproduit, plus vite nous pourrons commencer à le réparer ! + +## Propositions de d'amelioration (Merge Request / Pull request) + +Nous aimons voir vos propositions d'amélioration, même s'il ne s'agit que d'une faute de frappe ! + +Cependant, toute amélioration significative doit être associée à une [demande d'amélioration](https://feature.nuxtjs.org/) existante ou un [Rapport de bogue](https://bug.nuxtjs.org/). + +### Pour commencer + +1. [Dupliquer / Fork](https://help.github.com/articles/fork-a-repo/) ce dépôt sur votre propre compte GitHub puis le [cloner](https://help.github.com/articles/cloning-a-repository/) suir votre appareil. +2. Lancer `npm install` ou `yarn install` pour installer les dépendances. + +> _Notez que **npm** et **yarn** peuvent tous les deux oublier d'installer des dépendances. Pour remédier à cela, vous pouvez soit supprimer le répertoire `node_modules` dans votre exemple d'application et installer à nouveau, ou installer localement les dépendances manquantes._ + +> Si vous ajoutez une dépendance, merci d'utiliser `yarn add`. Le fichier `yarn.lock` est le point de départ de toutes les dépendances de Nuxt. + +### Setup + +Avant même d'exécuter vos tests, pensez à installer toutes les dépendances. + +```sh +yarn +yarn build +``` + +### Structure de test + +Une bonne pull request, qui inclue une correction de bogue ou une nouvelle fonctionnalité, comprendra souvent des tests. Pour écrire de bons tests, laissez-nous expliquer notre structure de test : + +#### Correctifs + +Les correctifs (que vous trouverez dans `tests/fixtures`) contiennent plusieurs applications Nuxt. Afin de conserver un temps de construction le plus court possible, nous ne construisons pas une application Nuxt par correctifs. Au lieu de cela, les correctifs sont construits (`yarn test:fixtures`) avant d'exécuter les tests unitaires actuels. + +Assurez-vous **de modifier** ou **d'ajouter un nouveau correctif** lorsque vous soumettez une pull request afin de refléter correctement les changements (si nécessaire). + +De plus, n'oubliez pas de **reconstruire** un correctif après l'avoir modifié en lançant le test correspondant avec `jest test/fixtures/my-fixture/my-fixture.test.js` ! + +#### Tests unitaires + +Les tests unitaires peuvent être trouvés dans `tests/unit` et seront exécutés après la construction des correctifs. Un nouveau serveur Nuxt sera utilisé par test de sorte qu'aucun état partagé (excepté l'état initial de l'étape de construction) ne soit présent. + +Après avoir ajouté vos tests unitaires, vous pouvez les exécuter directement : + +```sh +jest test/unit/test.js +``` + +Ou vous pouvez exécuter l'ensemble des tests unitaires à la suite : + +```sh +yarn test:unit +``` + +Encore une fois, sachez que vous devrez peut-être reconstruire vos correctifs avant ! + +### Tester vos changements + +Pendant que vous travaillez sur votre pull request, vous voudrez probablement vérifier si votre correctif est correctement configuré ou bien déboguer vos modifications actuelles. + +Pour ce faire, vous pouvez utiliser le scripte Nuxt lui-même pour lancer par exemple votre correctif ou une application d'exemple : + +```sh +yarn nuxt examples/your-app +yarn nuxt test/fixtures/your-fixture-app +``` + +> `npm link` pourrait aussi (et dans une certaine mesure) fonctionner pour cela, mais il est connu pour présenter certains problèmes. C'est pourquoi nous recommandons d'appeler directement `yarn nuxt` pour exécuter les exemples. + +### Exemples + +Si vous travaillez sur une fonctionnalité plus importante, merci de configurer une application exemple dans `examples/`. Cela aidera grandement à comprendre les changements et aussi aider les utilisateurs de Nuxt à comprendre en profondeur la fonctionnalité que vous avez construite. + +### Mise en forme + +Comme vous l'avez peut-être remarqué, nous utilisons ESLint pour appliquer un code standard. Merci de lancer `yarn lint` avant d'enregistrer vos changements afin de vérifier que la mise en forme du code est correcte. Sinon, vous pouvez utiliser `yarn lint --fix` ou `npm run lint -- --fix` (sans faute !) pour corriger la plupart des changements de style. S'il reste des erreurs, vous devez les corriger manuellement. + +### Documentation + +Si vous avez ajouté une nouvelle fonctionnalité, fait une refonte ou changé le comportement de Nuxt d'une autre manière, vous voudrez probablement documenter les changements. Merci de le faire par une pull request sur le dépôt de la [documentation](https://github.com/nuxt/docs/pulls). Vous n'êtes pas obligé de modifier la documentation immédiatement (mais veuillez le faire dès que votre pull request est suffisamment mature). + +### Listes de contrôle finales + +Lors de la soumission de votre pull request, il y a un formulaire simple que vous devez remplir. Veuillez cocher toutes les "réponses" appropriées dans les listes de contrôle. + +### Dépannages + +#### Tests de débogage sur macOS + +Rechercher `getPort()` vous révèlera qu'il est utilisé pour démarrer de nouveaux processus Nuxt pendant les tests. Il a parfois été constaté qu'il cessait de fonctionner sous macOS et demandait à configurer manuellement un port pour les tests. + +Un autre problème courant concerne les processus Nuxt qui peuvent bloquer en mémoire lors de l'exécution des tests des correctifs. Un processus fantôme empêchera souvent les tests ultérieurs de fonctionner. Exécuter `ps aux | grep -i node` pour inspecter tous les processus si vous pensez que cela se produit. diff --git a/nuxtjs.org/content/fr/.archives/guide/development-tools.md b/nuxtjs.org/content/fr/.archives/guide/development-tools.md new file mode 100644 index 000000000..7a1715938 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/development-tools.md @@ -0,0 +1,215 @@ +--- +title: Outils de développement +description: Nuxt.js vous aide à rendre votre développement web agréable. +category: getting-started +position: 114 +--- + +> Le test de votre application fait partie du développement web. Nuxt.js vous aide à le rendre aussi facile que possible. + +## Tests de bout en bout + +[AVA](https://github.com/avajs/ava) est un framework JavaScript de test puissant, mixé avec [jsdom](https://github.com/tmpvar/jsdom), nous pouvons les utiliser pour écrire des tests de bout en bout facilement. + +Tout d'abord, nous devons ajouter AVA et jsdom en tant que dépendances de développement : + +```bash +npm install --save-dev ava jsdom +``` + +Puis ajouter un script de test à notre `package.json` et configurer AVA pour compiler les fichiers que nous importons dans nos tests. + +```javascript +"scripts": { + "test": "ava", +}, +"ava": { + "files": [ + "test/**/*" + ] +} +``` + +Nous allons écrire nos tests dans le répertoire `test` : + +```bash +mkdir test +``` + +Imaginons que nous avons une page dans `pages/index.vue` : + +```html + + + + + +``` + +Lorsque nous lançons notre application avec `npm run dev` et que nous visitons http://localhost:3000, nous voyons notre titre `Hello World !` rouge. + +Nous ajoutons notre fichier de test `test/index.test.js` : + +```js +import { resolve } from 'path' +import test from 'ava' +import { Nuxt, Builder } from 'nuxt' + +// Nous gardons une référence à Nuxt pour fermer +// le serveur à la fin du test +let nuxt = null + +// Initialiser Nuxt.js et démarrer l'écoute sur localhost:4000 +test.before('Init Nuxt.js', async t => { + const rootDir = resolve(__dirname, '..') + let config = {} + try { + config = require(resolve(rootDir, 'nuxt.config.js')) + } catch (e) {} + config.rootDir = rootDir // dossier du projet + config.dev = false // build de production + config.mode = 'universal' // application isomorphique + nuxt = new Nuxt(config) + await new Builder(nuxt).build() + nuxt.listen(4000, 'localhost') +}) + +// Exemple de test uniquement sur le HTML généré +test('Route / exits and render HTML', async t => { + const context = {} + const { html } = await nuxt.renderRoute('/', context) + t.true(html.includes('

Hello World !

')) +}) + +// Exemple de test via la vérification du DOM +test('Route / exits and render HTML with CSS applied', async t => { + const window = await nuxt.renderAndGetWindow('http://localhost:4000/') + const element = window.document.querySelector('.red') + t.not(element, null) + t.is(element.textContent, 'Hello World !') + t.is(element.className, 'red') + t.is(window.getComputedStyle(element).color, 'red') +}) + +// Arrêter le serveur Nuxt +test.after('Closing server', t => { + nuxt.close() +}) +``` + +Nous pouvons désormais lancer nos tests : + +```bash +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 et Prettier + +> [ESLint](http://eslint.org) est un excellent outil pour garder votre code propre. + +> [Prettier](https://prettier.io) est un reformateur de code très populaire. + +Vous pouvez ajouter ESLint assez facilement avec Nuxt.js. Ajouter les dépendances npm : + +```bash +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 : + +```js +module.exports = { + root: true, + env: { + browser: true, + node: true + }, + parserOptions: { + parser: 'babel-eslint' + }, + extends: [ + 'eslint:recommended', + // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention + // préférez utiliser `plugin:vue/strongly-recommended` ou `plugin:vue/recommended` pour des règles strictes. + 'plugin:vue/recommended', + 'plugin:prettier/recommended' + ], + // required to lint *.vue files + plugins: ['vue'], + // add your custom rules here + rules: { + semi: [2, 'never'], + 'no-console': 'off', + 'vue/max-attributes-per-line': 'off', + 'prettier/prettier': ['error', { semi: false }] + } +} +``` + +Ensuite, vous pouvez ajouter les scripts `lint` et `lintfix` au `package.json` : + +```js +"scripts": { + "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", + "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." +} +``` + +Vous pouvez alors lancer `lint` pour simplement vérifier les erreurs : + +```bash +npm run lint +``` + +ou `lintfix` pour aussi réparer celles qui sont corrigeables + +```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` : + +```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/nuxtjs.org/content/fr/.archives/guide/directory-structure.md b/nuxtjs.org/content/fr/.archives/guide/directory-structure.md new file mode 100644 index 000000000..17b3fe908 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/directory-structure.md @@ -0,0 +1,105 @@ +--- +title: Structure des répertoires +description: La structure par défaut d'une application Nuxt.js est destinée à fournir un excellent point de départ pour les petites et grandes applications. Bien sûr, vous êtes libre d'organiser votre application comme vous le souhaitez. +category: getting-started +position: 102 +--- + +> La structure par défaut d'une application Nuxt.js est destinée à fournir un excellent point de départ pour les petites et grandes applications. Bien sûr, vous êtes libre d'organiser votre application comme vous le souhaitez. + + + +## Répertoires + +
+ +### Le répertoire des ressources + +Le répertoire `assets` contient vos ressources non compilées tels que vos fichiers Stylus ou Sass, des images et des polices. + +[Consultez la documentation à propos de l'intégration des ressources](/guide/assets) + +### Le répertoire des composants + +Le répertoire `components` contient vos composants Vue.js. Vous ne pouvez pas utiliser les méthodes `asyncData` ou `fetch` sur ces composants. + +### Le répertoire des mises en page + +Le répertoire `layouts` contient les mises en page de votre application. Les mises en page sont utilisées pour changer l'aspect de votre page (par exemple en incluant une barre latérale). + +[Consultez la documentation à propos de l'intégration des mises en page](/guide/views#layouts) + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +### Le répertoire des middlewares + +Le répertoire `middleware` contient vos middlewares. Un middleware vous permet de définir une fonction qui sera exécutée avant de faire le rendu d'une mise en page ou d'un groupe de mises en page. + +[Consultez la documentation à propos de l'intégration des middlewares](/guide/routing#middleware) + +### Le répertoire des pages + +Le répertoire `pages` contient vos vues et routes de l'application. Le framework lit tous vos fichiers `.vue` au sein de ce répertoire et crée automatiquement le routage de votre application. + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +[Consultez la documentation à propos de l'intégration des pages](/guide/views) + +### Le répertoire des plugins + +Le répertoire `plugins` contient les plugins JavaScript que vous désirez exécuter avant d'instancier l'application Vue.js racine. C'est le bon endroit pour abonner des composants globaux et injecter des fonctions ou constantes. + +[Consultez la documentation à propos de l'intégration des plugins](/guide/plugins) + +### Le répertoire des fichiers statiques + +Le répertoire `static` est directement relié au chemin racine du serveur (`/static/robots.txt` est accessible à l'adresse `http://localhost:3000/robots.txt`) et contient des fichiers que vous ne voudrez jamais modifier (par ex. le favicon) + +**Exemple :** `/static/robots.txt` est mappé à `/robots.txt` + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +[Consultez la documentation à propos de l'intégration des fichiers statiques](/guide/assets#static) + +### 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. + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +[Consultez la documentation à propos de l'intégration des stores Vuex](/guide/vuex-store) + +### Le fichier nuxt.config.js + +Le fichier `nuxt.config.js` contient vos configurations personnalisées concernant Nuxt.js. + +_Ce fichier ne peut pas être renommé sans configuration supplémentaire._ + +[Consultez la documentation à propos de l'intégration de `nuxt.config.js`](/guide/configuration) + +### Le fichier package.json + +Le fichier `package.json` contient les dépendances et scripts de votre application. + +_Ce fichier ne peut pas être renommé._ + +## Alias + +| Alias | Répertoire | +| ------------ | ------------------------------------- | +| `~` or `@` | [srcDir](/api/configuration-srcdir) | +| `~~` or `@@` | [rootDir](/api/configuration-rootdir) | + +Par défaut, `srcDir` est le même répertoire que `rootDir`. + +
+ +Info : à l'intérieur de vos templates `vue`, si vous avez besoin de faire référence à vos répertoires `assets` ou `static`, utilisez par ex. `~/assets/votre_image.png` et `~/static/votre_image.png`. + +
diff --git a/nuxtjs.org/content/fr/.archives/guide/index.md b/nuxtjs.org/content/fr/.archives/guide/index.md new file mode 100644 index 000000000..45640ed76 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/index.md @@ -0,0 +1,128 @@ +--- +title: Introduction +description: 'Nuxt.js est un framework pour créer des applications Vue, vous pouvez choisir entre application Universelle, Générée Statiquement ou Monopage.' +category: prologue +position: 1 +--- + +> Nuxt.js est un framework pour créer des applications Vue, vous pouvez choisir entre application Universelle, Générée Statiquement ou Monopage. + +## Nuxt.js, qu’est-ce que c’est ? + +Son principal objectif est le **rendu de l'Interface Utilisateur** tout en faisant abstraction de la distribution client/serveur. + +Notre but est de créer un framework suffisamment flexible afin que vous puissiez l'utiliser comme base dans un projet principal ou que vous puissiez l'implémenter incrementalement sur votre projet actuel basé sur Node.js. + +Nuxt.js fournit toute la configuration nécessaire pour rendre votre développement de **rendu côté serveur** avec Vue.js agréable avec son mode **universel** par défaut. + +De plus, nous fournissons également une option de déploiement appelée [_nuxt generate_](https://fr.nuxtjs.org/api/configuration-generate/#la-propri-t-generate). Elle va créer une application Vue.js pré-rendu et pré-configuré avec **génération statique**. Elle vous permettra donc de profiter du SSR sans avoir besoin d'un vrai server nuxt. Nous pensons que cette option sera la prochaine grosse étape dans le développement de vos applications web avec micro services. + +Bien entendu, vous pouvez également utiliser Nuxt.js pour créer des applications monopages rapidement (mode `spa`), ce qui est utile pour conserver les fonctionnalités de Nuxt quand vous travaillez sur la partie backoffice de vos applications. + +En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vous aider dans votre développement entre côté client et serveur tels que les données asynchrones, les _middlewares_, les _layouts_, etc. + +## Comment ça marche + +![Vue avec webpack et Babel](https://i.imgur.com/avEUftE.png) + +Nuxt.js inclut les éléments suivants afin de créer une expérience de développement optimale : + +- [Vue 2](https://fr.vuejs.org/) +- [Vue Router](https://router.vuejs.org/fr/) +- [Vuex](https://vuex.vuejs.org/fr/) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée) +- [Vue Server Renderer](https://ssr.vuejs.org/) (exclut quand le [`mode: 'spa'`](/api/configuration-mode) est utilisé) +- [vue-meta](https://github.com/nuxt/vue-meta) + +Un total de seulement **57ko min+gzip** (60ko avec Vuex). + +Sous le capot, nous utilisons [webpack](https://github.com/webpack/webpack) avec [vue-loader](https://github.com/vuejs/vue-loader) et [babel-loader](https://github.com/babel/babel-loader) pour empaqueter (« bundle »), scinder (« code-splitting ») et minifier votre code. + +## Fonctionnalités + +- Écriture des fichiers Vue (`*.vue*`) +- Splitting de code automatique +- Rendu coté serveur (ou « SSR » pour « Server-Side Rendering ») +- Routage automatique et puissant à l'aide de données asynchrones +- Serveur de fichiers statiques +- Transpilation [ES2015+](https://babeljs.io/docs/en/learn/) +- Empaquetage et minification de vos fichiers JS et CSS +- Gestion des éléments de balise d'en-tête `` HTML (``, `<meta>`, etc.) +- Rechargement à chaud pendant le développement (hot module reload or HMR) +- Préprocesseur : Sass, Less, Stylus, etc. +- Entête HTTP/2 PUSH +- Extensibilité avec une architecture modulaire + +## Schéma + +Ce schéma (en anglais) montre ce qui est invoqué par Nuxt.js quand le serveur est appelé ou quand l'utilisateur navigue dans l'application à l'aide de `<nuxt-link>` : + +![nuxt-schema](/nuxt-schema.svg) + +## Rendu côté serveur (SSR universel) + +Vous pouvez utiliser Nuxt.js comme framework pour gérer le rendu complet de l'interface utilisateur de votre projet. + +En utilisant la commande `nuxt`, Nuxt démarrera un serveur de développement avec rechargement à chaud et [Vue Server Renderer](https://ssr.vuejs.org/fr/) sera configuré pour faire automatiquement le rendu de votre application côté serveur. + +## Application monopage + +Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté serveur ou que vous avez besoin d'un hébergement statique pour votre application, vous pouvez simplement utiliser le mode application monopage (ou « SPA » pour « Simple Page Application ») en utilisant la commande `nuxt --spa`. Combiné avec la fonctionnalité de _génération_, vous avez la une puissante application monopage qui ne nécessite aucunement Node.js ou un serveur spécial pour fonctionner. + +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). + +## Génération statique (pré-rendu) + +La grande innovation de Nuxt.js est sa commande `nuxt generate`. + +Lors de la création de votre application, il génèrera le code HTML de chacune de vos routes pour le stocker dans un fichier. + +<div> + <a href="https://vueschool.io/courses/static-site-generation-with-nuxtjs?friend=nuxt" target="_blank" class="Promote"> + <img src="/static-site-generation-with-nuxtjs.png" alt="Génération de site statique avec Nuxt.js par vueschool"/> + <div class="Promote__Content"> + <h4 class="Promote__Content__Title">Génération de site statique avec Nuxt.js</h4> + <p class="Promote__Content__Description">Apprendre comment générer des sites web statiques (pré-rendus) pour améliorer les performances et le SEO tout en éliminant les coûts d'hébergement.</p> + <p class="Promote__Content__Signature">Cours en vidéo réalisés par VueSchool pour aider au développement de Nuxt.js.</p> + </div> + </a> +</div> + +Par exemple, la structure de fichier suivante : + +```bash +-| pages/ +----| about.vue +----| index.vue +``` + +générera : + +``` +-| dist/ +----| about/ +------| index.html +----| index.html +``` + +De cette façon, vous pouvez héberger votre application web sur n'importe quel hébergement statique ! + +Le meilleur exemple est ce site web. Il est généré et hébergé sur [Netlify](https://www.netlify.com), consultez notre [code source](https://github.com/nuxt/nuxtjs.org) ou [Comment déployer Nuxt.js sur Netlify](https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-netlify?friend=nuxt) sur Vue School. + +Nous ne voulons pas générer manuellement l'application à chaque fois que nous mettons à jour la [documentation](https://github.com/nuxt/docs), il déclenche un point d'ancrage pour Netlify qui : + +1. Clone le [dépôt nuxtjs.org](https://github.com/nuxt/nuxtjs.org) +2. Installe les dépendances via `npm install` +3. Lance `npm run generate` +4. Sert le dossier `dist` + +Et nous voilà avec une **application web générée statique** :) + +Nous pouvons aller plus loin en imaginant une application d'e-commerce créée avec `nuxt generate` et hébergée sur un CDN. Chaque fois qu'un produit est en rupture de stock ou de nouveau en stock nous régénérons l'application. Mais si l'utilisateur navigue sur l'application en même temps, il verra les informations à jour grâce aux appels d'API effectués sur l'API de l'e-commerce. Pas besoin d'avoir plusieurs instances d'un serveur d'un cache ! + +<div class="Alert"> + +Vous pouvez consulter [Comment déployer sur Netlify ?](/faq/netlify-deployment) pour plus d'informations sur un hébergement sur Netlify. + +</div> diff --git a/nuxtjs.org/content/fr/.archives/guide/installation.md b/nuxtjs.org/content/fr/.archives/guide/installation.md new file mode 100644 index 000000000..2df52d617 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/installation.md @@ -0,0 +1,161 @@ +--- +title: Installation +description: Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à `nuxt`. +category: getting-started +position: 101 +--- + +> Débuter avec Nuxt.js est vraiment facile. Un projet simple n'a besoin que d'une dépendance à `nuxt`. + +<div> + <a href="https://vueschool.io/courses/nuxtjs-fundamentals/?friend=nuxt" target="_blank" class="Promote"> + <img src="/nuxt-fundamentals.png" srcset="/nuxt-fundamentals-2x.png 2x" alt="Fondamentaux de Nuxt par vueschool"/> + <div class="Promote__Content"> + <h4 class="Promote__Content__Title">Fondamentaux de Nuxt.js</h4> + <p class="Promote__Content__Description">Apprendre comment démarrer rapidement avec Nuxt.js en vidéos.</p> + <p class="Promote__Content__Signature">Cours en vidéo réalisés par VueSchool pour aider au développement de Nuxt.js.</p> + </div> + </a> +</div> + +## Utiliser `create-nuxt-app` + +Afin de démarrer rapidement, l'équipe Nuxt.js a créé un outil de démarrage [create-nuxt-app](https://github.com/nuxt/create-nuxt-app). + +Assurez-vous que [npx](https://www.npmjs.com/package/npx) est installé (`npx` est livré par défaut depuis npm `5.2.0`) + +```bash +$ npx create-nuxt-app <project-name> +``` + +ou avec [yarn](https://yarnpkg.com/en/): + +```bash +$ yarn create nuxt-app <project-name> +``` + +Il vous sera posé quelques questions : + +1. Choisir entre différents frameworks intégrés côté serveur : + +- Aucun (Serveur Nuxt par défaut) +- [Express](https://github.com/expressjs/express) +- [Koa](https://github.com/koajs/koa) +- [Hapi](https://github.com/hapijs/hapi) +- [Feathers](https://github.com/feathersjs/feathers) +- [Micro](https://github.com/zeit/micro) +- [Fastify](https://github.com/fastify/fastify) +- [Adonis](https://github.com/adonisjs/adonis-framework) (WIP) + +2. Choisir votre interface utilisateur préférée : + +- Aucune (lançant la possibilité d'en ajouter une plus tard) +- [Bootstrap](https://github.com/bootstrap-vue/bootstrap-vue) +- [Vuetify](https://github.com/vuetifyjs/vuetify) +- [Bulma](https://github.com/jgthms/bulma) +- [Tailwind](https://github.com/tailwindcss/tailwindcss) +- [Element UI](https://github.com/ElemeFE/element) +- [Ant Design Vue](https://github.com/vueComponent/ant-design-vue) +- [Buefy](https://github.com/buefy/buefy) +- [iView](https://github.com/iview/iview) +- [Tachyons](https://github.com/tachyons-css/tachyons) + +3. Choisissez votre framework de test préféré : + +- Aucun (sentez-vous libre d'en ajouter un plus tard) +- [Jest](https://github.com/facebook/jest) +- [AVA](https://github.com/avajs/ava) + +4. Le [mode Nuxt désiré (`Universel` ou `SPA`)](https://nuxtjs.org/guide#single-page-applications-spa-) +5. Ajouter le [module axios](https://github.com/nuxt-community/axios-module) pour faire des requêtes HTTP facilement dans votre application. +6. Ajouter [EsLint](https://eslint.org/) pour Linter votre code en sauvegardant. +7. Ajouter [Prettier](https://prettier.io/) pour prettifier votre code en sauvegardant. + +Après réponses, les dépendences s'installerons et la prochaine étape sera de naviguer dans le dossier du projet pour le lancer avec : + +```bash +$ cd <project-name> +$ npm run dev +``` + +L'application est désormais accessible à l'adresse http://localhost:3000. + +<div class="Alert"> + +Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire <code>pages</code> aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages. + +</div> + +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 + +La création d'une application Nuxt.js à partir de zéro est également très simple, elle ne nécessite qu'_1 fichier et 1 répertoire_. Créez un répertoire vide pour commencer à travailler sur l'application : + +```bash +$ mkdir <nom-du-projet> +$ cd <nom-du-projet> +``` + +<div class="Alert Alert--nuxt-green"> + +<b>Info :</b> remplacez <code><nom-du-projet></nom-du-projet></code> par le nom du projet. + +</div> + +### Le package.json + +Le projet a besoin d'un fichier `package.json` avec un script permettant de lancer `nuxt` : + +```json +{ + "name": "mon-application", + "scripts": { + "dev": "nuxt" + } +} +``` + +`scripts` lancera Nuxt.js via `npm run dev`. + +### Installation de `nuxt` + +Une fois que le `package.json` est créé, ajoutez `nuxt` au projet via npm : + +```bash +$ npm install --save nuxt +``` + +### Le dossier `pages` + +Nuxt.js va transformer chaque fichier `*.vue` se trouvant dans le dossier `pages` en une route pour l'application. + +Créez le dossier `pages` : + +```bash +$ mkdir pages +``` + +puis créez la première page `pages/index.vue`: + +```html +<template> + <h1>Bonjour le monde !</h1> +</template> +``` + +et lancez le projet avec : + +```bash +$ npm run dev +``` + +L'application est désormais accessible à l'adresse http://localhost:3000. + +<div class="Alert"> + +Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire <code>pages</code> aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages + +</div> + +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/nuxtjs.org/content/fr/.archives/guide/modules.md b/nuxtjs.org/content/fr/.archives/guide/modules.md new file mode 100644 index 000000000..1b00f4c8f --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/modules.md @@ -0,0 +1,371 @@ +--- +title: Modules +description: Les modules sont des extensions de Nuxt.js qui peuvent étendre ses fonctionnalités de base et d'y ajouter des intégrations. +category: getting-started +position: 109 +--- + +> Les modules sont des extensions de Nuxt.js qui peuvent étendre ses fonctionnalités de base et d'y ajouter des intégrations. + +## Introduction + +Lors du développement d'applications de production avec Nuxt, vous découvrirez bientôt que les fonctionnalités de base du framework ne sont pas suffisantes. Nuxt peut être étendu avec des options de configuration et des plugins, mais maintenir ces personnalisations à travers plusieurs projets est fastidieux, répétitif et prend du temps. D'un autre côté, prendre en charge les besoins de chaque projet en dehors de son conteneur rendrait Nuxt très complexe et difficile à utiliser. + +C'est l'une des raisons pour lesquelles Nuxt fournit un système de modules d'ordre supérieur qui facilite l'extension du cœur. Les modules sont des fonctions simples qui sont appelées séquentiellement lors du démarrage de Nuxt. Le framework attend la fin de chaque module avant de continuer. De cette façon, les modules peuvent presque personnaliser tous les +aspects de Nuxt. Grâce à la conception modulaire de Nuxt (basé sur [Tapable](https://github.com/webpack/tapable) de webpack), les modules peuvent facilement enregistrer des écouteurs pour certains points d'entrée comme l'initialisation du générateur. Les modules peuvent également remplacer les modèles, configurer webpack, ajouter des bibliothèques CSS et effectuer de nombreuses autres tâches utiles. + +Mieux encore, les modules de Nuxt peuvent être injecté à l'intérieur de paquets npm. Cela les rends facile d'être réutiliser dans tous les projets et partager avec la communauté Nuxt, contribuant ainsi à créer un eco-système de modules complémentaires de bonne qualité. + +Les modules sont parfaits si vous: + +- Êtes un membre d'une **équipe agile** qui doit démarrer rapidement de nouveaux projets. +- Êtes fatigué de **ré-inventer** la roue pour des tâches communes comme l'intégration de Google Analytics. +- Êtes un adèpte de **l'Open Source** qui souhaite **partager** facilement son travail avec la communauté. +- Êtes un membre d'une **entreprise** qui valorise **la qualité** et **la ré-utilisabilité**. +- Êtes souvent contre les délais courts et que vous n'avez pas le temps d'entrer dans les détails de chaque nouvelle bibliothèque ou intégration. +- En avez assez de devoir gérer les modifications apportées aux interfaces de bas niveau, et avez besoin de chose qui **fonctionne simplement™** + +## Liste des modules de Nuxt.js + +L'équipe de Nuxt.js offre des modules **officielles** : + +- [@nuxt/http](https://http.nuxtjs.org): Manière légère et universelle de réaliser des requêtes HTTP, basé sur [ky-universal](https://github.com/sindresorhus/ky-universal) +- [@nuxtjs/axios](https://axios.nuxtjs.org): Intégration sécurisée et facile d'Axios avec Nuxt.js pour effectuer des requêtes HTTP +- [@nuxtjs/pwa](https://pwa.nuxtjs.org): Boostez Nuxt avec une solution PWA fortement testée, mise à jour et stable +- [@nuxtjs/auth](https://auth.nuxtjs.org): Module d'authentification pour Nuxt.js, offrant différents schémas et stratégies + +Une liste des modules de Nuxt.js créés par la communauté est disponible sur https://github.com/topics/nuxt-module + +## Écrire un module basique + +Comme déjà mentionné, les modules ne sont que des fonctions simples. Ils peuvent être empaquetés sous forme de module npm ou directement inclus dans le code source d'un projet. + +**modules/simple.js** + +```js +export default function SimpleModule(moduleOptions) { + // Écrire votre code ici +} + +// REQUIS si vous publiez le module en tant que paquet npm +// module.exports.meta = require('./package.json') +``` + +**`moduleOptions`** + +Il s'agit de l'objet transmis à l'aide d'un tableau dans `modules` par l'utilisateur qui peut être utilisé pour personnalisé son comportement. + +**`this.options`** + +Vous pouvez accéder directement aux options de Nuxt à l'aide de cette référence. Il s'agit du contenu de l'utilisateur du fichier `nuxt.config.js` avec toutes les options par défaut assignés. Cela peut être utilisé pour partager les options entre les modules. + +**`this.nuxt`** + +Ceci est une référence à l'instance courante de Nuxt. Se référer à [la documentation de la classe Nuxt pour les méthodes disponibles](/api/internals-nuxt). + +**`this`** + +Contexte des modules. Veuillez consulter la documentation de la classe [ModuleContainer](/api/internals-module-container) pour les méthodes disponibles. + +**`module.exports.meta`** + +Cette ligne est **obligatoire** si vous publiez votre module en tant que paquet npm. Nuxt utilise en interne la méta-données pour mieux travailler avec votre paquet. + +**nuxt.config.js** + +```js +export default { + modules: [ + // Utilisation simple + '~/modules/simple'[ + // Passer des options directement + ('~/modules/simple', { token: '123' }) + ] + ] +} +``` + +Nous demandons ensuite à Nuxt de charger certains modules spécifiques pour un projet avec des paramètres optionnels comme options. Veuillez consulter la documentation [de configuration de modules](/api/configuration-modules) pour plus d'informations ! + +## Modules asynchrones + +Tous les modules ne feront pas tout de manière synchrone. Par exemple, vous voudrez peut-être développer un module qui doit récupérer des données d'une API ou faire des appels asynchrones entrées/sorties. Pour ça, Nuxt supporte les modules asynchrones qui peuvent renvoyer une promesse ou un appel de retour. + +## Modules de construction uniquement + +Généralement, les modules ne sont requis que pendant le développement et la construction. Utiliser `buildModules` permet d'accélérer le démarrage de la production et de réduire considérablement la taille du `node_modules` pour les déploiements de production. Si vous êtes un auteur de module, il est fortement recommandé de suggérer aux utilisateurs d'installer votre paquet en tant que `devDependency` et d'utiliser `buildModules` à la place de `modules` dans `nuxt.config.js`. + +Votre module est un `buildModule` sauf si: + +- Il fournit un serveur +- Il doit enregistrer un écouteur d'execution à Node.js (Comme sentry) +- Il affecte le comportant de vue-renderer ou utilise un écouteur depuis l'espace de nom `server:` ou `vue-renderer:` +- Tout ce qui est en dehors de la portée de webpack (Astuce: les plugins et les modèles sont compilés et dans la portée de webpack) + +<div class="Alert Alert--orange"> + +<b>NOTE:</b> Si vous comptez utiliser <code>buildModules</code> veuillez mentionner que cette fonctionnalité n'est disponible que depuis la version de Nuxt <b>v2.9</b>. Les utilisateurs disposant d'une version antérieure doivent mettre à jour Nuxt ou utiliser la section <code>modules</code>. + +</div> + +### Utiliser async/await + +```js +import fse from 'fs-extra' + +export default async function asyncModule() { + // Vous pouvez faire des appels asynchrones ici en utilisant `async`/`await` + const pages = await fse.readJson('./pages.json') +} +``` + +### Retourner une Promesse + +```js +import axios from 'axios' + +export default function asyncModule() { + return axios + .get('https://jsonplaceholder.typicode.com/users') + .then(res => res.data.map(user => '/users/' + user.username)) + .then(routes => { + // Faire quelque chose en étandant les routes de Nuxt + }) +} +``` + +## Extraits courants + +### Options de haut niveau + +Parfois, il est plus pratique d'utiliser des options de premier niveau lors de l'enregistrement des modules dans `nuxt.config.js`. Cela nous permet de combiner plusieurs sources d'options. + +**nuxt.config.js** + +```js +export default { + modules: [['@nuxtjs/axios', { anotherOption: true }]], + + // Le module axios en est conscient en utilisant `this.options.axios` + axios: { + option1, + option2 + } +} +``` + +**module.js** + +```js +export default function (moduleOptions) { + // `options` contiendra option1, option2 et anotherOption + const options = Object.assign({}, this.options.axios, moduleOptions) + + // ... +} +``` + +### Fournir des plugins + +Il est courant que les modules fournissent un ou plusieurs plugins lorsqu'ils sont ajoutés. Par exemple, le module [bootstrap-vue](https://bootstrap-vue.js.org) nécessiterait de s'enregistrer dans Vue. Dans de telles situations, nous pouvons utiliser l'aide de `this.addPlugin`. + +**plugin.js** + +```js +import Vue from 'vue' +import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm' + +Vue.use(BootstrapVue) +``` + +**module.js** + +```js +import path from 'path' + +export default function nuxtBootstrapVue(moduleOptions) { + // Enregistre le modèle `plugin.js` + this.addPlugin(path.resolve(__dirname, 'plugin.js')) +} +``` + +### Modèle de plugins + +Les modèles et plugins enregistrés peuvent exploiter les [modèles lodash](https://lodash.com/docs/4.17.4#template) pour modifier conditionnellement la sortie des plugins enregistrés. + +**plugin.js** + +```js +// Modifier Google Analytics UA +ga('create', '<%= options.ua %>', 'auto') + +<% if (options.debug) { %> +// Code de développement uniquement +<% } %> +``` + +**module.js** + +```js +import path from 'path' + +export default function nuxtGoogleAnalytics(moduleOptions) { + // Enregistre le modèle `plugin.js` + this.addPlugin({ + src: path.resolve(__dirname, 'plugin.js'), + options: { + // Nuxt remplacera `options.ua` par `123` lors de la copie du plugin dans le projet + ua: 123, + + // les parties conditionnelles du code de développement seront supprimées du code du plugin sur les builds de production + debug: this.options.dev + } + }) +} +``` + +### Ajouter une bibliothèque CSS + +Si votre module fournit une bibliothèque CSS, assurez-vous de vérifier si l'utilisateur a déjà inclus la bibliothèque pour éviter les doublons, et ajoutez **une option pour désactiver** la bibliothèque CSS dans le module. + +**module.js** + +```js +export default function (moduleOptions) { + if (moduleOptions.fontAwesome !== false) { + // Ajout de Font Awesome + this.options.css.push('font-awesome/css/font-awesome.css') + } +} +``` + +### Émettre des ressources + +<!-- todo: up2date? --> + +Nous pouvons enregistrer des plugins webpack pour émettre des ressources lors de la construction. + +**module.js** + +```js +export default function (moduleOptions) { + const info = 'Built by awesome module - 1.3 alpha on ' + Date.now() + + this.options.build.plugins.push({ + apply(compiler) { + compiler.plugin('emit', (compilation, cb) => { + // Cela générera `.nuxt/dist/info.txt' avec le contenu de la variable info. + // La source peut aussi être tampon + compilation.assets['info.txt'] = { + source: () => info, + size: () => info.length + } + + cb() + }) + } + }) +} +``` + +### Enregistrer des chargements personnalisés webpack + +Nous pouvons faire la même chose que `build.extend` dans`nuxt.config.js` en utilisant `this.extendBuild`. + +**module.js** + +```js +export default function (moduleOptions) { + this.extendBuild((config, { isClient, isServer }) => { + // chargement de `.foo` + config.module.rules.push({ + test: /\.foo$/, + use: [...] + }) + + // Personnalisez les chargements existants + // Reportez-vous au code source des composants internes de Nuxt: + // https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js + const barLoader = config.module.rules.find(rule => rule.loader === 'bar-loader') + }) +} +``` + +## Exécuter des tâches sur des écouteurs spécifiques + +Votre module peut avoir besoin de faire des choses uniquement dans certaines conditions spécifiques et pas seulement lors de l'initialisation de Nuxt. Nous pouvons utiliser le puissant système d'écouteurs de Nuxt.js pour effectuer des tâches sur des événements spécifiques (basés sur [Hookable](https://github.com/nuxt-contrib/hookable)). Nuxt attendra votre fonction si elle retourne une promesse ou est définie en tant que `async`. + +Voici quelques exemples de base : + +```js +export default function myModule() { + this.nuxt.hook('modules:done', moduleContainer => { + // Cela sera appelé lorsque tous les modules auront fini de charger + }) + + this.nuxt.hook('render:before', renderer => { + // Appelé après la création du moteur de rendu + }) + + this.nuxt.hook('build:compile', async ({ name, compiler }) => { + // Appelé avant le démarrage du compilateur (par défaut: webpack) + }) + + this.nuxt.hook('generate:before', async generator => { + // Ce sera appelé avant que Nuxt génère vos pages + }) +} +``` + +## Commandes de paquets de module + +**Expérimentale** + +À partir de la version `v2.4.0`, vous pouvez ajouter des commandes nuxt personnalisées via le paquet d'un module Nuxt. Pour ce faire, vous devez suivre l'API `NuxtCommand` lors de la définition de votre commande. Un exemple simple placé hypothétiquement dans `my-module/bin/command.js` ressemble à ceci : + +```js +#!/usr/bin/env node + +const consola = require('consola') +const { NuxtCommand } = require('@nuxt/cli') + +NuxtCommand.run({ + name: 'command', + description: 'My Module Command', + usage: 'command <foobar>', + options: { + foobar: { + alias: 'fb', + type: 'string', + description: 'Simple test string' + } + }, + run(cmd) { + consola.info(cmd.argv) + } +}) +``` + +Quelques points importants ici. Tout d'abord, notez l'appel à `/usr/bin/env` pour récupérer l'exécutable Node. Notez également que la syntaxe du module ES ne peut pas être utilisée pour les commandes, sauf si vous incorporez manuellement [`esm`](https://github.com/standard-things/esm) dans votre code. + +Ensuite, vous remarquerez comment `NuxtCommand.run()` est utilisé pour spécifier les paramètres et le comportement de la commande. Les options sont définies dans `options`, qui sont analysées via [`minimist`](https://github.com/substack/minimist). Une fois les arguments analysés, `run()` est automatiquement appelé avec l'instance `NuxtCommand` comme premier paramètre. + +Dans l'exemple ci-dessus, `cmd.argv` est utilisé pour récupérer les arguments de ligne de commande analysés. Il y a plus de méthodes et de propriétés dans `NuxtCommand` - une documentation à leur sujet sera fournie à mesure que cette fonctionnalité sera testée et améliorée. + +Pour rendre votre commande reconnaissable par la CLI Nuxt, répertoriez-la dans la section `bin` de votre package.json, en utilisant la convention `nuxt-module`, où `module` se rapporte au nom de votre paquet. Avec ce binaire central, vous pouvez utiliser `argv` pour analyser plus de `sous-commandes` pour votre commande si vous le souhaitez. + +```js +{ + "bin": { + "nuxt-foobar": "./bin/command.js" + } +} +``` + +Une fois votre paquet installé (via npm ou Yarn), vous pourrez exécuter `nuxt foobar ...` sur la ligne de commande. + +<div class="Alert"> + +Il y a beaucoup plus d'écouteurs et de possibilités pour les modules. Veuillez lire [Nuxt Internes](/api/internals) pour en savoir plus sur l'API interne de Nuxt. + +</div> diff --git a/nuxtjs.org/content/fr/.archives/guide/plugins.md b/nuxtjs.org/content/fr/.archives/guide/plugins.md new file mode 100644 index 000000000..cd1de2f33 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/plugins.md @@ -0,0 +1,274 @@ +--- +title: Plugins +description: Nuxt.js vous permet de définir les plugins JavaScript à exécuter avant d'instancier l'application Vue.js racine. Cela est particulièrement pratique quand vous utilisez vos propres bibliothèques ou modules externes. +category: getting-started +position: 108 +--- + +> Nuxt.js vous permet de définir les plugins JavaScript à exécuter avant d'instancier l'application Vue.js racine. Cela est particulièrement pratique quand vous utilisez vos propres bibliothèques ou modules externes. + +<div class="Alert"> + +Il est important de savoir que, dans le [cycle de vie d'une instance de Vue](https://fr.vuejs.org/v2/guide/instance.html#Diagramme-du-cycle-de-vie), les hooks `beforeCreate` et `created` sont appelés **à la fois du côté client et du côté serveur**. Tous les autres _hooks_ ne sont appelés que depuis le client. + +</div> + +## Modules externes + +Nous souhaitons utiliser des packages / modules externes dans notre application, un excellent exemple est [axios](https://github.com/mzabriskie/axios) pour les requêtes HTTP depuis le serveur et le client. + +Tout d'abord, nous l'installons via npm : + +```bash +npm install --save axios +``` + +Puis nous pouvons l'utiliser directement dans nos pages : + +```html +<template> + <h1>{{ titre }}</h1> +</template> + +<script> + import axios from 'axios' + + export default { + async asyncData({ params }) { + let { data } = await axios.get(`https://my-api/posts/${params.id}`) + return { titre: data.titre } + } + } +</script> +``` + +## Plugins Vue + +Si nous voulons utiliser [vue-notifications](https://github.com/se-panfilov/vue-notifications) pour afficher des notifications dans notre application, nous devons configurer le plugin avant de lancer l'application. + +Dans `plugins/vue-notifications.js` : + +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + +Puis nous ajoutons le fichier dans l'attribut `plugins` de `nuxt.config.js` : + +```js +export default { + plugins: ['~/plugins/vue-notifications'] +} +``` + +Pour en savoir plus sur l'attribut `plugins`, consultez [La propriété `plugins`](/api/configuration-plugins) de l'API. + +### ES6 plugins + +Si le plugin est situé dans `node_modules` et exporter en tant que module ES6, vous devrez ajouter l'option de construction `transpile` : + +```js +module.exports = { + build: { + transpile: ['vue-notifications'] + } +} +``` + +Vous pouvez vous référer à la documentation de [configuration](/api/configuration-build/#transpile) pour plus d'options de construction. + +## Injection dans \$root et le contexte + +Parfois vous souhaitez rendre des fonctions ou des valeurs disponibles à travers votre application. Vous pouvez injecter ces variables dans les instances Vue (côté client), le contexte (côté serveur) et même dans le magasin Vuex. C'est une convention de préfixer ces fonctions avec un `$`. + +### Injection dans les instances Vue + +L'injection de contenu dans les instances Vue fonctionne de la même façon que vous pourriez le faire dans une application Vue standard. + +`plugins/injection-vue.js`: + +```js +import Vue from 'vue' + +Vue.prototype.$maFonctionInjectee = chaine => + console.log('Ceci est un example', chaine) +``` + +`nuxt.config.js`: + +```js +export default { + plugins: ['~/plugins/injection-vue.js'] +} +``` + +Vous pouvez maintenant utiliser cette fonction dans tous vos composants Vue. + +`composant-exemple.vue`: + +```js +export default { + mounted() { + this.$maFonctionInjectee('test') + } +} +``` + +### Injection dans le contexte + +L'injection de contenu dans les instances Vue fonctionne de la même façon que vous pourriez le faire dans une application Vue standard. + +`plugins/injection-contexte.js`: + +```js +export default ({ app }, inject) => { + // Défini la fonction directement dans l'objet context.app + app.maFonctionInjectee = chaine => + console.log('Ok, une autre fonction', chaine) +} +``` + +`nuxt.config.js`: + +```js +export default { + plugins: ['~/plugins/injection-contexte.js'] +} +``` + +La fonction est maintenant disponible partout où vous aurez accès au `context` (par exemple dans `asyncData` et `fetch`). + +`composant-exemple-contexte.vue`: + +```js +export default { + asyncData(context) { + context.app.maFonctionInjectee('Contexte !') + } +} +``` + +### Injection combinée + +Si vous avez besoin de la fonction dans le `context`, les instances Vue et peut-être aussi dans le magasin Vuex, vous pouvez utiliser la fonction `inject`, qui est le second paramètre de la fonction exportée des plugins. + +L'injection de contenu dans les instances Vue fonctionne de la même façon que vous pourriez le faire dans une application Vue standard. le `$` sera automatiquement ajouté au début de la fonction. + +`plugins/injection-combinee.js`: + +```js +export default ({ app }, inject) => { + inject('maFonctionInjectee', (chaine) => console.log('C'est simple !', chaine)) +} +``` + +`nuxt.config.js`: + +```js +export default { + plugins: ['~/plugins/injection-combinee.js'] +} +``` + +Maintenant la fonction peut être utilisé depuis `context`, via `this` dans les instances Vue et via `this` dans le magasin `actions`/`mutations`. + +`composant-exemple-contexte.vue`: + +```js +export default { + mounted() { + this.$maFonctionInjectee('fonctionne dans mounted()') + }, + asyncData(context) { + context.app.$maFonctionInjectee('fonctionne avec le contexte') + } +} +``` + +`store/index.js`: + +```js +export const state = () => ({ + uneValeur: '' +}) + +export const mutations = { + changeUneValeur(state, nouvelleValeur) { + this.$maFonctionInjectee('accessible dans les mutations') + state.uneValeur = nouvelleValeur + } +} + +export const actions = { + setUneValeurAvecQuelquechose({ commit }) { + this.$maFonctionInjectee('accessible dans les actions') + const nouvelleValeur = 'quelquechose' + commit('changeUneValeur', nouvelleValeur) + } +} +``` + +## Côté client uniquement + +Certains plugins fonctionnent **uniquement dans un navigateur** due à un manque de support SSR. Vous pouvez utiliser l'option `ssr: false` dans `plugins` pour exécuter le fichier uniquement côté client. + +Exemple : + +`nuxt.config.js`: + +```js +export default { + plugins: [{ src: '~/plugins/notifications-vue', ssr: false }] +} +``` + +`plugins/notifications-vue.js`: + +```js +import Vue from 'vue' +import NotificationsVue from 'notifications-vue' + +Vue.use(NotificationsVue) +``` + +Dans le cas où vous devez importer certaines bibliothèques uniquement _côté serveur_, vous pouvez vérifier si la variable `process.server` est définie à `true`. + +Si vous avez besoin également de savoir si vous êtes dans une application générée (via `nuxt generate`), vous pouvez vérifier la propriété `process.static` est à `true`. C'est le cas seulement pendant la génération et après. + +Vous pouvez aussi combiner les deux options pour connaitre si une page qui est en train d'être rendue par le serveur avec `nuxt generate` avant d'être sauvée (`process.static && process.server`). + +**Note**: Depuis Nuxt.js 2.4+, `mode` a été introduit comme option de `plugins` pour spécifier le type de plugin, les valeurs possibles sont : `client` ou `server`. `ssr: false` sera adapté pour `mode: 'client'` et déprécié dans le futur livrable majeur. + +Exemple: + +`nuxt.config.js`: + +```js +export default { + plugins: [ + { src: '~/plugins/both-sides.js' }, + { src: '~/plugins/client-only.js', mode: 'client' }, + { src: '~/plugins/server-only.js', mode: 'server' } + ] +} +``` + +### Convention de nommage d'un plugin + +Si votre plugin doit être executé uniquement côté client ou serveur, `.client.js` ou `.server.js` peut être appliqué comme extension de fichier, le fichier sera automatiquement inclu dans le mode correspondant. + +Exemple: + +`nuxt.config.js`: + +```js +export default { + plugins: [ + '~/plugins/foo.client.js', // côté client uniquement + '~/plugins/bar.server.js', // côté serveur uniquement + '~/plugins/baz.js' // côté client et serveur + ] +} +``` diff --git a/nuxtjs.org/content/fr/.archives/guide/routing.md b/nuxtjs.org/content/fr/.archives/guide/routing.md new file mode 100644 index 000000000..74184dc9e --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/routing.md @@ -0,0 +1,470 @@ +--- +title: Routage +description: Nuxt.js utilise le système de fichiers pour générer les routes de votre application web. +category: getting-started +position: 104 +--- + +> Nuxt.js génère automatiquement la configuration pour [vue-router](https://github.com/vuejs/vue-router) en fonction de votre arborescence de fichiers Vue se trouvant au sein du répertoire `pages`. + +<div class="Alert Alert--grey"> + +Pour naviguer entre les pages, nous recommandons l'utilisation du composant [`<nuxt-link>`](/api/components-nuxt-link). + +</div> + +Par exemple : + +```html +<template> + <nuxt-link to="/">Accueil</nuxt-link> +</template> +``` + +## Routes basiques + +Cette arborescence : + +```bash +pages/ +--| user/ +-----| index.vue +-----| one.vue +--| index.vue +``` + +génèrera automatiquement : + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'user', + path: '/user', + component: 'pages/user/index.vue' + }, + { + name: 'user-one', + path: '/user/one', + component: 'pages/user/one.vue' + } + ] +} +``` + +## Routes dynamiques + +Pour définir une route dynamique à l'aide d'un paramètre, vous devez définir un fichier `.vue` OU un répertoire **préfixé par un souligné (`_`)**. + +<div class="Promo__Video"> + <a href="https://vueschool.io/lessons/nuxtjs-dynamic-routes?friend=nuxt" target="_blank"> + <p class="Promo__Video__Icon"> + Visionner un cours gratuit sur les <strong>routes dynamiques</strong> sur Vue School + </p> + </a> +</div> + +Cette arborescence : + +```bash +pages/ +--| _slug/ +-----| comments.vue +-----| index.vue +--| users/ +-----| _id.vue +--| index.vue +``` + +génèrera automatiquement : + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'users-id', + path: '/users/:id?', + component: 'pages/users/_id.vue' + }, + { + name: 'slug', + path: '/:slug', + component: 'pages/_slug/index.vue' + }, + { + name: 'slug-comments', + path: '/:slug/comments', + component: 'pages/_slug/comments.vue' + } + ] +} +``` + +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`. + +<div class="Alert Alert--orange"> + +**Attention :** les routes dynamiques sont ignorées par la commande `generate`, consultez la configuration de l'API à propos de [La propriété `generate`](/api/configuration-generate#routes) + +</div> + +### Validation des paramètres de route + +Nuxt.js vous permet de définir une méthode de validation dans votre composant de routage dynamique. + +Par exemple : `pages/users/_id.vue` + +```js +export default { + validate({ params }) { + // Doit être un nombre + return /^\d+$/.test(params.id) + } +} +``` + +Si la méthode de validation ne renvoie pas `true` ou une `Promise` résolue à `true` ou génère une erreur, Nuxt.js chargera automatiquement la page d'erreur 404 ou la page d'erreur 500 en cas d'erreur. + +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 + +Nuxt.js vous permet de créer des routes imbriquées en utilisant les routes enfants de vue-router. + +Pour définir le composant parent d'une route imbriquée, vous devez créer un fichier Vue avec le **même nom que le répertoire** qui contient les vues enfants. + +<div class="Alert Alert--orange"> + +<b>Attention :</b> n'oubliez pas d'écrire `<nuxt-child/>` au sein du composant parent (fichier <code>.vue</code>). + +</div> + +Cette arborescence : + +```bash +pages/ +--| users/ +-----| _id.vue +-----| index.vue +--| users.vue +``` + +génèrera automatiquement : + +```js +router: { + routes: [ + { + path: '/users', + component: 'pages/users.vue', + children: [ + { + path: '', + component: 'pages/users/index.vue', + name: 'users' + }, + { + path: ':id', + component: 'pages/users/_id.vue', + name: 'users-id' + } + ] + } + ] +} +``` + +## Routes dynamiques imbriquées + +Ce scénario ne devrait pas arriver souvent, mais il est possible avec Nuxt.js d'avoir des routes dynamiques enfants dans des routes dynamiques parentes. + +Cette arborescence : + +```bash +pages/ +--| _category/ +-----| _subCategory/ +--------| _id.vue +--------| index.vue +-----| _subCategory.vue +-----| index.vue +--| _category.vue +--| index.vue +``` + +génèrera automatiquement : + +```js +router: { + routes: [ + { + path: '/', + component: 'pages/index.vue', + name: 'index' + }, + { + path: '/:category', + component: 'pages/_category.vue', + children: [ + { + path: '', + component: 'pages/_category/index.vue', + name: 'category' + }, + { + path: ':subCategory', + component: 'pages/_category/_subCategory.vue', + children: [ + { + path: '', + component: 'pages/_category/_subCategory/index.vue', + name: 'category-subCategory' + }, + { + path: ':id', + component: 'pages/_category/_subCategory/_id.vue', + name: 'category-subCategory-id' + } + ] + } + ] + } + ] +} +``` + +### Itinéraire dynamique inconnu imbriqué + +Si vous ne connaissez pas la profondeur de la structure de vos URL, vous pouvez utiliser `_.vue` pour correspondre dynamiquement au chemin demandé. Ceci gérera les requêtes qui ne correpondent pas à une requête _plus spécifique_ . + +Cette arborescence : + +```bash +pages/ +--| personne/ +-----| _id.vue +-----| index.vue +--| _.vue +--| index.vue +``` + +traitera les requêtes comme cela : + +| Chemin | Fichier | +| ------------------------- | -------------------- | +| `/` | `index.vue` | +| `/personne` | `personne/index.vue` | +| `/personne/123` | `personne/_id.vue` | +| `/apropos` | `_.vue` | +| `/apropos/carriere` | `_.vue` | +| `/apropos/carriere/paris` | `_.vue` | + +**Note :** traiter les pages 404 est maintenant inclu dans la logique de la page `_.vue`. [Vous trouverez ici plus d'information sur les redirections 404](/guide/async-data#handling-errors). + +### Routes nommées + +Pour afficher les routes nommées, vous pouvez utiliser les composants `<nuxt name="top"/>` ou `<nuxt-child name="top"/>` dans votre layout/page. Pour spécifier une route nommée dans une page vous devez d'abord étendre la config de votre routeur dans le fichier `nuxt.config.js`: + +```js +export default { + router: { + extendRoutes(routes, resolve) { + const index = routes.findIndex(route => route.name === 'main') + routes[index] = { + ...routes[index], + components: { + default: routes[index].component, + top: resolve(__dirname, 'components/mainTop.vue') + }, + chunkNames: { + top: 'components/mainTop' + } + } + } + } +} +``` + +Il est nécessaire d'étendre la route en question avec 2 propriétés, `components` and `chunkNames`. La vue nommée dans cet exemple a dans sa configuration une clef `name` avec comme valeur `top`. + +Pour voir un exemple, jetez un coup d'œil au [examples de vue nommées](/examples/named-views). + +### Alternative pour application monopage + +Vous pouvez activer l'alternative pour application monopage pour les routes dynamiques aussi. Nuxt.js va générer un fichier supplémentaire identique à `index.html` qui pourra être utilisé en `mode: 'spa'`. La plupart des services d'hébergement statiques peuvent être configurés pour utiliser le template d'application monopage si aucun fichier ne concorde. Les informations de `head` ou HTML ne seront pas inclus mais les données seront toujours résolues et chargées depuis l'API. + +Nous pouvons activer cela dans notre fichier `nuxt.config.js` : + +```js +export default { + generate: { + fallback: true, // si vous souhaitez utiliser un fichier '404.html' + fallback: 'my-fallback/file.html' // si votre hébergement nécessite une localisation personnalisée + } +} +``` + +#### Implémentation pour Surge + +Surge [peut gérer](https://surge.sh/help/adding-a-custom-404-not-found-page) aussi bien les fichiers `200.html` que `404.html`. `generate.fallback` est mis à `200.html` par défaut, donc vous devez changer cela. + +#### Implémentation pour GitHub Pages et Netlify + +GitHub Pages et Netlify reconnaissent les fichiers `404.html` automatiquement, donc mettre `generate.fallback` à `true` est tout ce que vous avez besoin de faire ! + +#### Implémentation pour Firebase Hosting + +Pour utiliser Firebase Hosting, configurez `generate.fallback` à `true` et utilisez la configuration suivante ([plus d'informations](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites)) : + +```json +{ + "hosting": { + "public": "dist", + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], + "rewrites": [ + { + "source": "**", + "destination": "/404.html" + } + ] + } +} +``` + +## Transitions + +Nuxt.js utilise le composant [`<transition>`](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) afin de vous permettre de créer de superbes transitions / animations entre vos routes. + +### Paramètres globaux + +<div class="Alert Alert--nuxt-green"> + +<b>Info :</b> dans Nuxt.js, le nom de la transition par défaut est `"page"`. + +</div> + +Pour ajouter une transition de fondu à chaque page de votre application, nous avons besoin d'un fichier CSS qui est partagé sur toutes nos routes. Commençons par créer un fichier dans le dossier `assets`. + +Notre CSS global dans `assets/main.css` : + +```css +.page-enter-active, +.page-leave-active { + transition: opacity 0.5s; +} +.page-enter, +.page-leave-active { + opacity: 0; +} +``` + +Nous ajoutons son chemin dans le tableau des `css` de notre fichier de configuration `nuxt.config.js` : + +```js +export default { + css: ['~/assets/main.css'] +} +``` + +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 + +Vous êtes également libre de définir une transition personnalisée pour une seule page à l'aide de la propriété `transition`. + +Nous ajoutons une nouvelle classe dans notre CSS global `assets/main.css` : + +```css +.test-enter-active, +.test-leave-active { + transition: opacity 0.5s; +} +.test-enter, +.test-leave-active { + opacity: 0; +} +``` + +Puis, nous utilisons la propriété transition pour définir le nom de la classe à utiliser pour cette transition de page : + +```js +export default { + transition: 'test' +} +``` + +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 + +> Le middleware vous permet de définir une fonction personnalisée qui sera exécutée avant le rendu d'une page ou d'un groupe de pages. + +**Tous les middlewares devraient être placés dans le répertoire `middleware/`.** Le nom du fichier étant le nom du middleware (`middleware/auth.js` deviendra le middleware `auth`). + +Un middleware reçoit [le contexte](/api#context) comme premier argument : + +```js +export default function (context) { + context.userAgent = process.server + ? context.req.headers['user-agent'] + : navigator.userAgent +} +``` + +En mode universel, les middlewares seront appelés une seule fois côté serveur (à la première requête à l'application Nuxt ou sur le rechargement de la page) et côté client lors de la navigation vers une autre route. En mode SPA, les middlewares seront appelés côté client sur la première requête et à chaque navigation à travers les routes. + +Le middleware sera exécuté en série dans l'ordre suivant : + +1. `nuxt.config.js` (dans l'ordre interne du fichier) +2. Mises en page correspondantes +3. Pages correspondantes + +Un middleware peut être asynchrone, retourner une `Promise` ou utiliser une fonction de rappel en second argument : + +`middleware/stats.js` + +```js +import axios from 'axios' + +export default function ({ route }) { + return axios.post('http://my-stats-api.com', { + url: route.fullPath + }) +} +``` + +Puis, dans `nuxt.config.js`, utilisez la clé `router.middleware` : + +`nuxt.config.js` + +```js +export default { + router: { + middleware: 'stats' + } +} +``` + +Maintenant le middleware `stats` sera appelé à chaque changement de routes. + +Vous pouvez ajouter votre middleware à une mise en page spécifique ou à une page comme ceci : + +`pages/index.vue` or `layouts/default.vue` + +```js +export default { + middleware: 'stats' +} +``` + +Pour voir un exemple d'usage utilisant les middlewares, consultez [example-auth0](https://github.com/nuxt/example-auth0) sur GitHub. diff --git a/nuxtjs.org/content/fr/.archives/guide/typescript.md b/nuxtjs.org/content/fr/.archives/guide/typescript.md new file mode 100644 index 000000000..4d2a13201 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/typescript.md @@ -0,0 +1,8 @@ +--- +title: Support du TypeScript +description: Support officiel de TypeScript par Nuxt.js +category: getting-started +position: 112 +--- + +Nuxt.js supporte totalement TypeScript (runtime et buildtime). Pour la documentation, veuillez vous référer à [https://typescript.nuxtjs.org/](https://typescript.nuxtjs.org/). diff --git a/nuxtjs.org/content/fr/.archives/guide/views.md b/nuxtjs.org/content/fr/.archives/guide/views.md new file mode 100644 index 000000000..6d3990571 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/views.md @@ -0,0 +1,234 @@ +--- +title: Vues +description: La section des 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, mises en page, pages et entête HTML). +category: getting-started +position: 105 +--- + +> La section des 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, mises en page, pages et entête HTML). + +![nuxt-views-schema](/nuxt-views-schema.svg) + +## Document + +> Vous pouvez personnaliser le modèle HTML de l'application utilisée par Nuxt.js pour inclure des scripts ou du CSS conditionnel. + +Pour étendre le modèle, créez un fichier `app.html` à la racine de votre projet. + +Le modèle par défaut utilisé par Nuxt.js est le suivant : + +```html +<!DOCTYPE html> +<html {{ HTML_ATTRS }}> + <head {{ HEAD_ATTRS }}> + {{ HEAD }} + </head> + <body {{ BODY_ATTRS }}> + {{ APP }} + </body> +</html> +``` + +Un cas usuel d'utilisation d'un modèle personnalisé d'application est d'ajouter du CSS conditionnel pour IE : + +```html +<!DOCTYPE html> +<!--[if IE 9]><html lang="fr-FR" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]--> +<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]--> + <head {{ HEAD_ATTRS }}> + {{ HEAD }} + </head> + <body {{ BODY_ATTRS }}> + {{ APP }} + </body> +</html> +``` + +<!-- TODO: Load polyfills here? --> + +## Mises en page + +Les mises en pages sont une aide appréciable quand vous voulez changer l'aspect de votre application Nuxt.js. Que vous souhaitez inclure une barre latérale ou avoir une disposition distincte pour mobile ou ordinateur + +### Mise en page par défaut + +Vous pouvez étendre la mise en page principale en ajoutant un fichier `layouts/default.vue`. Il sera utilisé pour toutes les pages qui n'ont pas de mise en page spécifiée. + +<div class="Alert Alert--nuxt-green"> + +<b>Info :</b> 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. + +</div> + +La mise en page fournie par défaut fait simplement trois lignes et affiche simplement le composant page : + +```html +<template> + <nuxt /> +</template> +``` + +### Mise en page personnalisée + +Chaque fichier (_premier niveau_) dans le répertoire `layouts` créera une mise en page personnalisée accessible via la propriété `layout` des composants page. + +Disons que nous voulons créer une mise en page de blog et l'enregistrer sous `layouts/blog.vue` : + +```html +<template> + <div> + <div>Ma navigation de blog est ici</div> + <nuxt /> + </div> +</template> +``` + +Maintenant nous devons indiquer aux pages (par exemple `pages/posts.vue`) d'utiliser votre mise en page personnalisée : + +```html +<template> + <!-- Your template --> +</template> +<script> + export default { + layout: 'blog' + // définitions du composant page + } +</script> +``` + +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). + +<!-- TODO: Scoped styles best practice --> + +### Page d'erreur + +La page d'erreur est une _page composant_ qui sera toujours affichée lorsqu'une erreur se produit (qui ne survient pas pendant le rendu côté serveur). + +<div class="Alert Alert--orange"> + +<b>Attention :</b> Bien que ce fichier soit placé dans le répertoire <code>layouts</code>, il doit être traité comme une <b>page</b>. + +</div> + +Comme mentionné précédemment, cette mise en page est spéciale, car vous **ne devez pas** inclure `<nuxt/>` dans cette mise en page. Vous devez voir cette mise en page comme un composant affiché quand une erreur survient (`404`, `500`, etc.). Similaire aux autre composants page, vous pouvez définir une mise en page personnalisée pour la page d'erreur. + +Le code source de la page d'erreur par défaut est [disponible sur GitHub](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/components/nuxt-error.vue). + +Vous pouvez personnaliser la page d'erreur en ajoutant un fichier `layouts/error.vue` : + +```html +<template> + <div class="container"> + <h1 v-if="error.statusCode === 404">Page non trouvée</h1> + <h1 v-else>Une erreur s'est produite</h1> + <nuxt-link to="/">Accueil</nuxt-link> + </div> +</template> + +<script> + export default { + props: ['error'], + layout: 'blog' // vous pouvez définir une mise en page personnalisée pour la page d'erreur + } +</script> +``` + +## Pages + +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 le plus simple possible. + +<div class="Promo__Video"> + <a href="https://vueschool.io/lessons/nuxtjs-page-components?friend=nuxt" target="_blank"> + <p class="Promo__Video__Icon"> + Visonner un cours gratuit sur les <strong>composants page Nuxt.js</strong> sur Vue School (EN) + </p> + </a> +</div> + +```html +<template> + <h1 class="red">Bonjour {{ name }} !</h1> +</template> + +<script> + export default { + asyncData (context) { + // appelé à chaque fois avant le chargement du composant + // comme son nom l'indique, il peut être asynchrone + // De plus, l'objet retourné sera ajouté à votre objet `data` + return { name: 'le Monde' } + }, + fetch () { + // La méthode `fetch` est utilisée pour peupler le store avant d'effectuer le rendu de la page + }, + head () { + // Définit les balises meta pour cette page + }, + // et plus de fonctionnalités à découvrir + ... + } +</script> + +<style> + .red { + color: red; + } +</style> +``` + +| Attribut | Description | Documentation | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | +| `asyncData` | L'attribut le plus important. Il peut être asynchrone et reçoit le contexte comme argument. | [Guide : Données asynchrones](/guide/async-data) | +| `fetch` | Utilisé pour peupler le store avant de faire le rendu de la page. Identique à la méthode `asyncData`, sauf qu'il ne peuple pas le composant `data` | [pages de l'API sur `fetch`](/api/pages-fetch) | +| `head` | Défini des balises `<meta>` spécifiques pour la page en cours. | [pages de l'API sur `head`](/api/pages-head) | +| `layout` | Défini une mise en page existantes dans le répertoire `layouts`. | [pages de l'API sur `layout`](/api/pages-layout) | +| `loading` | Si mis à `false`, empèche la page d'appeler automatiquement `this.$nuxt.$loading.finish()` quand vous allez dessus et `this.$nuxt.$loading.start()` quand vous la quittez, vous permettant de contrôller **manuellement** ce comportement, comme le montre [cet exemple](/examples/custom-loading-component). Seulement appliqué si `loading` est défini dans `nuxt.config.js`. | [configuration `loading` de l'API](/api/configuration-loading) | +| `transition` | Défini une transition spécifique pour la page. | [pages de l'API sur `transition`](/api/pages-transition) | +| `scrollToTop` | Booléen (par défaut : `false`). Indique si vous souhaitez que la position de défilement de la page soit déplacée vers le haut avant d'afficher la page. Est utilisé pour les [Routes imbriquées](/guide/routing#routes-imbriqu-es) | [pages de l'API sur `scrollToTop`](/api/pages-scrolltotop#the-scrolltotop-property) | +| `validate` | Fonction de validation pour les [Routes dynamiques](/guide/routing#routes-dynamiques). | [pages de l'API sur `validate`](/api/pages-validate#the-validate-method) | +| `middleware` | Défini un middleware pour cette page. Ce middleware sera exécuté avant d'effectuer le rendu de la page. | [Guide : Middleware](/guide/routing#middleware) | + +Pour plus d'informations à propos de l'utilisation des attributs de pages, consultez [la partie Pages de l'API](/api) + +## Entête HTML + +<div class="Alert Alert--teal"> + +Nuxt.js utilise [vue-meta](https://github.com/declandewet/vue-meta) pour mettre à jour les `headers` et les `html attributes` de votre application. + +`vue-meta` utilisé par Nuxt.js peut être trouvé [sur GitHub](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/index.js#L29-L35) + +</div> + +<div class="Alert Alert--teal"> + +<b>Info :</b> Nuxt.js utilise la clé <code>hid</code> à la place de la clé <code>vmid</code> par défaut pour identifier les éléments <meta> + +</div> + +### Balises meta par défaut + +Nuxt.js vous permet de définir tous les tags `<meta>` par défaut de votre application dans `nuxt.config.js`. Définissez-les en utilisant la même propriété `head` : + +Exemple d'un viewport spécifique et d'une police Google personnalisée : + +```js +head: { + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] +} +``` + +Pour connaitre la liste des options que vous pouvez donner à `head`, jeter un œil à la [documentation vue-meta](https://vue-meta.nuxtjs.org/api/#metainfo-properties). + +### 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/configuration-head). diff --git a/nuxtjs.org/content/fr/.archives/guide/vuex-store.md b/nuxtjs.org/content/fr/.archives/guide/vuex-store.md new file mode 100644 index 000000000..b766e3223 --- /dev/null +++ b/nuxtjs.org/content/fr/.archives/guide/vuex-store.md @@ -0,0 +1,289 @@ +--- +title: Store Vuex +description: L'utilisation d'un store pour gérer l'état est important pour toutes les applications de taille importante. C'est pourquoi Vuex est implémenté au cœur de Nuxt.js. +category: getting-started +position: 110 +--- + +> L'utilisation d'un store pour gérer l'état est important pour toutes les applications de taille importante. C'est pourquoi [Vuex](https://vuex.vuejs.org/fr/) est implémenté au cœur de Nuxt.js. + +<div class="Promo__Video"> + <a href="https://vueschool.io/lessons/utilising-the-vuex-store-nuxtjs?friend=nuxt" target="_blank"> + <p class="Promo__Video__Icon"> + Visionner un cours gratuit sur <strong>Nuxt.js et Vuex</strong> sur Vue School (EN) + </p> + </a> +</div> + +## Activer le store + +Nuxt.js recherchera le répertoire `store`. S'il existe, il : + +1. importera Vuex, +2. ajoutera l'option `store` à l'instance racine de Vue. + +Nuxt.js vous laisse le choix entre **2 modes de store**, choisissez celui qui vous convient le mieux : + +- **Modules :** chaque fichier `.js` dans le répertoire `store` est transformé en tant que module avec son propre espace de nom (`index` étant le module racine). +- **Classique (**deprécié**):** `store/index.js` retourne une méthode pour créer une instance de store. + +Quelque soit le mode utilisé, votre valeur `state` devrait **toujours être une `function`** afin d'éviter tout état _partagé_ non désiré du côté serveur. + +## Mode modules + +> Nuxt.js vous permet d'avoir un répertoire `store` dans lequel chaque fichier correspond à un module. + +Si vous voulez cette option, exportez l'état, les mutations et les actions dans `store/index.js` au lieu de l'instance `store` : + +```js +export const state = () => ({ + counter: 0 +}) + +export const mutations = { + increment(state) { + state.counter++ + } +} +``` + +Puis, vous pouvez avoir un fichier `store/todos.js` : + +```js +export const state = () => ({ + list: [] +}) + +export const mutations = { + add(state, text) { + state.list.push({ + text, + done: false + }) + }, + remove(state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle(state, todo) { + todo.done = !todo.done + } +} +``` + +Le store sera comme suit : + +```js +new Vuex.Store({ + state: () => ({ + counter: 0 + }), + mutations: { + increment(state) { + state.counter++ + } + }, + modules: { + todos: { + namespaced: true, + state: () => ({ + list: [] + }), + mutations: { + add(state, { text }) { + state.list.push({ + text, + done: false + }) + }, + remove(state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle(state, { todo }) { + todo.done = !todo.done + } + } + } + } +}) +``` + +Et dans votre `pages/todos.vue`, utiliser le module `todos` : + +```html +<template> + <ul> + <li v-for="todo in todos"> + <input type="checkbox" :checked="todo.done" @change="toggle(todo)" /> + <span :class="{ done: todo.done }">{{ todo.text }}</span> + </li> + <li> + <input + placeholder="Qu'est-ce qui doit être fait ?" + @keyup.enter="addTodo" + /> + </li> + </ul> +</template> + +<script> + import { mapMutations } from 'vuex' + + export default { + computed: { + todos() { + return this.$store.state.todos.list + } + }, + methods: { + addTodo(e) { + this.$store.commit('todos/add', e.target.value) + e.target.value = '' + }, + ...mapMutations({ + toggle: 'todos/toggle' + }) + } + } +</script> + +<style> + .done { + text-decoration: line-through; + } +</style> +``` + +> 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++ + } +} +``` + +<div class="Alert"> + +Vous pouvez également avoir des modules en exportant une instance de store, vous devrez alors les ajouter manuellement sur votre store. + +</div> + +### Fichiers de module + +Vous pouvez optionnellement scinder un fichier de module en plusieurs fichiers séparés : `state.js`, `actions.js`, `mutations.js` et `getters.js`. Si vous maintenez un fichier `index.js` avec un état, des accesseurs et des mutations alors que les actions sont dans un fichier séparé, cela va également être proprement interprété. + +> Note : lorsque vous utilisez des modules en fichiers séparés, vous devez vous rappeler que d'utiliser des fonctions fléchées , `this` n'est disponible que de façon lexicale. La portée lexicale signifie simplement que le `this` fait toujours référence au propriétaire de la fonction fléchée. Si la fonction fléchée n'est pas contenue, alors `this` sera non défini. La solution est d'utiliser une fonction "normale" qui produira sa propre portée et qui dispose donc de `this`. + +> Note: Whilst using split-file modules, you must remember that using arrow functions, `this` is only lexically available. Lexical scoping simply means that the `this` always references the owner of the arrow function. If the arrow function is not contained then `this` would be undefined. The solution is to use a "normal" function which produces its own scope and thus has `this` available. + +### Plugins + +Vous pouvez ajouter des plugins additionnels au store (en mode modules) en les ajoutant dans le fichier `store/index.js` : + +```js +import myPlugin from 'myPlugin' + +export const plugins = [myPlugin] + +export const state = () => ({ + counter: 0 +}) + +export const mutations = { + increment(state) { + state.counter++ + } +} +``` + +Pour plus d'informations à propos des plugins, consultez la [documentation Vuex](https://vuex.vuejs.org/fr/plugins.html). + +## La méthode fetch + +> La méthode `fetch` est utilisée pour remplir le store avant de faire le rendu de la page, c'est comme la méthode `asyncData` sauf qu'elle ne définit pas les données du composant. + +Plus d'informations à propos de la méthode `fetch` dans [la partie Pages de l'API pour `fetch`](/api/pages-fetch). + +## L'action nuxtServerInit + +Si l'action `nuxtServerInit` est définie dans le store, Nuxt.js l'appellera avec le contexte (uniquement côté serveur). C'est utile lorsque nous disposons de données sur le serveur que nous voulons donner directement au client. + +Par exemple, disons que nous avons des sessions côté serveur et nous pouvons accéder à l'utilisateur connecté grâce à `req.session.user`. Pour fournir l'utilisateur authentifié à notre store, nous mettons à jour notre `store/index.js` comme suit : + +```js +actions: { + nuxtServerInit ({ commit }, { req }) { + if (req.session.user) { + commit('user', req.session.user) + } + } +} +``` + +> 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](/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') + } +} +``` + +## Mode strict de Vuex + +Le mode strict est activé par défaut sur le mode développement et est désactivé par défaut sur le mode production. Désactivez le mode strict en développement en procédent comme ci-après dans `store/index.js`: + +`export const strict = false` + +## Mode classique + +> Cette fonctionnalité sera dépréciée et retirée dans Nuxt 3. + +Pour activer le store avec le mode classique, nous créons `store/index.js` qui devrait exporter une méthode qui renvoie une instance Vuex : + +```js +import Vuex from 'vuex' + +const createStore = () => { + return new Vuex.Store({ + state: () => ({ + counter: 0 + }), + mutations: { + increment(state) { + state.counter++ + } + } + }) +} + +export default createStore +``` + +> Pas besoin d'installer `vuex`, celui-ci étant livré avec Nuxt.js. + +Nous pouvons alors utiliser `this.$store` dans nos composants : + +```html +<template> + <button @click="$store.commit('increment')"> + {{ $store.state.counter }} + </button> +</template> +``` diff --git a/nuxtjs.org/content/fr/.faq/appengine-deployment.md b/nuxtjs.org/content/fr/.faq/appengine-deployment.md new file mode 100644 index 000000000..6177e41f3 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/appengine-deployment.md @@ -0,0 +1,68 @@ +--- +title: Déploiement sur Google App Engine +description: Comment déployer une application Nuxt.js sur Google App Engine ? +menu: Usage +category: deployment +position: 201 +--- + +Déployer sur [Google App Engine](https://cloud.google.com/appengine/) est une solution rapide et facile pour héberger vos applications universelles Nuxt sur le service de Cloud Google. + +Dans ce guide, nous construisons l'application localement puis nous envoyons simplement l'intégralité du répertoire du projet vers Google App Engine. Après l'envoi, Google App Engine démarrera automatiquement le script `start` de votre fichier package.json et votre application sera disponible immédiatement. + +## Pour commencer + +Vérifiez que vous avez un compte Google Cloud, un projet et une application Google App Engine vierge définie sur [Google App Engine](https://cloud.google.com/appengine/). De plus, assurez-vous de télécharger et d'installer Cloud SDK (CLI) depuis Google comme expliqué [ici](https://cloud.google.com/sdk/) et connectez-vous à vote compte Google Cloud. + +## Configurer votre application + +Tout ce que vous avez besoin d'ajouter à votre application universelle Nuxt pour la déployer sur le Moteur d'Application est un fichier appelé `app.yaml`. Créez un nouveau fichier avec ce nom dans votre dossier racine et ajoutez le contenu suivant : + +```yaml +runtime: nodejs10 + +instance_class: F2 + +handlers: + - url: /_nuxt + static_dir: .nuxt/dist/client + secure: always + + - url: /(.*\.(gif|png|jpg|ico|txt))$ + static_files: static/\1 + upload: static/.*\.(gif|png|jpg|ico|txt)$ + secure: always + + - url: /.* + script: auto + secure: always + +env_variables: + HOST: '0.0.0.0' + NODE_ENV: 'production' +``` + +ou pour un environnement plus flexible la configuration minimale est : + +```yaml +runtime: nodejs +env: flex +``` + +## Construire et déployer l'application + +Maintenant, construisez votre application avec `npm run build`. + +À cet instant, votre application est prête à être envoyée au Moteur d'Application Google. Maintenant lancer la commande suivante : + +``` +gcloud app deploy app.yaml --project [project-id] +``` + +Voilà ! Votre application Nuxt.js est maintenant hébergée le me Moteur d'Application Google ! + +## Pour plus d'information + +- L'attribut `instance_class` dans votre fichier app.yaml définit la classe d'instance d'application. Instance F2 n'est pas complètement libre, mais possède le minimum de mémoire nécessaire pour exécuter une application Nuxt. + +Assurez-vous de renseigner le `project-id` et non pas le `project-name` dans la commande de déploiement. Ce sont deux choses différentes - mais facile à confondre. diff --git a/nuxtjs.org/content/fr/.faq/async-data-components.md b/nuxtjs.org/content/fr/.faq/async-data-components.md new file mode 100644 index 000000000..d40fc9edd --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/async-data-components.md @@ -0,0 +1,11 @@ +--- +title: Données asynchrones dans les composants +description: Comment gérer les données asynchrones dans les composants avec NuxtJS ? +category: development +position: 203 +--- + +É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 : + +1. Effectuez l'appel à l'API dans le point d'ancrage `mounted` et définissez les propriétés des données quand le composant est chargé. _Problème : ne fonctionne pas pour le rendu côté serveur_. +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 correctement. _Problème : les méthodes `asyncData` ou `fetch` pour une page peuvent être moins lisibles car elles chargent les données pour d'autres composants_. diff --git a/nuxtjs.org/content/fr/.faq/cached-components.md b/nuxtjs.org/content/fr/.faq/cached-components.md new file mode 100644 index 000000000..777719678 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/cached-components.md @@ -0,0 +1,43 @@ +--- +title: Mettre en cache les composants +description: Comment mettre en cache des composants avec NuxtJS ? +menu: Mettre en cache les composants +category: configuration +position: 8 +--- + +> Bien que le rendu côté serveur de Vue soit rapide, il ne rivalise pas avec les performances d'un template basé sur une chaine de caractère pure, et ceux, à cause du cout de création des instances de composant et des nœuds du DOM virtuel. Dans le cas où les performances du rendu côté serveur est critique, mettre en place une bonne stratégie de mise en cache peut grandement améliorer le temps de réponse et réduire la charge serveur. + +Vous pouvez utiliser le module [Component Cache](https://github.com/nuxt-community/modules/tree/master/packages/component-cache) pour Nuxt.js. Ce module utilise `vue-server-renderer` pour ajouter le support d'un cache LRU pour les composants Vue. + +## Utilisation + +- Ajoutez la dépendance `@nuxtjs/component-cache` en utilisant Yarn ou npm pour votre projet. +- Ajoutez `@nuxtjs/component-cache` à la section `modules` de `nuxt.config.js`. + +```js +{ + modules: [ + // Utilisation simple + '@nuxtjs/component-cache', + + // Avec des options + [ + '@nuxtjs/component-cache', + { + max: 10000, + maxAge: 1000 * 60 * 60 + } + ] + ] +} +``` + +Voir [la mise en cache au niveau composant](http://ssr.vuejs.org/en/caching.html#mise-en-cache-au-niveau-du-composant) pour plus d'informations. + +## N'oubliez pas + +- Les composants à mettre en cache **doivent définir une option `name` unique**. +- Vous **NE** devez **_PAS_** mettre en cache un composant si + - ses composants enfants sont liés à l'état global ou si + - ses composants enfants produisent des effets de bord sur le rendu de `context`. diff --git a/nuxtjs.org/content/fr/.faq/css-flash.md b/nuxtjs.org/content/fr/.faq/css-flash.md new file mode 100644 index 000000000..8ac1330e6 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/css-flash.md @@ -0,0 +1,13 @@ +--- +title: CSS Flash +description: Pourquoi un flash CSS apparait avec NuxtJS ? +menu: Why a CSS flash appears +category: development +position: 202 +--- + +![cssflash](/flash_css.gif) + +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). + +Ne vous inquiétez pas, en **mode production** le CSS est séparé et placé dans l'entête afin que le phénomène de FOUC n'apparaisse plus. diff --git a/nuxtjs.org/content/fr/.faq/deployment-aws-s3-cloudfront.md b/nuxtjs.org/content/fr/.faq/deployment-aws-s3-cloudfront.md new file mode 100644 index 000000000..a6836e09c --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/deployment-aws-s3-cloudfront.md @@ -0,0 +1,351 @@ +--- +title: Comment déployer sur AWS avec S3 et Cloudfront +description: Hébergement statique sur AWS avec S3 et Cloudfront pour NuxtJS +menu: Deploy on Aws w/ S3 and Cloudfront +category: deployment +position: 301 +--- + +AWS est un service web d'Amazon. S3 est leur stockage statique qui peut être configuré pour de l'hébergement de site statique. Cloudfront est leur CDN (content delivery network) + +Héberger une **générération statique** Nuxt sur AWS avec S3 et Cloudfront est puissant et pas cher. + +> AWS est à se tirer les cheveux. Si nous avons oublié une étape, merci de soumettre une proposition de mise à jour (PR) pour mettre à jour ce document. + +## Tour rapide + +Nous allons héberger à pas cher avec quelques services AWS. Brièvement : + +- S3 + - des "boites" ("bucket") de données cloud pour nos fichiers de site web + - peut être configuré pour héberger des sites web statiques +- CloudFront + - un CDN (content delivery network) + - offre des certificats HTTPS gratuits + - rend le chargement de votre site rapide + +Nous allons envoyer le site de cette façon : + +``` +Nuxt Generate -> Local folder -> AWS S3 Bucket -> AWS Cloudfront CDN -> Browser + [ nuxt generate ] [ gulp deploy ] + [ deploy.sh ] +``` + +Premièrement, nous allons générer le site avec `nuxt generate`. Puis nous utiliserons [Gulp](https://gulpjs.com/) pour publier les fichiers dans une boite S3 et invalider un CDN CouldFront. + +- [gulp](https://www.npmjs.com/package/gulp) +- [gulp-awspublish](https://www.npmjs.com/package/gulp-awspublish) +- [gulp-cloudfront-invalidate-aws-publish](https://www.npmjs.com/package/gulp-cloudfront-invalidate-aws-publish) +- [concurrent-transform](https://www.npmjs.com/package/concurrent-transform) (for parallel uploads) + +Nos scripts de déploiement ont besoin des variables d'environnement suivantes : + +- AWS_BUCKET_NAME="example.com" +- AWS_CLOUDFRONT="UPPERCASE" +- AWS_ACCESS_KEY_ID="key" +- AWS_SECRET_ACCESS_KEY="secret" + +Nous avons ces fichiers : + +``` +deploy.sh - exécute `nuxt generate` et `gulp deploy` +gulpfile.js - le code `gulp deploy` pour envoyer les fichiers à S3 et invalider CloudFront +``` + +## Mise en place + +1. Créer une boite S3 et la configurer pour de l'hébergement de site statique +2. Créer une distribution cloudfront +3. Configurer l'accès sécurisé +4. Paramétrer le script de build dans votre projet + +### 1. AWS: Configurez votre boite S3 + +### 2. AWS: Configurez votre distribution Cloudfront + +Pour les étapes 1 et 2, suivre ce [tutoriel pour configurer S3 et Cloudfront](https://reidweb.com/2017/02/06/cloudfront-cdn-tutorial/) + +Vous devriez avoir maintenant ces données : + +- AWS_BUCKET_NAME="example.com" +- AWS_CLOUDFRONT="UPPERCASE" + +### 3. AWS: Configurer l'accès sécurisé + +Pour l'étape 3, nous devons créer un utilisateur qui peut : + +- Mettre à jour le contenu de la boite +- Invalidater la distribution cloudfront (propage plus rapidement les modifications aux utilisateurs) + +[Créer un utilisateur avec cette stratégie](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html) : + +> NOTE: remplacer ci-dessous les deux `example.com` avec le nom de votre boite S3. Cette stratégie permet de pousser les boites spécifiques, et invalider toutes les distributions CloudFront. + +```json +{ + "Version": "2012-10-17", + "Statement": [ + { + "Effect": "Allow", + "Action": ["s3:ListBucket"], + "Resource": ["arn:aws:s3:::example.com"] + }, + { + "Effect": "Allow", + "Action": [ + "s3:PutObject", + "s3:PutObjectAcl", + "s3:GetObject", + "s3:GetObjectAcl", + "s3:DeleteObject", + "s3:ListMultipartUploadParts", + "s3:AbortMultipartUpload" + ], + "Resource": ["arn:aws:s3:::example.com/*"] + }, + { + "Effect": "Allow", + "Action": [ + "cloudfront:CreateInvalidation", + "cloudfront:GetInvalidation", + "cloudfront:ListInvalidations", + "cloudfront:UnknownOperation" + ], + "Resource": "*" + } + ] +} +``` + +Puis [obtenez une clé d'accès et un code secret](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html). + +Vous devriez maintenant avoir ces données : + +- AWS_ACCESS_KEY_ID="key" +- AWS_SECRET_ACCESS_KEY="secret" + +### 4. Ordinateur: Configurez le script de build de votre projet + +4.1) Créer un script `deploy.sh`. Voir les options [nvm (node version manager)](https://github.com/creationix/nvm). + +```bash +#!/bin/bash + +export AWS_ACCESS_KEY_ID="key" +export AWS_SECRET_ACCESS_KEY="secret" +export AWS_BUCKET_NAME="example.com" +export AWS_CLOUDFRONT="UPPERCASE" + +# charger nvm (node version manager), installer node (version in .nvmrc), et les paquets d'installation npm +[ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use +# installer npm si besoin +[ ! -d "node_modules" ] && npm install + +npm run generate +gulp deploy +``` + +4.2) Rendre `deploy.sh` exécutable et NE PAS LE VALIDER DANS GIT (deploy.sh contient des informations secrètes) + +```bash +chmod +x deploy.sh +echo " +# ne pas commiter les fichiers de build +node_modules +dist +.nuxt +.awspublish +deploy.sh +" >> .gitignore +``` + +4.3) Ajouter Gulp à votre projet et à votre ligne de commande + +```bash +npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform +npm install -g gulp +``` + +4.4) Créer `gulpfile.js` avec le script de build + +```javascript +const gulp = require('gulp') +const awspublish = require('gulp-awspublish') +const cloudfront = require('gulp-cloudfront-invalidate-aws-publish') +const parallelize = require('concurrent-transform') + +// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html + +const config = { + // Obligatoire + params: { + Bucket: process.env.AWS_BUCKET_NAME + }, + credentials: { + accessKeyId: process.env.AWS_ACCESS_KEY_ID, + secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, + signatureVersion: 'v3' + }, + + // Facultatif + deleteOldVersions: false, // NOT FOR PRODUCTION + distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID + region: process.env.AWS_DEFAULT_REGION, + headers: { + /* 'Cache-Control': 'max-age=315360000, no-transform, public', */ + }, + + // Sensible Defaults - ajouter ces fichiers et répertoires à gitignore + distDir: 'dist', + indexRootPath: true, + cacheFileName: '.awspublish', + concurrentUploads: 10, + wait: true // attendre l'invalidation de Cloudfront (environ 30-60 secondes) +} + +gulp.task('deploy', function () { + // créer un nouveau publieur en utilisant les options de S3 + // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property + const publisher = awspublish.create(config) + + let g = gulp.src('./' + config.distDir + '/**') + // le publieur ajoutera Content-Length, Content-Type les les entêtes spécifiées ci-dessous + // Si non renseignés, x-amz-acl aura la valeur public-read par défaut + g = g.pipe( + parallelize(publisher.publish(config.headers), config.concurrentUploads) + ) + + // Invalide le CDN + if (config.distribution) { + console.log('Configured with CloudFront distribution') + g = g.pipe(cloudfront(config)) + } else { + console.log( + 'No CloudFront distribution configured - skipping CDN invalidation' + ) + } + + // supprimer les fichiers à supprimer + if (config.deleteOldVersions) { + g = g.pipe(publisher.sync()) + } + // créer un fichier de cache pour accélérer les envois successifs + g = g.pipe(publisher.cache()) + // afficher l'avancement de l'envoi dans la console + g = g.pipe(awspublish.reporter()) + return g +}) +``` + +4.5) Deployer et déboguer + +Lancer ceci : + +```bash +./deploy.sh +``` + +Vous devriez avoir un affichage comme celui-ci : + +```bash +$ ./deploy.sh + +Found '/home/michael/scm/example.com/www/.nvmrc' with version <8> +Now using node v8.11.2 (npm v5.6.0) + +> example.com@1.0.0 generate /home/michael/scm/example.com/www +> nuxt generate + + nuxt:generate Generating... +0ms + nuxt:build App root: /home/michael/scm/example.com/www +0ms + nuxt:build Generating /home/michael/scm/example.com/www/.nuxt files... +0ms + nuxt:build Generating files... +36ms + nuxt:build Generating routes... +10ms + nuxt:build Building files... +24ms + ████████████████████ 100% + +Build completed in 7.009s + + + + DONE Compiled successfully in 7013ms 21:25:22 + +Hash: 421d017116d2d95dd1e3 +Version: webpack 3.12.0 +Time: 7013ms + Asset Size Chunks Chunk Names + pages/index.ef923f795c1cecc9a444.js 10.6 kB 0 [emitted] pages/index + layouts/default.87a49937c330bdd31953.js 2.69 kB 1 [emitted] layouts/default +pages/our-values.f60c731d5c3081769fd9.js 3.03 kB 2 [emitted] pages/our-values + pages/join-us.835077c4e6b55ed1bba4.js 1.3 kB 3 [emitted] pages/join-us + pages/how.75f8cb5bc24e38bca3b3.js 2.59 kB 4 [emitted] pages/how + app.6dbffe6ac4383bd30a92.js 202 kB 5 [emitted] app + vendor.134043c361c9ad199c6d.js 6.31 kB 6 [emitted] vendor + manifest.421d017116d2d95dd1e3.js 1.59 kB 7 [emitted] manifest + + 3 hidden assets +Hash: 9fd206f4b4e571e9571f +Version: webpack 3.12.0 +Time: 2239ms + Asset Size Chunks Chunk Names +server-bundle.json 306 kB [emitted] + nuxt: Call generate:distRemoved hooks (1) +0ms + nuxt:generate Destination folder cleaned +10s + nuxt: Call generate:distCopied hooks (1) +8ms + nuxt:generate Static & build files copied +7ms + nuxt:render Rendering url /our-values +0ms + nuxt:render Rendering url /how +67ms + nuxt:render Rendering url /join-us +1ms + nuxt:render Rendering url / +0ms + nuxt: Call generate:page hooks (1) +913ms + nuxt: Call generate:page hooks (1) +205ms + nuxt: Call generate:page hooks (1) +329ms + nuxt: Call generate:page hooks (1) +361ms + nuxt:generate Generate file: /our-values/index.html +2s + nuxt:generate Generate file: /how/index.html +0ms + nuxt:generate Generate file: /join-us/index.html +0ms + nuxt:generate Generate file: /index.html +0ms + nuxt:render Rendering url / +2s + nuxt: Call generate:done hooks (1) +4ms + nuxt:generate HTML Files generated in 11.8s +5ms + nuxt:generate Generate done +0ms +[21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js +[21:25:27] Starting 'deploy'... +Configured with CloudFront distribution +[21:25:27] [cache] README.md +[21:25:27] [cache] android-chrome-192x192.png +[21:25:27] [cache] android-chrome-512x512.png +[21:25:27] [cache] apple-touch-icon.png +[21:25:27] [cache] browserconfig.xml +[21:25:27] [cache] favicon-16x16.png +[21:25:27] [cache] favicon-32x32.png +[21:25:27] [cache] favicon.ico +[21:25:27] [cache] favicon.svg +[21:25:27] [cache] logo-branches.svg +[21:25:27] [cache] logo-small.svg +[21:25:27] [cache] logo.svg +[21:25:27] [cache] mstile-150x150.png +[21:25:27] [cache] og-image.jpg +[21:25:27] [cache] safari-pinned-tab.svg +[21:25:27] [cache] site.webmanifest +[21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js +[21:25:29] [update] 200.html +[21:25:30] [create] videos/flag.jpg +[21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js +[21:25:34] [create] videos/flag.mp4 +[21:25:34] [cache] _nuxt/pages/how.75f8cb5bc24e38bca3b3.js +[21:25:34] [cache] _nuxt/pages/join-us.835077c4e6b55ed1bba4.js +[21:25:34] [cache] _nuxt/pages/our-values.f60c731d5c3081769fd9.js +[21:25:36] [update] our-values/index.html +[21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js +[21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js +[21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js +[21:25:38] [update] join-us/index.html +[21:25:38] [update] how/index.html +[21:25:43] [create] videos/flag.webm +[21:25:43] [update] index.html +[21:25:43] CloudFront invalidation created: I16NXXXXX4JDOA +[21:26:09] Finished 'deploy' after 42 s +``` + +Notez que `Cloudfront invalidation created: XXXX` est la seule sortie du package npm d'invalidation de CloudFront. Si vous ne voyez pas ceci, ça ne fonctionnera pas. diff --git a/nuxtjs.org/content/fr/.faq/deployment-azure-portal.md b/nuxtjs.org/content/fr/.faq/deployment-azure-portal.md new file mode 100644 index 000000000..25d328289 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/deployment-azure-portal.md @@ -0,0 +1,165 @@ +--- +title: Comment déployer sur Azure Portal ? +description: Comment déployer une application Nuxt.js application sur Azure Portal ? +menu: Deploy on Azure Portal +category: deployment +position: 302 +--- + +## Exigences + +- Il est nécessaire de sélectionner un backend lors de la configuration du projet. Même si vous n'en avez pas besoin, sinon le site ne démarrera pas. +- Le serveur exécute Node 8 ou plus + +## Et si j'ai déjà un projet sans backend ? + +Pas de soucis. Il est facile d'ajouter un serveur express à un projet existant. + +Créez un nouveau dossier appelé `server` à la racine du projet. Créez ensuite un fichier `index.js` dans le dossier `server` et collez ce qui suit dans `index.js`: + +``` +const express = require('express') +const consola = require('consola') +const { Nuxt, Builder } = require('nuxt') +const app = express() + +// Importer et définir les options Nuxt.js +const config = require('../nuxt.config.js') +config.dev = process.env.NODE_ENV !== 'production' + +async function start () { + // Init Nuxt.js + const nuxt = new Nuxt(config) + + const { host, port } = nuxt.options.server + + // Build only in dev mode + if (config.dev) { + const builder = new Builder(nuxt) + await builder.build() + } else { + await nuxt.ready() + } + + // Give nuxt middleware to express + // Donnez le middleware nuxt à express + app.use(nuxt.render) + + // Écoutez le serveur + app.listen(port, host) + consola.ready({ + message: `Server listening on http://${host}:${port}`, + badge: true + }) +} +start() +``` + +Modifiez ensuite votre nuxt.config.js: + +Avant: + +``` +import pkg from './package' + +export default { +... config +} +``` + +Après: + +``` +module.exports = { +... config +} + +``` + +**N'oubliez pas de supprimer les références à l'objet pkg dans la configuration.** + +C'est tout ! + +## Comment définir la version de Node d'une application Web dans DevOps + +Vous pouvez définir la version Node sur le serveur, via le paramètre d'application dans la tâche "Deploy Azure Web Service" dans le pipeline de versions + +Ajoutez ceci au champ paramètres de l'application sous "Application and Configuration Settings" + +``` +-WEBSITE_NODE_DEFAULT_VERSION 10.16.3 +``` + +Il est recommandé d'utiliser la version LTS. + +## Artefacts + +Si vous utilisez Azure DevOps et laissez le pipeline de génération faire son travail lui-même et souhaitez stocker des artefacts. Les dossiers qui sont préfixés par un `.` doivent être déplacés explicitement dans le dossier d'artefact. Ensuite, vous pouvez créer une archive d'artefacts et la télécharger ensuite dans votre version de déploiement. + +## Exécution du webserver + +Pour Azure Portal, vous aurez besoin d'un fichier `web.config`. S'il n'est pas fourni, il en créera un lui-même. Celui-ci **ne fonctionnera pas pour Nuxt** cependant. Ajoutez un fichier web.config à votre projet. Pour la dernière version de `Nuxt`, le fichier serveur se trouve dans `server/index.js`. Dans le web.config, ne spécifiez pas le chemin exact `server/index.js` mais juste `server`. Voir l'exemple web.config ci-dessous. Si vous ne le faites pas, les logs vous diront que Vue ne peut trouver aucun chemin. + +```xml +<?xml version="1.0" encoding="utf-8"?> +<!-- + Ce fichier de configuration est requis si iisnode est utilisé pour exécuter des processus node derrière + IIS ou IIS Express. Pour plus d'informations, visitez: + + https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config +--> + +<configuration> + <system.webServer> + <!-- Visitez https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ pour plus d'informations sur le support WebSocket --> + <webSocket enabled="false" /> + <handlers> + <!-- Indique que le fichier server.js est un site node.js à gérer par le module iisnode --> + <add name="iisnode" path="server" verb="*" modules="iisnode"/> + </handlers> + <rewrite> + <rules> + <!-- Ne pas interférer avec les demandes de débogage de l'inspecteur de node --> + <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true"> + <match url="^server\/debug[\/]?" /> + </rule> + + <!-- Nous examinons d'abord si l'URL entrante correspond à un fichier physique dans le dossier /public --> + <rule name="StaticContent"> + <action type="Rewrite" url="public{REQUEST_URI}"/> + </rule> + + <!-- Toutes les autres URL sont mappées au point d'entrée du site node.js --> + <rule name="DynamicContent"> + <conditions> + <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/> + </conditions> + <action type="Rewrite" url="server"/> + </rule> + </rules> + </rewrite> + + <!-- le répertoire 'bin' n'a pas de signification particulière dans node.js et des applications peuvent y être placées --> + <security> + <requestFiltering> + <hiddenSegments> + <remove segment="bin"/> + </hiddenSegments> + </requestFiltering> + </security> + + <!-- Assurez-vous que les réponses d'erreurs restent inchangées --> + <httpErrors existingResponse="PassThrough" /> + + <!-- + Vous pouvez contrôler la façon dont Node est hébergé dans IIS à l'aide des options suivantes: + * watchedFiles: liste de fichiers séparés par des points-virgules qui seront surveillés pour les modifications de redémarrage du serveur + * node_env: sera propagé à Node en tant que variable d'environnement NODE_ENV + * debuggingEnabled - contrôle si le débogueur intégré est activé + + Voir https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config pour une liste complète des options + --> + <!--<iisnode watchedFiles="web.config;*.js"/>--> + </system.webServer> +</configuration> +``` diff --git a/nuxtjs.org/content/fr/.faq/dokku-deployment.md b/nuxtjs.org/content/fr/.faq/dokku-deployment.md new file mode 100644 index 000000000..6b40d6ecb --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/dokku-deployment.md @@ -0,0 +1,59 @@ +--- +title: Comment déployer sur Dokku ? +description: Comment déployer une application Nuxt.js sur Dokku ? +menu: Deploy on Dokku +category: deployment +position: 304 +--- + +Nous vous recommandons de lire la [documentation de la prise en main de Dokku](http://dokku.viewdocs.io/dokku/getting-started/installation/) et [Déploiement d'une application Node.js sur Digital Ocean en utilisant Dokku](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/). + +Pour l'exemple, nous allons appeler notre application Nuxt.js `my-nuxt-app`. + +Demandons à Dokku d'installer les `devDependencies` de notre projet (afin de pouvoir exécuter `npm run build`) : + +```bash +// sur le serveur Dokku +dokku config:set my-nuxt-app NPM_CONFIG_PRODUCTION=false +``` + +Nous voulons également que notre application écoute le port `0.0.0.0` et s'exécute en mode production : + +```bash +// sur le serveur Dokku +dokku config:set my-nuxt-app HOST=0.0.0.0 NODE_ENV=production +``` + +Vous devriez voir ces trois lignes quand vous tapez `dokku config my-nuxt-app` + +![nuxt config vars Dokku](https://i.imgur.com/9FNsaoQ.png) + +Puis nous pouvons demander à Dokku d'exécuter `npm run build` via le script `scripts.dokku.predeploy` dans `app.json` : + +`créez un fichier nommé app.json dans le répertoire racine de votre projet` + +```js +{ + "scripts": { + "dokku": { + "predeploy": "npm run build" + } + } +} +``` + +Pour lancer l'application nous utilisons `npm run start` avec le [Procfile](http://dokku.viewdocs.io/dokku/deployment/methods/dockerfiles/#procfiles-and-multiple-processes): + +``` +web: npm run start +``` + +Pour finir, nous pouvons déployer notre application sur Dokku : + +```bash +// actez vos changements avant de les pousser. +git remote add dokku dokku@yourServer:my-nuxt-app +git push dokku master +``` + +Voilà ! Votre application Nuxt.js est hébergée sur Dokku ! diff --git a/nuxtjs.org/content/fr/.faq/duplicated-meta-tags.md b/nuxtjs.org/content/fr/.faq/duplicated-meta-tags.md new file mode 100644 index 000000000..2ef9e6aac --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/duplicated-meta-tags.md @@ -0,0 +1,52 @@ +--- +title: Balises meta dupliquées +description: Balises meta dupliquées avec Nuxt.js ? +category: development +position: 204 +--- + +Il s'agit d'une « fonctionnalité » de [vue-meta](https://github.com/nuxt/vue-meta), merci de lire la [documentation des éléments d'entête](/docs/2.x/concepts/views#html-head). + +<div class="Alert"> + +Afin d'éviter toute duplication lors de l'utilisation d'un composant enfant, donnez un identifiant unique à l'aide de la clé <code>hid</code>. [En savoir plus](https://vue-meta.nuxtjs.org/api/#tagidkeyname). + +</div> + +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. + +Votre `nuxt.config.js` : + +```js +...head: { + title: 'starter', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { name: 'keywords', content: 'keyword 1, keyword 2'}, + { hid: 'description', name: 'description', content: 'This is the generic description.'} + ], + }, +... +``` + +Dans votre page individuelle : + +```js +export default { + head() { + return { + title: `Page 1 (${this.name}-side)`, + meta: [ + { + hid: 'description', + name: 'description', + content: 'Page 1 description' + } + ] + } + } +} +``` + +Pour apprendre à utiliser la propriété `head` dans vos pages, consultez la documentation [d'entête HTML](/docs/2.x/concepts/views#html-head). diff --git a/nuxtjs.org/content/fr/.faq/external-resources.md b/nuxtjs.org/content/fr/.faq/external-resources.md new file mode 100644 index 000000000..11c186a9d --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/external-resources.md @@ -0,0 +1,64 @@ +--- +title: Comment utiliser des ressources externes ? +description: Comment utiliser des ressources externes avec Nuxt.js ? +category: configuration +position: 1 +--- + +## Paramètres globaux + +Ajoutez vos ressources dans le fichier `nuxt.config.js` : + +```js +export default { + head: { + script: [ + { + src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' + } + ], + link: [ + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css?family=Roboto' + } + ] + } +} +``` + +## Paramètres locaux + +Ajoutez vos ressources dans votre fichier `.vue` dans votre répertoire `pages/` : + +```html +<template> + <h1>About page with jQuery and Roboto font</h1> +</template> + +<script> + export default { + head() { + return { + script: [ + { + src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' + } + ], + link: [ + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css?family=Roboto' + } + ] + } + } + } +</script> + +<style scoped> + h1 { + font-family: Roboto, sans-serif; + } +</style> +``` diff --git a/nuxtjs.org/content/fr/.faq/ga.md b/nuxtjs.org/content/fr/.faq/ga.md new file mode 100644 index 000000000..8591e7dc8 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/ga.md @@ -0,0 +1,77 @@ +--- +title: Intégration de Google Analytics +description: Comment intégrer Google Analytics avec NuxtJS ? +category: configuration +position: 9 +--- + +Tout d'abord consultez le [module officiel Google Analytics](https://github.com/nuxt-community/analytics-module) pour Nuxt.js. + +Ensuite, pour utiliser [Google Analytics](https://www.google.com/analytics/) avec votre application Nuxt.js, nous recommandons de créer un plugin `plugins/ga.js` : + +```js +/* eslint-disable */ + +export default ({ app }) => { + /* + ** Seulement exécuté côté client et en mode production + */ + if (process.env.NODE_ENV !== 'production') + return /* + ** Inclusion du script Google Analytics + */ + ;(function (i, s, o, g, r, a, m) { + i['GoogleAnalyticsObject'] = r + ;(i[r] = + i[r] || + function () { + ;(i[r].q = i[r].q || []).push(arguments) + }), + (i[r].l = 1 * new Date()) + ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]) + a.async = 1 + a.src = g + m.parentNode.insertBefore(a, m) + })( + window, + document, + 'script', + 'https://www.google-analytics.com/analytics.js', + 'ga' + ) + /* + ** Affecter la page courante + */ + ga('create', 'UA-XXXXXXXX-X', 'auto') + /* + ** Chaque fois que la route change + */ + app.router.afterEach((to, from) => { + /* + ** Nous expliquons à Google Analytics d'ajouter une `pageview` + */ + ga('set', 'page', to.fullPath) + ga('send', 'pageview') + }) +} +``` + +> Remplacez `UA-XXXXXXXX-X` par votre ID de suivi Google Analytics. + +Puis nous expliquons à Nuxt.js d'importer le plugin dans notre application principale : + +`nuxt.config.js` + +```js +export default { + plugins: [{ src: '~plugins/ga.js', mode: 'client' }] +} +``` + +Voilà, Google Analytics est intégré dans notre application Nuxt.js et suivra chaque page vue ! + +<div class="Alert Alert--nuxt-green"> + +<b>Info :</b> cette méthode est valable pour n'importe quel autre service de suivi. + +</div> diff --git a/nuxtjs.org/content/fr/.faq/github-pages.md b/nuxtjs.org/content/fr/.faq/github-pages.md new file mode 100644 index 000000000..4983fe430 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/github-pages.md @@ -0,0 +1,243 @@ +--- +title: Déployer sur GitHub Pages +description: Comment déployer une application Nuxt.js sur GitHub Pages +menu: Deploy on Github +category: deployment +position: 305 +--- + +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. + +Pour déployer sur GitHub Pages, vous devez générer votre application web de manière statique : + +```bash +npm run generate +``` + +Cette commande crée 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. + +<div class="Alert Alert--nuxt-green"> + +<b>Info :</b> si vous utilisez un nom de domaine personnalisé pour GitHub Pages à l'aide d'un fichier `CNAME`, il est recommandé de placer ce fichier dans le répertoire `static`. [Plus d'informations](/docs/2.x/directory-structure/assets) à ce propos. + +</div> + +## Déploiement d'un dépôt sur GitHub Pages + +Si vous avez créer un système GitHub Pages pour un dépôt spécifique et que vous n'avez pas de domaine personnalisé, l'URL de la page sera de au format suivant `http://<utilisateur>.github.io/<nom-du-depot>`. + +Si vous déployez le dossier `dist` sans ajouter une [base du router](/docs/2.x/configuration-glossary/configuration-router#base), quand vous visiterez le site déployé, les ressources de celui-ci seront indisponibles. Cela est du au fait que la base du site est `/` alors que dans le cas de GitHub Pages cette base est `/<repository-name>`. + +Pour régler ce problème nous devons ajouter la configuration d'une [base au router](/docs/2.x/configuration-glossary/configuration-router#base) dans `nuxt.config.js` : + +```js +export default { + router: { + base: '/<nom-du-depot>/' + } +} +``` + +De cette manière, tous les chemins aux ressources seront préfixés avec `/<nom-du-depot>/` et le prochain déploiement de code sur GitHub Pages ferra que votre site fonctionnera. + +Il existe un inconvénient à ajouter un `router.base` par défaut dans `nuxt.config.js` cependant. Quand vous lancez `npm run dev`, cela ne fonctionnera plus puisque le chemin a changé. Pour résoudre ce problème, nous allons créer une condition pour `router.base` qui incluera le `<nom-du-depot>` : + +```js +/* nuxt.config.js */ +// ajouter seulement `router.base = '/<nom-du-depot>/'` si `DEPLOY_ENV` est `GH_PAGES` +const routerBase = + process.env.DEPLOY_ENV === 'GH_PAGES' + ? { + router: { + base: '/<nom-du-depot>/' + } + } + : {} + +export default { + ...routerBase +} +``` + +et maintenant nous avons juste besoin de mettre `DEPLOY_ENV='GH_PAGES'` pour créer le site pour GitHub Pages : + +```js +/* package.json */ +"scripts": { + "build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build", + "generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate" +}, +``` + +Pour les utilisateurs Windows, vous voudrez peut-être installer [cross-env](https://github.com/kentcdodds/cross-env) si vous n'utilisez pas `bash`. + +```sh +npm install cross-env --save-dev +``` + +puis l'utiliser de cette manière : + +```js + "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build", + "generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate" +``` + +## Déploiement en ligne de commande + +Vous pouvez également utiliser le package [push-dir](https://github.com/L33T-KR3W/push-dir): + +Installez-le via npm : + +```bash +npm install push-dir --save-dev +``` + +Ajoutez 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. + +```js +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate", + "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" +}, +``` + +Puis générez et déployez votre application statique : + +```bash +npm run generate +npm run deploy +``` + +## Build server deployment + +You can take deployment one step further and rather than having to manually compile and deploy the files from your local install, you can make use of a build server to monitor your GitHub repository for new commits and then checkout, compile and deploy everything for you automatically. + +Before you configure the build server, you'll first need to [generate a GitHub personal access token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/#creating-a-token) in order to grant the build server permission to perform tasks on your behalf. Once you have created your token, keep a copy of it safe ready to use a little later on. + +### Travis CI + +To deploy with [Travis CI](https://travis-ci.org/), a free for open source projects build server, sign in via your GitHub account, granting Travis access to view your repositories, and then enable the build server for your repository by toggling the switch next to your repositories name in the list displayed. + +![Travis Builder Server Enable](/github_pages_travis_01.png) + +Next, click the cog icon beside your repository name to configure the general settings of the build sever and enable the 'Build only if .travis.yml is present' feature by toggling the switch. + +![Travis Builder Server Settings](/github_pages_travis_02.png) + +On the same screen, scroll down to the Environment Variables section and create a new variables named `GITHUB_ACCESS_TOKEN` and in the value field paste a copy of the GitHub personal access token your created earlier and click the 'Add' button. + +![Travis Builder Server Environment Variables](/github_pages_travis_03.png) + +Finally, create a `.travis.yml` configuration file in the root of your repository with the following contents + +```yaml +language: node_js +node_js: + - '12' + +cache: + directories: + - 'node_modules' + +branches: + only: + - master + +install: + - npm install + - npm run generate + +script: + - echo "Skipping tests" + +deploy: + provider: pages + skip-cleanup: true + github-token: $GITHUB_ACCESS_TOKEN # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token + target-branch: gh-pages + local-dir: dist + on: + branch: master +``` + +and then commit this to your repository + +```bash +git add .travis.yml +git commit -m "Adding travis deploy configuration" +git push origin +``` + +Now, whenever you commit any changes to your repository, from within Travis, you'll see a new build start up + +![Travis Builder Server Output](/github_pages_travis_04.png) + +and on completion, you'll see your GitHub pages site automatically updated. + +### Appveyor + +To deploy via [Appveyor](https://www.appveyor.com), another free for open source projects build server, sign up for a new account choosing the GitHub authentication option to sign in using your GitHub account. + +Once signed in, click the 'New project' link and then click the 'Add' button beside your repository name in the list displayed to enable the build server on your repository. + +![Appveyor Builder Server Enable](/github_pages_appveyor_01.png) + +Next, in the root of your repository, create an `appveyor.yml` configuration file with the following contents + +```yaml +environment: + # Nuxt requires node v12 minimum + nodejs_version: '12' + # Encrypt sensitive data (https://ci.appveyor.com/tools/encrypt) + github_access_token: + secure: ENCRYPTED_GITHUB_ACCESS_TOKEN + github_email: + secure: ENCRYPTED_GITHUB_EMAIL + +# Only run on master branch +branches: + only: + - master + +# Install scripts. (runs after repo cloning) +install: + # switch nodejs version + - ps: Install-Product node $env:nodejs_version + # install modules + - npm install + # generate static files + - npm run generate + # configure global git credentials store (https://www.appveyor.com/docs/how-to/git-push/) + - git config --global credential.helper store + - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:github_access_token):x-oauth-basic@github.com`n" + - git config --global user.email $env:github_email + # deploy to GitHub pages + - npm run deploy + +# No tests to run +test: off + +# Don't actually build. +build: off +``` + +**_NB_** This configuration assumes you've configured your `package.json` file as per the [Command line deployment](#command-line-deployment) instructions + +Before you commit this file however, you'll need to change the `ENCRYPTED_GITHUB_ACCESS_TOKEN` and `ENCRYPTED_GITHUB_EMAIL` variables with your GitHub personal access token from earlier and your GitHub email address, encrypted using the [Appveyor encryption tool](https://ci.appveyor.com/tools/encrypt). + +Once updated, commit the file to your repository + +```bash +git add appveyor.yml +git commit -m "Adding appveyor deploy configuration" +git push origin +``` + +Now, whenever you commit any changes to your repository, from within Appveyor, you'll see a new build start up + +![Appveyor Builder Server Output](/github_pages_appveyor_02.png) + +and on completion, you'll see your GitHub pages site automatically updated. diff --git a/nuxtjs.org/content/fr/.faq/heroku-deployment.md b/nuxtjs.org/content/fr/.faq/heroku-deployment.md new file mode 100644 index 000000000..45a6d14b5 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/heroku-deployment.md @@ -0,0 +1,69 @@ +--- +title: Déployer sur Heroku +description: Comment déployer Nuxt.js sur Heroku ? +menu: Deploy on Heroku +category: deployment +position: 308 +--- + +Nous vous recommandons de lire la [documentation Heroku pour Node.js](https://devcenter.heroku.com/articles/nodejs-support). + +<div class="Promo__Video"> + <a href="https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-heroku?friend=nuxt" target="_blank"> + <p class="Promo__Video__Icon"> + Visionner un cours gratuit sur <strong>Comment déployer Nuxt.js sur Heroku</strong> avec Vue School (EN) + </p> + </a> +</div> + +Premièrement, nous devons demander à Heroku d'installer les `devDependencies` du projet (afin de pouvoir exécuter `npm run build`) : + +```bash +heroku config:set NPM_CONFIG_PRODUCTION=false +``` + +Nous voulons également que notre application écoute le port `0.0.0.0` et s'exécute en mode production : + +```bash +heroku config:set HOST=0.0.0.0 +heroku config:set NODE_ENV=production +``` + +Vous devriez voir cela dans votre tableau de bord Heroku (section Settings) : + +![variables de configuration de nuxt pour Heroku](https://i.imgur.com/EEKl6aS.png) + +Puis nous demandons à Heroku d'exécuter `npm run build` via le script `heroku-postbuild` de notre `package.json` : + +```js +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "heroku-postbuild": "npm run build" +} +``` + +Heroku utilise un [Procfile](https://devcenter.heroku.com/articles/procfile) (nommer le fichier `Procfile` sans extension de nom de fichier) qui indique les commandes à exécuter par les apps dynos. Pour commencer le Procfile sera très simple, et doit contenir les lignes suivantes : + +``` +web: npm run start +``` + +Cela indique qu'il faut lancer la commande `nuxt start` et dit à heroku de lui rediriger le trafic HTTP externe. + +Pour finir, nous pouvons déployer notre application sur Heroku avec : + +```bash +git push heroku master +``` + +Pour déployer une branche non master sur Heroku, utilisez : + +```bash +git push heroku develop:master +``` + +où `develop` est le nom de votre branche. + +Voilà ! Votre application Nuxt.js est hébergée sur Heroku ! diff --git a/nuxtjs.org/content/fr/.faq/host-port.md b/nuxtjs.org/content/fr/.faq/host-port.md new file mode 100644 index 000000000..390928cc6 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/host-port.md @@ -0,0 +1,90 @@ +--- +title: Comment modifier l'hôte et le port ? +description: Comment modifier l'hôte et le port avec Nuxt.js ? +category: configuration +position: 7 +--- + +Par défaut, l'hôte du serveur de développement Nuxt est `localhost` (accessible uniquement depuis la machine hôte). + +Pour indiquer à Nuxt qu'il doit rendre accessible l'hôte depuis des connexions _extérieures_ à celui-ci (par exemple, sur un LAN), vous pouvez utiliser l'hôte `0.0.0.0`. + +Vous pouvez configurer les variables de connexion de plusieurs façons. Ces dernières sont listées **de la plus grande priorité à la plus petite**. + +> **Remarque:** Si vous assignez à la variable `port` la chaîne de caractères `'0'` (et non `0`, qui est incorrect), un port aléatoire sera attribué à votre application Nuxt. + +## En utilisant des arguments directs + +```sh +nuxt --hostname votrehote --port 3333 +``` + +Ou + +```js +"scripts": { + "dev": "nuxt --hostname votrehote --port 3333" +} +``` + +## Configurer dans `nuxt.config.js` : + +Dans votre `nuxt.config.js` : + +```js +export default { + server: { + port: 8000, // par défaut : 3000 + host: '0.0.0.0' // par défaut : localhost + } + // autres configurations +} +``` + +## En utilisant les variables d'environnement NUXT_HOST et NUXT_PORT + +Similaires à HOST et PORT, mais plus spécifiques, au cas où vous auriez besoin de celles-ci pour autre chose. + +```js +"scripts": { + "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt" +} +``` + +**Remarque**: pour une meilleure compatibilité lors d'un développement multiplateforme, vous pouvez utiliser le paquet [cross-env](https://www.npmjs.com/package/cross-env). + +Installation : + +```bash +npm install --save-dev cross-env +``` + +```js +"scripts": { + "dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt" +} +``` + +## En utilisant les variables d'environnement HOST et PORT + +```js +"scripts": { + "dev": "HOST=0.0.0.0 PORT=3333 nuxt" +} +``` + +## Via la configuration `nuxt` dans `package.json` : + +Dans votre `package.json` : + +```json +"config": { + "nuxt": { + "host": "0.0.0.0", + "port": "3333" + } +}, +"scripts": { + "dev": "nuxt" +} +``` diff --git a/nuxtjs.org/content/fr/.faq/http-proxy.md b/nuxtjs.org/content/fr/.faq/http-proxy.md new file mode 100644 index 000000000..7344fa12a --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/http-proxy.md @@ -0,0 +1,29 @@ +--- +title: Comment partager des ressources cross-origin ? +description: Comment partager des ressources cross-origin ? +category: configuration +position: 10 +--- + +[La solution des ressources cross origin partagées dans Nuxt.js](https://github.com/nuxt-community/proxy-module#readme) + +``` +npm i @nuxtjs/proxy +``` + +Dans nuxt.config.js + +``` + modules: [ + '@nuxtjs/axios', + '@nuxtjs/proxy' + ], +proxy: { + '/api': { + target: 'http://example.com', + pathRewrite: { + '^/api' : '/' + } + } +} +``` diff --git a/nuxtjs.org/content/fr/.faq/ios-phone-numbers.md b/nuxtjs.org/content/fr/.faq/ios-phone-numbers.md new file mode 100644 index 000000000..402510288 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/ios-phone-numbers.md @@ -0,0 +1,18 @@ +--- +title: iOS et numéros de téléphone +description: Safari sur iOS change les numéros de téléphone en liens qui peuvent causer des problèmes de rendu avec NuxtJS +category: development +position: 205 +--- + +Si vous incluez des numéros de téléphone dans votre page Nuxt, assurez-vous de les remplacer directement par un lien : + +```html +<!-- Exemple de numéro de téléphone : +7 (982) 536-50-77 --> + +<template> + <a href="tel: +7 (982) 536-50-77">+7 (982) 536-50-77</a> +</template> +``` + +Sinon, certaines versions de Safari pour téléphone mobile transformeront automatiquement ces numéros en liens. Ce serait intéressant et utile à première vue, mais déclenchera un avertissement `NodeMismatch` car le contenu SSR ne correspond plus au contenu du site web. Cela peut rendre votre application inutilisable sur ces versions de Safari. diff --git a/nuxtjs.org/content/fr/.faq/jsx.md b/nuxtjs.org/content/fr/.faq/jsx.md new file mode 100644 index 000000000..6a0bbe2da --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/jsx.md @@ -0,0 +1,31 @@ +--- +title: Comment utiliser JSX ? +description: Comment utiliser JSX avec Nuxt.js ? +category: configuration +position: 3 +--- + +Nuxt.js utilise [@nuxt/babel-preset-app](https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app), basée sur [@vue/babel-preset-app](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) comme configuration par default, ce qui vous permet d'utiliser JSX dans vos composants. + +Vous pouvez maintenant utiliser JSX dans la méthode `render` de vos composants : + +```html +<script> + export default { + data() { + return { name: 'Le Monde' } + }, + render(h) { + return <h1 class="red">{this.name}</h1> + } + } +</script> +``` + +<div class="Alert Alert--orange"> + +Créer un alias `h` pour `createElement` est une convention commune que vous rencontrerez dans l'écosystème Vue mais n'est pas nécessaire pour JSX depuis qu'il [injecte automatiquement](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection) `const h = this.$createElement` dans toutes les méthodes et les accesseurs (ce n'est pas le cas pour les fonctions et les fonctions fléchées) déclarés avec la syntaxe ES2015 supportant JSX. Vous pouvez alors laisser tomber le paramètre `h`. + +</div> + +Vous pouvez en savoir plus dans la [section JSX](https://vuejs.org/v2/guide/render-function.html#JSX) de la documentation Vue.js. diff --git a/nuxtjs.org/content/fr/.faq/netlify-deployment.md b/nuxtjs.org/content/fr/.faq/netlify-deployment.md new file mode 100644 index 000000000..e03b00854 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/netlify-deployment.md @@ -0,0 +1,46 @@ +--- +title: Déploiement sur Netlify +description: Comment déployer une application Nuxt.js sur Netlify ? +category: deployment +position: 309 +--- + +Déployer sur [Netlify](https://www.netlify.com) est une option sans friction pour obtenir en ligne rapidement un site Nuxt.js **généré statiquement**. + +Le coeur du processus tire parti de la commande `nuxt generate` lors du déploiement pour créer une version statique de votre application Nuxt.js dans le répertoire `dist`. Le contenu de ce répertoire peut ensuite être déployé sur une URL de production. + +<div class="Promo__Video"> + <a href="https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-netlify?friend=nuxt" target="_blank"> + <p class="Promo__Video__Icon"> + Visionner un cours gratuit sur <strong>Comment déployer une application Nuxt.js sur Netlify</strong> sur Vue School (EN) + </p> + </a> +</div> + +## Pour commencer + +Appuyez sur le bouton _"Nouveau site depuis Git"_ sur le dashboard Netlify. Authentifiez-vous avec votre hôte de référentiels, sélectionnez un référentiel à déployer, et sur "continuer". Vous devriez atterrir à l'étape 3 : _"Options de Build, et déploiement !"_ + +## Configurer : + +### Pour un site générée statiquement + +1. **Branche à déployer :** `master`, ou bien la branche que vous préférez +1. **Commande de Build :** `npm run generate` +1. **Répertoire de publication :** `dist` + +### Pour un site généré en mode monopage (SPA) + +1. **Branche à déployer :** `master`, ou bien la branche que vous préférez +1. **Commande de Build :** `npm run build` +1. **Répertoire de publication :** `dist` + +Pour les applications monopages il y a un problème avec le rafraichissement de l'application. En effet par défaut Netlify redirige vers _"404 not found"_. Ce problème peut être [évité](https://www.netlify.com/docs/redirects/#rewrites-and-proxying) en configurant des redirections. Il existe à cet effet [nuxt-netlify](https://www.bazzite.com/docs/nuxt-netlify) qui permet d'aider à configurer les en-têtes et les redirections de l'application. + +> Pour une explication simple des redirections Netlify, vous pouvez lire cet [article (EN)](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site) par Divya Sasidharan. + +> Optionellement, vous pouvez ajouter des variables supplémentaires ENV via le bouton _"Avancé"_. Cela peut être utile afin de changer pour des informations d'identification aux API ou autre. Netlify fournit également des [variables d'environnement ENV par défaut](https://www.netlify.com/docs/build-settings/#build-environment-variables) qui peuvent être lu par votre application Nuxt.js au moment du build. + +Cliquez sur _"Deployer le site"_ pour déclencher immédiatement le déploiement. Votre site Netlify se verra assigner une URL aléatoire et déployez en utilisant la commande `nuxt generate`. + +Voilà ! Votre application Nuxt.js est maintenant hébergée sur Netlify ! diff --git a/nuxtjs.org/content/fr/.faq/nginx-proxy.md b/nuxtjs.org/content/fr/.faq/nginx-proxy.md new file mode 100644 index 000000000..33cd2e647 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/nginx-proxy.md @@ -0,0 +1,243 @@ +--- +title: Utiliser nginx comme proxy inverse +description: Comment utiliser nginx en tant que proxy inverse ? +category: deployment +position: 313 +--- + +```nginx +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 80; # le port sur lequel nginx écoute + server_name your-domain; # mettre votre domaine ici + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + location / { + expires $expires; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # mettre l'URL de l'instance Node.js ici + } +} +``` + +## Utiliser nginx avec des pages générées et un proxy de cache en solution de secours + +Si vous avez un site web très important avec du contenu changeant régulièrement, vous voudriez bénéficier des capacités de génération de Nuxt et de [nginx caching](https://www.nginx.com/blog/nginx-caching-guide). + +Vous trouverez ci-dessous un exemple de configuration. Gardez à l'esprit que : + +- le répertoire racine doit être le même que celui définit par [la configuration du répertoire de génération](/docs/2.x/configuration-glossary/configuration-generate#dir) +- les entêtes d'expiration définis par Nuxt sont supprimés (en raison du cache) +- Nuxt comme nginx peuvent ajouter des entêtes supplémentaires, il est conseillé d'en choisir un (dans le doute, choisissez nginx) +- si votre site est principalement statique, augmentez les nombres `proxy_cache_path inactive` et `proxy_cache_valid` + +Si vous ne générez pas vos itinéraires mais que vous souhaitez bénéficier du cache nginx : + +- supprimez l'entrée `root` +- changez `location @proxy {` par `location / {` +- supprimez les 2 autres entrées `location` + +```nginx +proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off; + +map $sent_http_content_type $expires { + "text/html" 1h; # set this to your needs + "text/html; charset=utf-8" 1h; # set this to your needs + default 7d; # set this to your needs +} + +server { + listen 80; # the port nginx is listening on + server_name your-domain; # setup your domain here + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + charset utf-8; + + root /var/www/NUXT_PROJECT_PATH/dist + + location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ { + expires $expires; + add_header Pragma public; + add_header Cache-Control "public"; + + try_files $uri $uri/ @proxy; + } + + location / { + expires $expires; + add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';"; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; + add_header X-Frame-Options "SAMEORIGIN"; + + try_files $uri $uri/index.html @proxy; # for generate.subFolders: true + # try_files $uri $uri.html @proxy; # for generate.subFolders: false + } + + location @proxy { + expires $expires; + add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';"; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-Cache-Status $upstream_cache_status; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_ignore_headers Cache-Control; + proxy_http_version 1.1; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here + proxy_cache nuxt-cache; + proxy_cache_bypass $arg_nocache; # probably better to change this + proxy_cache_valid 200 302 60m; # set this to your needs + proxy_cache_valid 404 1m; # set this to your needs + proxy_cache_lock on; + proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504; + proxy_cache_key $uri$is_args$args; + } +} +``` + +## Configuration nginx pour Laravel Forge + +Changez `YOUR_WEBSITE_FOLDER` pour le dossier de votre site web et `YOUR_WEBSITE_DOMAIN` par l'URL de celui-ci. Laravel Forge va remplir ces valeurs pour vous, mais assurez-vous-en avec une double vérification. + +```nginx +# CONFIGURATION FORGE (NE PAS SUPPRIMER !) +include forge-conf/REPERTOIRE_DE_VOTRE_SITE_WEB/before/*; + +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 80; + listen [::]:80; + server_name DOMAINE_DE_VOTRE_SITE_WEB; + + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Content-Type-Options "nosniff"; + + charset utf-8; + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + # CONFIGURATION FORGE (NE PAS SUPPRIMER !) + include forge-conf/REPERTOIRE_DE_VOTRE_SITE_WEB/server/*; + + location / { + expires $expires; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # configurer l'adresse de l'instance Node.js ici + } + + access_log off; + error_log /var/log/nginx/REPERTOIRE_DE_VOTRE_SITE_WEB-error.log error; + + location ~ /\.(?!well-known).* { + deny all; + } +} + +# CONFIGURATION FORGE (NE PAS SUPPRIMER !) +include forge-conf/REPERTOIRE_DE_VOTRE_SITE_WEB/after/*; +``` + +## Securisation de Laravel Forge avec TLS + +C'est mieux de laisser Laravel éditer le fichier `nginx.conf pour vous, en cliquant sur Sites -> DOMAINE_DE_VOTRE_SITE_WEB (NOM_DU_SERVEUR) puis cliquer sur SSL et installer un certificat de l'un des fournisseurs. Rappelez-vous d'activer le certificat. Votre fichier`nginx.conf` devrait maintenant ressembler à ça : + +```nginx +# CONFIGURATION FORGE (NE PAS SUPPRIMER !) +include forge-conf/REPERTOIRE_DE_VOTRE_SITE_WEB/before/*; + +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + server_name DOMAINE_DE_VOTRE_SITE_WEB; + + # CONFIGURATION FORGE (NE PAS SUPPRIMER !) + ssl_certificate /etc/nginx/ssl/REPERTOIRE_DE_VOTRE_SITE_WEB/258880/server.crt; + ssl_certificate_key /etc/nginx/ssl/REPERTOIRE_DE_VOTRE_SITE_WEB/258880/server.key; + + ssl_protocols TLSv1 TLSv1.1 TLSv1.2; + ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES'; + ssl_prefer_server_ciphers on; + ssl_dhparam /etc/nginx/dhparams.pem; + + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Content-Type-Options "nosniff"; + + charset utf-8; + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + # CONFIGURATION FORGE (NE PAS SUPPRIMER !) + include forge-conf/REPERTOIRE_DE_VOTRE_SITE_WEB/server/*; + + location / { + expires $expires; + + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_redirect off; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # configurer l'adresse de l'instance Node.js ici + } + + access_log off; + error_log /var/log/nginx/REPERTOIRE_DE_VOTRE_SITE_WEB-error.log error; + + location ~ /\.(?!well-known).* { + deny all; + } +} + +# CONFIGURATION FORGE (NE PAS SUPPRIMER !) +include forge-conf/REPERTOIRE_DE_VOTRE_SITE_WEB/after/*; +``` diff --git a/nuxtjs.org/content/fr/.faq/postcss-plugins.md b/nuxtjs.org/content/fr/.faq/postcss-plugins.md new file mode 100644 index 000000000..14698f397 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/postcss-plugins.md @@ -0,0 +1,49 @@ +--- +title: Comment ajouter des plugins PostCSS? +description: Comment ajouter des plugins PostCSS dans NuxtJS? +category: configuration +position: 4 +--- + +### Méthode recommandée + +S'il est présent, renommez ou supprimez le `postcss.config.js` dans votre répertoire de projet. Ensuite, dans votre fichier `nuxt.config.js`, ajoutez ce qui suit: + +```js +export default { + build: { + postcss: { + // Ajouter des noms de plugins comme clé et des arguments comme valeur + // Installez-les avant comme dépendances avec npm ou yarn + plugins: { + // Désactiver un plugin en passant false comme valeur + 'postcss-url': false, + 'postcss-nested': {}, + 'postcss-responsive-type': {}, + 'postcss-hexrgba': {} + }, + preset: { + // Modifier les paramètres postcss-preset-env + autoprefixer: { + grid: true + } + } + } + } +} +``` + +### Méthode héritée + +**⚠️ Avertissement: c'est obsolète.** + +Utilisez `postcss.config.js`, par exemple: + +```js +const join = require('path').join +const tailwindJS = join(__dirname, 'tailwind.js') + +module.exports = { + plugins: [require('tailwindcss')(tailwindJS), require('autoprefixer')] +} +``` diff --git a/nuxtjs.org/content/fr/.faq/pre-processors.md b/nuxtjs.org/content/fr/.faq/pre-processors.md new file mode 100644 index 000000000..1c6698f48 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/pre-processors.md @@ -0,0 +1,36 @@ +--- +title: Comment utiliser des préprocesseurs? +description: Comment utiliser des préprocesseurs avec Nuxt.js ? +category: configuration +position: 2 +--- + +Grâce à [Vue Loader](http://vue-loader.vuejs.org/fr/configurations/pre-processors.html), vous pouvez utiliser n'importe quel préprocesseur pour vos `<template>`, `<script>` ou `<style>` : il suffit d'utiliser l'attribut `lang`. + +Exemple d'une `pages/index.vue` utilisant [Pug](https://github.com/pugjs/pug), [CoffeeScript](http://coffeescript.org) et [Sass](http://sass-lang.com/) : + +```html +<template lang="pug"> h1.red Bonjour {{ name }}! </template> + +<script lang="coffee"> + export default data: -> + { name: 'le Monde' } +</script> + +<style lang="sass"> + .red + color: red +</style> + +<style lang="scss"> + .red { + color: red; + } +</style> +``` + +Pour être en mesure d'utiliser ces préprocesseurs, nous devons installer leurs loaders webpack : + +```bash +npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader sass sass-loader@10 fibers +``` diff --git a/nuxtjs.org/content/fr/.faq/surge-deployment.md b/nuxtjs.org/content/fr/.faq/surge-deployment.md new file mode 100644 index 000000000..a0e3c8f9d --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/surge-deployment.md @@ -0,0 +1,38 @@ +--- +title: Déployer avec Surge +description: Comment déployer une application Nuxt.js avec Surge ? +category: deployment +position: 311 +--- + +Nuxt.js vous donne la possibilité d'héberger votre application web sur n'importe quel hébergeur statique tel que [Surge](https://surge.sh/) par exemple. + +Pour déployer sur Surge, installez `surge` sur votre ordinateur : + +```bash +npm install -g surge +``` + +Puis demander à Nuxt.js de générer votre application web : + +```bash +npm run generate +``` + +Cela créera un répertoire `dist` contenant les fichiers prêts à être déployés sur un hébergement statique. + +Nous pouvons alors déployer sur Surge : + +```bash +surge dist/ +``` + +Tadaaa :) + +Si vous avez un projet avec des [routes dynamiques](/docs/2.x/directory-structure/pages#dynamic-pages), consultez la [configuration de `generate`](/docs/2.x/configuration-glossary) afin d'expliquer à Nuxt.js comment générer ces routes dynamiques. + +<div class="Alert"> + +Quand vous générez votre application web via `nuxt generate`, [le contexte](/api) passé à [`asyncData`](/docs/2.x/features/data-fetching#async-data) et [`fetch`](/docs/2.x/directory-structure/store) ne disposent pas de `req` ni de `res`. + +</div> diff --git a/nuxtjs.org/content/fr/.faq/vercel-deployment.md b/nuxtjs.org/content/fr/.faq/vercel-deployment.md new file mode 100644 index 000000000..f15ddcaff --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/vercel-deployment.md @@ -0,0 +1,58 @@ +--- +title: Déployer avec Vercel +description: Comment déployer une application Nuxt.js avec Vercel ? +category: deployment +position: 310 +--- + +## Now V2 + +**Remarque:** Vous ne pouvez pas déployer une application Nuxt rendue côté serveur avec Now V2 pour le moment. Veuillez utiliser Now V1 pour ces applications. + +Pour déployer avec [Vercel](https://vercel.com), il faut un fichier `package.json` ainsi qu'un fichier de configuration `vercel.json` : + +- Ajout la commande de script `vercel-build` à `package.json`: + - Pour SPA (sans SSR): + ```js + "scripts": { + ... + "vercel-build": "nuxt build --spa" + } + ``` + - Pour la génération statique (Pre rendu): + ```js + "scripts": { + ... + "vercel-build": "nuxt generate" + } + ``` +- Créer `now.json` et définir `builds` + ```json + { + "version": 2, + "builds": [{ "src": "package.json", "use": "@vercel/static-build" }] + } + ``` +- Puis exécutez `now` et profitez ! + +## Now V1 (héritage) + +Pour déployer avec [Vercel](https://vercel.com), un fichier `package.json` comme suit est recommandé : + +```json +{ + "name": "my-app", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} +``` + +Puis exécutez `now` et profitez ! + +Note : nous recommandons d'ajouter `.nuxt` dans `.npmignore` ou `.gitignore`. diff --git a/nuxtjs.org/content/fr/.faq/webpack-audio-files.md b/nuxtjs.org/content/fr/.faq/webpack-audio-files.md new file mode 100644 index 000000000..ec061d126 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/webpack-audio-files.md @@ -0,0 +1,52 @@ +--- +title: Comment étendre Webpack pour charger des fichiers audio ? +description: Comment étendre Webpack pour charger des fichiers audio ? +category: configuration +position: 11 +--- + +Les fichiers audio doivent être traités par `file-loader`. Ce chargement est déjà inclus dans la configuration Webpack par défaut, mais il n'est pas configuré pour gérer les fichiers audio. Vous devez étendre sa configuration par défaut dans `nuxt.config.js`: + +```js +export default { + build: { + extend(config, ctx) { + config.module.rules.push({ + test: /\.(ogg|mp3|wav|mpe?g)$/i, + loader: 'file-loader', + options: { + name: '[path][name].[ext]' + } + }) + } + } +} +``` + +Vous pouvez maintenant importer des fichiers audio comme ceci `<audio :src="require('@/assets/water.mp3')" controls></audio>`. + +Si vous voulez seulement écrire: `<audio src="@/assets/water.mp3" controls></audio>`, vous devez dire à `vue-loader` de charger automatiquement vos fichiers audio lorsque vous les référencez avec l'attribut `src`: + +```js +export default { + build: { + loaders: { + vue: { + transformAssetUrls: { + audio: 'src' + } + } + }, + + extend(config, ctx) { + config.module.rules.push({ + test: /\.(ogg|mp3|wav|mpe?g)$/i, + loader: 'file-loader', + options: { + name: '[path][name].[ext]' + } + }) + } + } +} +``` diff --git a/nuxtjs.org/content/fr/.faq/webpack-plugins.md b/nuxtjs.org/content/fr/.faq/webpack-plugins.md new file mode 100644 index 000000000..830a33270 --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/webpack-plugins.md @@ -0,0 +1,24 @@ +--- +title: Comment ajouter des plugins webpack ? +description: Comment ajouter des plugins webpack dans mon application Nuxt.js ? +category: configuration +position: 6 +--- + +Dans `nuxt.config.js` : + +```js +import webpack from 'webpack' + +export default { + build: { + plugins: [ + new webpack.ProvidePlugin({ + $: 'jquery', + _: 'lodash' + // ...etc. + }) + ] + } +} +``` diff --git a/nuxtjs.org/content/fr/.faq/window-document-undefined.md b/nuxtjs.org/content/fr/.faq/window-document-undefined.md new file mode 100644 index 000000000..3c9381ecd --- /dev/null +++ b/nuxtjs.org/content/fr/.faq/window-document-undefined.md @@ -0,0 +1,16 @@ +--- +title: window ou document non défini ? +description: window ou document non défini avec Nuxt.js ? +category: development +position: 201 +--- + +Cette erreur est due au rendu côté serveur. Si vous devez spécifier que vous souhaitez importer une ressource uniquement côté client, vous devez utiliser la variable `process.client`. + +Par exemple, dans votre fichier `.vue` : + +```js +if (process.client) { + require('external_library') +} +``` diff --git a/nuxtjs.org/content/fr/.video-courses/build-a-job-board-with-laravel-graphql-nuxt-and-apollo.md b/nuxtjs.org/content/fr/.video-courses/build-a-job-board-with-laravel-graphql-nuxt-and-apollo.md new file mode 100644 index 000000000..46f38bc87 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/build-a-job-board-with-laravel-graphql-nuxt-and-apollo.md @@ -0,0 +1,9 @@ +--- +title: "Créer un tableau d'offres d'emploi avec Laravel, GraphQL, Nuxt et Apollo" +description: Apprenez en construisant une API GraphQL avec Laravel Lighthouse, puis creez un frontend avec Nuxt et Apollo pour la consommer. Tout cela avec Tailwind. +img: build-job-board-with-nuxt +platform: Code Course +link: https://codecourse.com/courses/build-a-job-board-with-laravel-graphql-nuxt-and-apollo +position: 5 +type: premium +--- diff --git a/nuxtjs.org/content/fr/.video-courses/building-application-with-vue-&-nuxt.md b/nuxtjs.org/content/fr/.video-courses/building-application-with-vue-&-nuxt.md new file mode 100644 index 000000000..d443a5431 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/building-application-with-vue-&-nuxt.md @@ -0,0 +1,9 @@ +--- +title: 'Créez des applications avec Vue & Nuxt' +description: Créez des applications web dynamiques avec Vue et Nuxt ! Tout au long du cours, vous élaborerez divers projets en utilisant les outils de l'écosystème Vue, notamment le Vue CLI, Nuxt, Vuex Store et bien d'autres. +img: building-applications-with-vue-and-nuxt +platform: Frontend Masters +link: https://frontendmasters.com/courses/vue-nuxt-apps/ +position: 4 +type: premium +--- diff --git a/nuxtjs.org/content/fr/.video-courses/create-a-news-app-with-vuejs-and-nuxt.md b/nuxtjs.org/content/fr/.video-courses/create-a-news-app-with-vuejs-and-nuxt.md new file mode 100644 index 000000000..a1b423537 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/create-a-news-app-with-vuejs-and-nuxt.md @@ -0,0 +1,9 @@ +--- +title: "Créer une application d'actualités avec Vue.js et Nuxt" +description: "Vous apprendrez à créer des pages dynamiques pour chaque section de votre application et à charger, stocker, afficher, filtrer et styliser les données. Le résultat final sera une application d'actualités avec plusieurs pages de catégories, des commentaires pour chaque section et des pages utilisateur." +img: create-news-app-with-vue-and-nuxt +platform: egghead +link: https://egghead.io/courses/create-a-news-app-with-vue-js-and-nuxt +position: 9 +type: gratuit +--- diff --git a/nuxtjs.org/content/fr/.video-courses/get-started-with-nuxt.md b/nuxtjs.org/content/fr/.video-courses/get-started-with-nuxt.md new file mode 100644 index 000000000..3e7cd02b2 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/get-started-with-nuxt.md @@ -0,0 +1,9 @@ +--- +title: 'Commencez avec Nuxt' +description: Apprenez les bases de la création et du déploiement d'un site Nuxt, y compris les routes dynamiques, la récupération de données, le référencement, le lazy loading, les styles, les transitions globales, ainsi que la génération et le déploiement de votre application Nuxt. +img: get-started-with-nuxt +platform: Jamstack Explorers +link: https://explorers.netlify.com/learn/get-started-with-nuxt +position: 2 +type: gratuit +--- diff --git a/nuxtjs.org/content/fr/.video-courses/learn-nuxt-with-debbie.md b/nuxtjs.org/content/fr/.video-courses/learn-nuxt-with-debbie.md new file mode 100644 index 000000000..f76d632c7 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/learn-nuxt-with-debbie.md @@ -0,0 +1,9 @@ +--- +title: 'Apprenez Nuxt avec Debbie' +description: Une playlist de vidéos YouTube couvrant tout ce qui concerne Nuxt, y compris de courtes vidéos et des flux en direct. +img: learn-nuxt-with-debbie +platform: YouTube +link: https://www.youtube.com/c/DebbieOBrien +position: 3 +type: gratuit +--- diff --git a/nuxtjs.org/content/fr/.video-courses/learn-nuxtjs-by-building-a-real-world-app.md b/nuxtjs.org/content/fr/.video-courses/learn-nuxtjs-by-building-a-real-world-app.md new file mode 100644 index 000000000..74ade8e33 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/learn-nuxtjs-by-building-a-real-world-app.md @@ -0,0 +1,8 @@ +--- +title: 'Apprendre Nuxt.js en developpant une application réelle' +description: Apprenez à créer des sites web robustes et modernes avec Nuxt en partant de zéro. Améliorez les performances de votre site web, la qualité du code, tout en faisant un meilleur usage du framework. +img: mastering-nuxt +platform: Mastering Nuxt +link: https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link +type: premium +--- diff --git a/nuxtjs.org/content/fr/.video-courses/nuxt.js-vuejs-on-steroids.md b/nuxtjs.org/content/fr/.video-courses/nuxt.js-vuejs-on-steroids.md new file mode 100644 index 000000000..b113a775d --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/nuxt.js-vuejs-on-steroids.md @@ -0,0 +1,9 @@ +--- +title: 'Nuxt.js - Vue.js sur stéroïdes' +description: Construisez des applications engageante avec Vue JS et Nuxt.js. Nuxt ajoute un rendu facile côté serveur et une approche de configuration basée sur les dossiers. +img: nuxt-vue-steroids +platform: Udemy +link: https://www.udemy.com/course/nuxtjs-vuejs-on-steroids/ +position: 6 +type: premium +--- diff --git a/nuxtjs.org/content/fr/.video-courses/nuxtjs-fundamentals.md b/nuxtjs.org/content/fr/.video-courses/nuxtjs-fundamentals.md new file mode 100644 index 000000000..085e8d909 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/nuxtjs-fundamentals.md @@ -0,0 +1,9 @@ +--- +title: 'Nuxt.js Fundamentals' +description: Learn the fundamentals of Nuxt.js in this course that we created together with the founders of Nuxt. The course covers what you need to know from scaffolding to deploying your first Nuxt.js application. +img: nuxt-fundamentals +platform: Vue School +link: https://vueschool.io/courses/nuxtjs-fundamentals?friend=nuxt&utm_source=Nuxtjs.org&utm_medium=Link&utm_content=Courses&utm_campaign=nuxtjs-fundamentals +position: 8 +type: gratuit +--- diff --git a/nuxtjs.org/content/fr/.video-courses/scaling-vue-with-nuxtjs.md b/nuxtjs.org/content/fr/.video-courses/scaling-vue-with-nuxtjs.md new file mode 100644 index 000000000..281be0cc2 --- /dev/null +++ b/nuxtjs.org/content/fr/.video-courses/scaling-vue-with-nuxtjs.md @@ -0,0 +1,9 @@ +--- +title: 'Faire évoluer Vue avec Nuxt.js' +description: Une fois que vous êtes à l'aise avec Vue, l'apprentissage d'un framework comme Nuxt vous permet de créer des applications web prêtes à la production qui suivent les meilleures pratiques. +img: scaling-vue-with-nuxt +platform: Vue Mastery +link: https://www.vuemastery.com/courses/scaling-vue-with-nuxt-js/why-use-nuxt +position: 7 +type: premium +--- diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/1.installation.md b/nuxtjs.org/content/fr/0.docs/1.get-started/1.installation.md new file mode 100644 index 000000000..7bc73f969 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/1.installation.md @@ -0,0 +1,234 @@ +--- +title: Installation +description: Nous pouvons découvrir ci-dessous comment créer un projet Nuxt.js fonctionnel en 4 étapes. +position: 1 +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/01_installation?fontsize=14&hidenavigation=1&theme=dark +--- + +## Prérequis + +- [node](https://nodejs.org) - au moins v10.13 _Nous vous recommandons d'installer la dernière version LTS._ +- Un éditeur de texte, nous recommandons [VSCode](https://code.visualstudio.com/) avec l'extension [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) ou [WebStorm](https://www.jetbrains.com/webstorm/) +- Un terminal, nous vous recommandons d'utiliser [le terminal intégré de VSCode](https://code.visualstudio.com/docs/editor/integrated-terminal) ou le [terminal de Webstorm](https://www.jetbrains.com/help/webstorm/terminal-emulator.html). + +## Utiliser create-nuxt-app + +Pour créer rapidement un nouveau projet, nous pouvons utiliser [create-nuxt-app](https://github.com/nuxt/create-nuxt-app). + +Il faut vérifier que `npx` est installé (npx est livré par défaut depuis npm v5.2.0) ou npm v6.1 ou yarn. + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn create nuxt-app <project-name> +``` + + </code-block> + <code-block label="npx"> + +```bash +npx create-nuxt-app <project-name> +``` + + </code-block> + <code-block label="npm"> + +```bash +npm init nuxt-app <project-name> +``` + + </code-block> + +</code-group> + +Quelques questions nous seront posées (nom, options Nuxt, framework UI, TypeScript, linter, framework de test, etc.). Pour en savoir plus sur toutes les options voir [Create Nuxt App](https://github.com/nuxt/create-nuxt-app/blob/master/README.md). + +Quand on y aura répondu, toutes les dépendances seront installées. La prochaine étape est de naviguer dans le répertoire et de démarrer notre application: + +<code-group> + <code-block label="Yarn" active> + +```bash +cd <project-name> +yarn dev +``` + + </code-block> + <code-block label="npm"> + +```bash +cd <project-name> +npm run dev +``` + + </code-block> +</code-group> + +Notre application est maintenant en cours d'exécution sur [http://localhost:3000](http://localhost:3000). + +<base-alert type="info"> + +Une autre façon de démarrer avec Nuxt.js est d'utiliser [CodeSandbox](https://template.nuxtjs.org) ce qui est un excellent moyen de jouer rapidement avec Nuxt.js et/ou de partager votre code avec d'autres personnes. + +</base-alert> + +## Commencer de zéro + +Créer un projet Nuxt.js de zéro demande seulement un répertoire et un fichier. + +Dans cet exemple, nous allons utiliser le terminal pour créer les répertoires et fichiers mais nous pouvons utiliser votre éditeur pour les créer. + +### Première étape : configurer votre projet + +Pour commencer, il faut créer un répertoire vide avec le nom du projet et naviguer à l'intérieur de celui-ci : + +```bash +mkdir <nom-du-projet> +cd <nom-du-projet> +``` + +_Remplacer `<nom-du-projet>` avec le nom du projet._ + +Puis créer un fichier nommé `package.json` : + +```bash +touch package.json +``` + +Ouvrir le fichier `package.json` avec notre éditeur préféré et ajouter ce contenu JSON : + +```json{}[package.json] +{ + "name": "my-app", + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "generate": "nuxt generate", + "start": "nuxt start" + } +} +``` + +`scripts` définit les commandes Nuxt.js que nous allons lancer avec la commande `npm run <commande>`. + +#### **À quoi sert le fichier package.json ?** + +Le fichier `package.json` est comme une carte d'identité pour notre projet. Si on ne sait pas ce qu'est le fichier `package.json`, nous vous recommandons grandement de lire la [documentation de npm](https://docs.npmjs.com/creating-a-package-json-file). + +### Deuxième étape : installer nuxt + +Une fois le fichier `package.json` créé, nous devons ajouter `nuxt` à votre projet avec la commande `npm` ou `yarn` comme ci-dessous : + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add nuxt +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install nuxt +``` + + </code-block> +</code-group> + +Cette commande va ajouter `nuxt` comme une dépendance du projet et va automatiquement l'ajouter à notre `package.json`. Le répertoire `node_modules` va aussi être créé, c'est l'endroit où sont installés tous les packages et leurs dépendances. + +<base-alert type="info"> + +Un fichier `yarn.lock` ou `package-lock.json` est aussi créé, ce qui assure une consistance et une compatibilité dans les dépendances installées par votre projet. + +</base-alert> + +### Troisième étape : créer notre première page + +Nuxt.js transforme tous les fichiers `*.vue` dans le répertoire `pages` comme une route pour l'application. + +Créer le répertoire `pages` dans notre projet : + +```bash +mkdir pages +``` + +Puis, créer un fichier `index.vue` dans le répertoire `pages` : + +```bash +touch pages/index.vue +``` + +Il est important que cette page soit appelée `index.vue` car elle sera la page par défaut quand notre application sera ouverte. C'est la page d'accueil et elle doit être appelée index. + +Il faut ouvrir le fichier `index.vue` dans notre éditeur et ajouter le contenu suivant : + +```html{}[pages/index.vue] +<template> + <h1>Hello world!</h1> +</template> +``` + +### Étape finale : lancer le projet + +On peut lancer notre projet en tapant la commande ci-dessous dans le terminal : + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn dev +``` + + </code-block> + <code-block label="npm"> + +```bash +npm run dev +``` + + </code-block> +</code-group> + +<base-alert type="info"> + +La commande `dev` est utilisée lorsque l'application est lancée en mode développement. + +</base-alert> + +L'application est maintenant en cours d'exécution sur **[http://localhost:3000](http://localhost:3000/).** + +On peut l'ouvrir dans notre navigateur en cliquant sur le lien dans le terminal et nous devrions voir le texte "Hello World" que nous avons ajouté dans l'étape précédente. + +<base-alert type="info"> + +Une fois Nuxt.js lancé en mode développement, il écoutera les changements de fichiers dans la plupart des répertoires, il n'est pas nécessaire de redémarrer l'application quand on édite ou ajoute une page. + +</base-alert> + +<base-alert type="warning"> + +Lorsque on lance la commande `dev`, un répertoire `.nuxt` est créé. Ce répertoire devrait être ignoré par Git (ou tout autre système de gestion de versions). On peut faire ceci en créant un fichier `.gitignore` à la racine de votre projet et en y ajoutant `.nuxt`. + +</base-alert> + +### Étape bonus + +Créer une page nommée `fun.vue` dans le répertoire `pages`. + +Ajouter un `<template></template>` et insérer un titre avec une phrase drôle à l'intérieur. + +On peut ensuite aller sur le navigateur et regarder la nouvelle page sur **[http://localhost:3000/fun](http://localhost:3000/fun).** + +<base-alert type="info"> + +Si nous créons un répertoire nommé `more-fun` et ajoutons un fichier `index.vue` à l'intérieur, cela donnera le même résultat que de créer un fichier `more-fun.vue`. + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/2.routing.md b/nuxtjs.org/content/fr/0.docs/1.get-started/2.routing.md new file mode 100644 index 000000000..bd54bd685 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/2.routing.md @@ -0,0 +1,61 @@ +--- +title: Routage +description: La plupart des sites Web ont plus d'une page. Par exemple, une page d'accueil, une page à propos, une page de contact, etc. Pour afficher ces pages, nous avons besoin d'un routeur. +position: 2 +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/02_routing?fontsize=14&hidenavigation=1&theme=dark +--- + +## Routes automatiques + +La plupart des sites Web possèdent plus d'une page (comme une page d'accueil, une page à propos, une page de contact, etc.). Pour afficher ces pages, nous avons besoin d'un routeur. C'est là qu'intervient `vue-router`. + +Lorsque nous travaillons avec Vue, nous devons configurer un fichier de configuration (comme `router.js`) et y ajouter manuellement toutes nos routes. Nuxt.js génère automatiquement la configuration `vue-router` pour nous, en fonction des fichiers Vue fournis dans le répertoire `pages`. + +Cela signifie que nous n'avons plus jamais besoin d'écrire une configuration de routeur ! Nuxt.js nous offre également le découpage dynamique de code pour toutes nos routes. + +En d'autres termes, tout ce que nous avons à faire pour avoir un routage dans notre application est de créer des fichiers `.vue` dans le répertoire `pages`. + +<base-alert type="next"> + +En savoir plus sur le [Routage](/docs/2.x/features/file-system-routing) + +</base-alert> + +## Navigation + +Pour naviguer entre les pages de notre application, nous devons utiliser le composant [NuxtLink](/docs/2.x/features/nuxt-components#the-nuxtlink-component). Ce composant est inclus avec Nuxt.js et nous n'avons donc pas à l'importer comme on le fait avec d'autres composants. + +Il est similaire à la balise HTML `<a>`, mais à la place d'utiliser un attribut `href="/about"`, nous utilisons `to="/about"`. Si nous avons déjà utilisé `vue-router`, nous pouvons comparer `<NuxtLink>` au composant `<RouterLink>`. + +Voici un exemple de l'utilisation du composant `NuxtLink` avec un lien vers la page `index.vue` dans le répertoire `pages` : + +```html{}[pages/index.vue] +<template> + <NuxtLink to="/">Home page</NuxtLink> +</template> +``` + +Pour tous liens vers des pages de notre site, il faut utiliser `<NuxtLink>`. Si nous avons des liens vers d'autres sites Web, nous devons utiliser la balise `<a>` comme ci-dessous : + +```html{}[pages/index.vue] +<template> + <main> + <h1>Home page</h1> + <NuxtLink to="/about"> + About (lien interne vers une page appartenant à notre application Nuxt) + </NuxtLink> + <a href="https://nuxtjs.org">Lien vers une page externe</a> + </main> +</template> +``` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<base-alert type="next"> + +En savoir plus sur le [composant NuxtLink](/docs/2.x/features/nuxt-components#the-nuxtlink-component). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/3.directory-structure.md b/nuxtjs.org/content/fr/0.docs/1.get-started/3.directory-structure.md new file mode 100644 index 000000000..2d5686ea1 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/3.directory-structure.md @@ -0,0 +1,96 @@ +--- +title: Structure des répertoires +description: La structure par défaut d'une application Nuxt.js est destinée à fournir un excellent point de départ pour les applications plus ou moins grandes. Nous sommes libres d'organiser notre application comme on le souhaite et nous pouvons créer d'autres répertoires au fur et à mesure que nous en avons besoin. +position: 3 +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/03_directory_structure?fontsize=14&hidenavigation=1&theme=dark +--- + +La structure par défaut d'une application Nuxt.js est destinée à fournir un excellent point de départ pour les applications plus ou moins grandes. Nous sommes libres d'organiser notre application comme on le souhaite et nous pouvons créer d'autres répertoires au fur et à mesure que nous en avons besoin. + +Créons les répertoires et les fichiers qui n'existent pas encore dans notre projet : + +```bash +mkdir components assets static +touch nuxt.config.js +``` + +Ce sont les principaux répertoires et fichiers que nous utilisons lors de la construction d'une application Nuxt.js. Nous pouvons trouver une explication de chacun d'entre eux ci-dessous. + +<base-alert type="info"> + +La création de répertoires avec ces noms active les fonctionnalités de votre projet Nuxt.js. + +</base-alert> + +## Répertoires + +### Le répertoire `pages` + +Le répertoire `pages` contient les vues et les routes de notre application. Comme nous l'avons appris dans [l'étape précédente](/docs/2.x/get-started/routing), Nuxt.js lit tous les fichiers `.vue` dans ce répertoire et les utilise pour créer le routeur de l'application. + +<base-alert type="next"> + +En savoir plus sur le [répertoire pages](/docs/2.x/directory-structure/pages) + +</base-alert> + +### Le répertoire `components` + +Le répertoire `components` est l'endroit où nous plaçons tous nos composants Vue.js qui sont ensuite importés dans les pages. + +Avec Nuxt.js, nous pouvons créer nos composants et les importer automatiquement dans les fichiers `.vue`, ce qui signifie qu'il n'est pas nécessaire de les importer manuellement dans la section script. Nuxt.js les analysera et les importera automatiquement pour nous une fois que nous aurons activé cette fonctionnalité dans le fichier de configuration `nuxt.config.js`. + +<base-alert type="next"> + +En savoir plus sur le [répertoire des composants](/docs/2.x/directory-structure/components) + +</base-alert> + +### Le répertoire `assets` + +Le répertoire `assets` contient nos fichiers non compilés tels que les styles, images ou polices de caractères. + +<base-alert type="next"> + +En savoir plus sur le [répertoire assets](/docs/2.x/directory-structure/assets) + +</base-alert> + +### Le répertoire `static` + +Le répertoire `static` est directement servi à la racine du serveur et contient des fichiers qui doivent conserver leur nom (comme `robots.txt`) _ou_ qui ne changeront probablement pas (comme le favicon). + +<base-alert type="next"> + +En savoir plus sur le [répertoire static](/docs/2.x/directory-structure/static) + +</base-alert> + +### Le fichier `nuxt.config.js` + +Le fichier `nuxt.config.js` est le point unique de configuration pour Nuxt.js. Si nous souhaitons ajouter des modules ou remplacer les paramètres par défaut, c'est ce fichier qu'il faudra modifier. + +<base-alert type="next"> + +En savoir plus sur le [fichier nuxt.config.js](/docs/2.x/directory-structure/nuxt-config) + +</base-alert> + +### Le fichier `package.json` + +Le fichier `package.json` contient toutes les dépendances et scripts de notre application. + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +## En savoir plus sur la structure du projet + +Il existe d'autres répertoires et fichiers utiles, comme [content](/docs/2.x/directory-structure/content), [layouts](/docs/2.x/directory-structure/layouts), [middleware](/docs/2.x/directory-structure/middleware), [modules](/docs/2.x/directory-structure/modules), [plugins](/docs/2.x/directory-structure/plugins) et [store](/docs/2.x/directory-structure/store). Comme ils ne sont pas nécessaires pour les petites applications, ils ne sont pas traités ici. + +<base-alert type="next"> + +Pour en savoir plus sur tous les répertoires en détail, il ne faut pas hésiter à lire le [guide sur la structure des répertoires](/docs/2.x/directory-structure/nuxt). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/4.commands.md b/nuxtjs.org/content/fr/0.docs/1.get-started/4.commands.md new file mode 100644 index 000000000..ad60fb191 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/4.commands.md @@ -0,0 +1,216 @@ +--- +title: Commandes et déploiement +description: Nuxt.js est livré avec un ensemble de commandes utiles, à la fois pour le développement et la production. +position: 4 +category: get-started +--- + +Nuxt.js est livré avec un ensemble de commandes utiles, à la fois pour le développement et la production. + +## Utilisation dans package.json + +Vous devriez mettre ces commandes dans `package.json`: + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate" +} +``` + +Ensuite, vous pouvez lancer vos commandes via `yarn <command>` ou `npm run <command>` (exemple: `yarn dev` / `npm run dev`). + +## Environment de développement + +Pour lancer Nuxt en mode développement avec [le module de remplacement à chaud](https://webpack.js.org/concepts/hot-module-replacement/) sur `http://localhost:3000`: + +<code-group> + + <code-block label="Yarn" active> + +```bash +yarn dev +``` + + </code-block> + + <code-block label="npm"> + +```bash +npm run dev +``` + + </code-block> +</code-group> + +## Liste des commandes + +Vous pouvez exécuter différentes commandes en fonction de la [cible](/docs/2.x/features/deployment-targets): + +### target: `server` (default value) + +- **nuxt dev** - Lancez le serveur de développement. +- **nuxt build** - Créez et optimisez votre application avec Webpack pour la production. +- **nuxt start** - Démarrez le serveur de production (après avoir lancé `nuxt build`). Utiliser pour un hébergement Node.js comme Heroku, Digital Ocean, etc. + +### target: `static` + +- **nuxt dev** - Lancez le serveur de développement. +- **nuxt generate** - Construisez l'application (si nécessaire), générez chaque route sous forme de fichier HTML et exportez statiquement vers le répertoire `dist/` (utilisé pour l'hébergement statique). +- **nuxt start** - servir le répertoire `dist/` comme le ferait votre hébergement statique (Netlify, Vercel, Surge, etc.), idéal pour les tests avant le déploiement. + +## Webpack Config Inspection + +Vous pouvez inspecter la configuration webpack utilisée par nuxt pour créer un projet similaire à [vue inspect](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config). + +- **nuxt webpack [query...]** + +**Arguments:** + +- `--name`: nom du bundle à inspecter (client, serveur, moderne) +- `--dev`: inspecter la configuration webpack pour le mode dev +- `--depth`: inspecter en profondeur. La valeur par défaut est 2 pour empêcher la sortie verbeuse. +- `--no-colors`: désactiver les couleurs ANSI (désactivées par défaut lorsque TTY n'est pas disponible ou quand piping vers un fichier) + +**Exemples:** + +- `nuxt webpack` +- `nuxt webpack devtool` +- `nuxt webpack resolve alias` +- `nuxt webpack module rules` +- `nuxt webpack module rules test=.jsx` +- `nuxt webpack module rules test=.pug oneOf use.0=raw` +- `nuxt webpack plugins constructor.name=WebpackBar options reporter` +- `nuxt webpack module rules loader=vue-` +- `nuxt webpack module rules "loader=.*-loader"` + +## Déploiement de production + +Nuxt.js vous permet de choisir entre les déploiements de serveur ou statique. + +### Déploiement de serveur + +Pour déployer une application SSR, nous utilisons `target: server`, où serveur est la valeur par défaut. + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn build +``` + + </code-block> + <code-block label="npm"> + +```bash +npm run build +``` + + </code-block> +</code-group> + +Nuxt.js créera un répertoire `.nuxt` avec tout ce qu'il contient prêt à être déployé sur votre serveur d'hébergement. + +<base-alert type="info"> + +nous recommandons de mettre `.nuxt` dans `.npmignore` ou `.gitignore`. + +</base-alert> + +Une fois votre application créée, vous pouvez utiliser la commande `start` pour voir une version de production de votre application. + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn start +``` + + </code-block> + <code-block label="npm"> + +```bash +npm run start +``` + + </code-block> +</code-group> + +### Déploiement statique (Pré-rendu) + +Nuxt.js vous donne la possibilité d'héberger votre application Web sur n'importe quel hébergement statique. + +Pour déployer un site statique généré, assurez-vous d'avoir `target: static` dans votre `nuxt.config.js`.(Pour Nuxt >= 2.13:) + +```js{}[nuxt.config.js] +export default { + target: 'static' +} +``` + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn generate +``` + + </code-block> + <code-block label="npm"> + +```bash +npm run generate +``` + + </code-block> +</code-group> + +Nuxt.js créera un répertoire `dist /` avec tout ce qu'il contient prêt à être déployé sur un service d'hébergement statique. + +Depuis Nuxt v2.13, un robot d'exploration est installé qui va maintenant explorer vos liens et générer vos routes lorsque vous utilisez la commande `nuxt generate` basée sur ces derniers. + +<base-alert> + +**Attention:** les routes dynamiques sont ignorées par la commande `generate` lors de l'utilisation Nuxt <= v2.12: [API de configuration de la génération](/docs/2.x/configuration-glossary/configuration-generate) + +</base-alert> + +<base-alert type="info"> + +Lors de la génération de votre application Web avec `nuxt generate`, [le contexte](/docs/2.x/internals-glossary/context) donnée à [asyncData](/docs/2.x/features/data-fetching#async-data) et [fetch](/docs/2.x/features/data-fetching#the-fetch-hook) n'aura pas `req` et `res`. + +</base-alert> + +#### **Échec en cas d'erreur** + +Pour renvoyer un code d'état différent de zéro lorsqu'une erreur de page est rencontrée et laisser le CI/CD échouer lors du déploiement ou de la construction, vous pouvez utiliser l'argument `--fail-on-error`. + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn generate --fail-on-error +``` + + </code-block> + <code-block label="npm"> + +```bash +npm run generate --fail-on-error +``` + + </code-block> + +</code-group> + +## Et après? + +<base-alert type="next"> + +Lisez notre [FAQ](/docs/2.x/deployment/deploying-to-21yunbox) pour trouver des exemples de déploiements sur des hôtes connus. + +</base-alert> + +</div> diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/5..conclusion.md b/nuxtjs.org/content/fr/0.docs/1.get-started/5..conclusion.md new file mode 100644 index 000000000..cf5391528 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/5..conclusion.md @@ -0,0 +1,94 @@ +--- +title: Conclusion +description: Félicitations, nous avons maintenant créé notre première application Nuxt.js et nous pouvons maintenant nous considérer comme un Nuxter. Mais il y a tellement plus à apprendre et tellement plus que nous pouvons faire avec Nuxt.js. Voici quelques recommandations. +position: 4 +category: get-started +questions: + - question: Quel est le nom du répertoire dont nous avons besoin pour que Nuxt.js fonctionne ? + answers: + - nuxt + - pages + - index + correctAnswer: pages + - question: Quel est le nom de notre fichier ID de projet ? + answers: + - package.vue + - package.json + - package.js + correctAnswer: package.json + - question: Quelle est la commande que nous devons taper dans le terminal pour lancer notre projet Nuxt.js ? + answers: + - npm dev + - npm run dev + - nuxt dev + correctAnswer: npm run dev + - question: Quelle est l'adresse dans le navigateur où nous pouvons voir notre page en mode développement ? + answers: + - http://localhost:3000/ + - http://localhost:3000/project-name:3000 + - http://localhost:3000/nuxt:3000/ + correctAnswer: http://localhost:3000/ + - question: Où mettons-nous notre configuration ? + answers: + - nuxt.config.json + - config.js + - nuxt.config.js + correctAnswer: nuxt.config.js + - question: Quel répertoire ne convient pas aux fichiers `.vue` ? + answers: + - pages + - static + - components + correctAnswer: static + - question: Dans quel répertoire mettons-nous les styles ? + answers: + - styles + - components + - assets + correctAnswer: assets + - question: Dans quel répertoire mettons-nous un fichier robots.txt ou un favicon ? + answers: + - assets + - components + - static + correctAnswer: static + - question: Quel composant utilisons-nous pour naviguer entre les pages ? + answers: + - '<Nuxt>' + - '<RouterLink>' + - '<NuxtLink>' + correctAnswer: '<NuxtLink>' + - question: "`<NuxtLink>` est utilisé pour les liens internes appartenant à l'application Nuxt.js ?" + answers: + - True + - False + correctAnswer: True +--- + +Félicitations, nous avons maintenant créé notre première application Nuxt.js et nous pouvons maintenant nous considérer comme un Nuxter. Mais il y a tellement plus à apprendre et tellement plus que nous pouvons faire avec Nuxt.js. Voici quelques recommandations. + +<base-alert type="next"> + +Consulter le [guide des concepts](../concepts/views) + +</base-alert> + +<base-alert type="next"> + +Travailler avec [asyncData](/docs/2.x/features/data-fetching#async-data) + +</base-alert> + +<base-alert type="next"> + +Choisir entre les différents [modes de rendu](/docs/2.x/features/rendering-modes) + +</base-alert> + +<base-alert type="star"> + +Vous aimez Nuxt.js jusqu'à présent ? N'oubliez pas de [mettre en favoris notre projet](https://github.com/nuxt/nuxt.js) sur GitHub + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/6.upgrading.md b/nuxtjs.org/content/fr/0.docs/1.get-started/6.upgrading.md new file mode 100644 index 000000000..d15d461b2 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/6.upgrading.md @@ -0,0 +1,37 @@ +--- +title: Mise à jour +description: La mise à jour de Nuxt.js est rapide, mais plus complexe que celle de notre package.json +position: 5 +category: get-started +--- + +> La mise à jour de Nuxt.js est rapide, mais plus complexe que celle de notre package.json + +Si nous effectuons une mise à niveau vers Nuxt v2.14 et que nous souhaitons utiliser un hébergement statique, nous devrons ajouter [target:static](/docs/2.x/features/deployment-targets#static-hosting) dans notre fichier `nuxt.config.js` pour que la commande `generate` fonctionne correctement. + +```js{}[nuxt.config.js] +export default { + target: 'static' +} +``` + +## Commencer + +1. Vérifier les [notes de publication](/docs/2.x/release-notes) pour la version que nous souhaitons mettre à niveau pour savoir s'il existe des instructions supplémentaires pour cette version en particulier. +2. Mettre à jour la version spécifiée pour le package `nuxt` dans notre fichier `package.json`. + +Après cette étape, les instructions varient en fonction de notre gestionnaire de paquets (Yarn ou npm). _[Yarn](https://yarnpkg.com/en/docs/usage) est l'outil de développement préféré pour travailler avec Nuxt car c'est celui qui a été utilisé lors de l'écriture des tests._ + +## Yarn + +3. Supprimer le fichier `yarn.lock` +4. Supprimer le répertoire `node_modules` +5. Lancer la commande `yarn` +6. Une fois l'installation terminée et les tests exécutés, nous devrions également envisager de mettre à jour d'autres dépendances. La commande `yarn outdated` peut être utilisée. + +## npm + +3. Supprimer le fichier `package-lock.json` +4. Supprimer le répertoire `node_modules` +5. Lancer la commande `npm install` +6. Une fois l'installation terminée et les tests exécutés, nous devrions également envisager de mettre à jour d'autres dépendances. La commande `npm outdated` peut être utilisée. diff --git a/nuxtjs.org/content/fr/0.docs/1.get-started/index.md b/nuxtjs.org/content/fr/0.docs/1.get-started/index.md new file mode 100644 index 000000000..3ac4a407c --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/1.get-started/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: false + redirect: /docs/get-started/installation +--- diff --git a/nuxtjs.org/content/fr/0.docs/2.concepts/1.views.md b/nuxtjs.org/content/fr/0.docs/2.concepts/1.views.md new file mode 100644 index 000000000..fa83d3477 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/2.concepts/1.views.md @@ -0,0 +1,216 @@ +--- +title: Vues +description: La section des vues décrit tout ce que nous devons savoir pour configurer votre data et de potentielles vues pour une route spécifique dans votre application Nuxt.js. Les vues se composent du template d'une app, son layout et la page actuelle. +position: 1 +category: concepts +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/01_views?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Quel est l'ordre de la composition d'une vue Nuxt (du haut vers le bas)? + answers: + - Layout → Page → Document + - Page → Layout → Document + - Document → Layout → Page + correctAnswer: Document → Layout → Page + - question: Comment s'appelle le layout par défaut? + answers: + - default.vue + - layout.vue + - defaultLayout.vue + correctAnswer: default.vue + - question: Comment créer un layout custom? + answers: + - ajouter un fichier .vue dans le répertoire pages + - ajouter un fichier .vue dans le répertoire layouts + - ajouter un fichier .vue dans le répertoire components + correctAnswer: ajouter un fichier .vue dans le répertoire layouts + - question: Commment activons-nous le layout custom nommé 'blog' sur votre page? + answers: + - "layout: 'blog'" + - "layout: 'default'" + - "blog: 'blog'" + correctAnswer: "layout: 'blog'" + - question: Où doit se situer le fichier error.vue qui crée une page d'erreur personnalisée? + answers: + - dans le répertoire pages + - dans le répertoire errors + - dans le répertoire layouts + correctAnswer: dans le répertoire layouts +--- + +La section des vues décrit tout ce que nous avons besoin de savoir pour configurer la data et les vues pour une route spécifique dans notre application Nuxt.js. Les vues se composent d'un template, d'un layout et de la page actuelle. En plus de cela, nous pouvons définir des méta tags personnalisés pour la section `head` de chaque page. Ces derniers sont important pour le SEO (référencement naturel). + +![Composition of a View in Nuxt.js](/docs/2.x/views.png) + +Composition d'une vue dans Nuxt.js + +## Pages + +Chaque composant Page est un composant Vue mais Nuxt.js ajoute un attribut spécial et des fonctions pour rendre le développement de notre application aussi facile que possible. + +```html{}[pages/index.vue] +<template> + <h1 class="red">Hello World</h1> +</template> + +<script> + export default { + head() { + // Configurer les méta tags pour cette page + } + // ... + } +</script> + +<style> + .red { + color: red; + } +</style> +``` + +## Propriétés du composant page + +Il y a beaucoup de propriétés possibles sur un composant Page comme le `head` dans l'exemple juste au dessus. + +<base-alert type="next"> + +Se référer à [la documentation sur la structure des répertoires](/docs/2.x/directory-structure/nuxt) pour en apprendre davantage sur les propriétés que nous pouvons utiliser sur notre page. + +</base-alert> + +## Layouts + +Les layouts sont un moyen efficace quand nous voulons changer l'apparence et le feeling de notre app Nuxt.js. Pour par exemple, inclure une sidebar ou avoir des layouts bien distincts entre une vue mobile et bureau. + +### Layout par défaut + +Nous pouvons définir un layout par défaut en ajoutant un fichier `default.vue` dans le répertoire des `layouts`. Ceci sera utilisé pour toutes les pages qui n'ont pas de layout déjà spécifié. La seule chose qu'il sera nécessaire d'inclure dans le layout est le composant `<Nuxt />` qui s'occupera de render le composant page. + +```html{}[layouts/default.vue] +<template> + <Nuxt /> +</template> +``` + +<base-alert type="next"> + +Se référer au [composant Nuxt](/docs/2.x/features/nuxt-components) dans le chapitre des composants. + +</base-alert> + +### Layout personnalisé + +Nous pouvons créer des layouts personnalisés en ajoutant un fichier `.vue` dans le répertoire des `layouts`. Pour utiliser ce layout personnalisé, nous aurons besoin de specifier la propriété `layout` dans le composant page dans lequel nous voulons utiliser ce layout. La value sera le nom du layout personnalisé que nous aurons créé. + +Pour créer un layout de blog, ajoutez un fichier `blog.vue` au répertoire `layouts`: + +```html{}[layouts/blog.vue] +<template> + <div> + <div>La barre de navigation de mon blog</div> + <Nuxt /> + </div> +</template> +``` + +<base-alert> + +Il faut faire bien attention à ajouter le composant `<Nuxt />` lorsque nous créons le composant pour y inclure le contenu de la page. + +</base-alert> + +Par la suite, il suffit d'attribuer la valeur `blog` à la propriété `layout` dans la page où nous souhaitons que le layout soit utilisé. + +```html{}[pages/posts.vue] +<template> + <!-- notre template --> +</template> +<script> + export default { + layout: 'blog' + // ici se trouvent les définitions du composant page + } +</script> +``` + +<base-alert type="info"> + +Si on ne spécifie par la propriété `layout` sur notre page (ex: `layout: 'blog'`) alors le layout `default.vue` sera utilisé. + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +### Page d'erreur + +La page d'erreur est le _composant page_ qui sera toujours affiché lors d'une erreur (ce n'est pas le cas lors d'une utilisation en mode server-side rendering). + +<base-alert> + +Même si ce fichier sera placé dans le répertoire `layouts`, il devra être considéré comme une page. + +</base-alert> + +Comme dit ci-dessus, ce layout est spécial car il ne devra pas contenir de composant `<Nuxt />` dans son `template`. Ce layout devra être vu comme un composant affiché lorsque des erreurs surviennent (`404`, `500`, etc.). Comme pour les autres composants page, Nous pouvons appliquer un layout personnalisé pour la page erreur. + +Nous pouvons personnaliser la page erreur en ajoutant un fichier `layouts/error.vue`: + +```html{}[layouts/error.vue] +<template> + <div> + <h1 v-if="error.statusCode === 404">Page non trouvée</h1> + <h1 v-else>Une erreur est survenue</h1> + <NuxtLink to="/">Page d'accueil</NuxtLink> + </div> +</template> + +<script> + export default { + props: ['error'], + layout: 'error' // nous pouvons definir un layout personnalisé pour la page erreur + } +</script> +``` + +## Document: App.html + +Le template `app` est utilisé pour créer le cadre HTML pour le document de notre application Nuxt.js, ce dernier s'occupera d'injecter le contenu ainsi que les variables pour le `head` ainsi que le `body`. Ce fichier est automatiquement créé pour nous et a rarement besoin d'être modifié. Nous pouvons customiser le template HTML `app` utilisé par Nuxt.js pour inclure des scripts ou des classes CSS conditionnelles en créant un fichier `app.html` dans le répertoire source de notre projet, qui par défaut, n'est autre que la racine de votre projet. + +Le template par défaut utilisé par Nuxt.js est: + +```html{}[app.html] +<!DOCTYPE html> +<html {{ HTML_ATTRS }}> + <head {{ HEAD_ATTRS }}> + {{ HEAD }} + </head> + <body {{ BODY_ATTRS }}> + {{ APP }} + </body> +</html> +``` + +Un cas d'usage de personnalisation du template app serait d'ajouter des classes CSS conditionnelles pour IE: + +```html{}[app.html] +<!DOCTYPE html> +<!--[if IE 9]><html class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]--> +<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]--> + <head {{ HEAD_ATTRS }}> + {{ HEAD }} + </head> + <body {{ BODY_ATTRS }}> + {{ APP }} + </body> +</html> +``` + +<base-alert type="info"> + +Même si nous pouvons ajouter du JavaScript et des fichiers CSS dans `app.html`, il est plutôt recommandé d'utiliser `nuxt.config.js` pour cet usage ! + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/2.concepts/2.context-helpers.md b/nuxtjs.org/content/fr/0.docs/2.concepts/2.context-helpers.md new file mode 100644 index 000000000..5ead1ca27 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/2.concepts/2.context-helpers.md @@ -0,0 +1,263 @@ +--- +title: Helpers et Contexte +description: Le contexte fournit des informations *additionnelles* et souvent optionnelles de la requête envoyée à l'application. +position: 2 +category: concepts +csb_link_context: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-context?fontsize=14&hidenavigation=1&theme=dark +csb_link_helpers: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-helpers?fontsize=14&hidenavigation=1&theme=dark +img: /docs/2.x/context.svg +imgAlt: nuxt-js-context-keys +questions: + - question: Pour quelle raison le contexte existe-il ? + answers: + - Le rendu côté serveur (SSR) + - Pour avoir un state global + - Par paresse + correctAnswer: Le rendu côté serveur (SSR) + - question: Quelle propriété n'est pas dans le contexte ? + answers: + - env + - isDev + - $store + correctAnswer: $store + - question: Quelle propriété du contexte est uniquement disponible du côté *serveur* ? + answers: + - from + - app + - req + correctAnswer: req + - question: Quelle propriété du contexte est uniquement disponible du côté *client* ? + answers: + - from + - res + - app + correctAnswer: from + - question: Que ne peut *pas* faire le helper `$nuxt` ? + answers: + - Afficher la version de Nuxt + - Donner des informations sur le status de la connexion internet des utilisateurs + - Accéder à des modules exposés de fonctions + correctAnswer: Afficher la version de Nuxt + - question: Quels sont les noms des helpers de process + answers: + - global, client and server + - server, client and static + - ssr, spa and static + correctAnswer: server, client and static +--- + +<app-modal :src="img" :alt="imgAlt"></app-modal> + +L'object `context` est disponible dans des fonctions spécifiques de Nuxt comme [asyncData](/docs/2.x/features/data-fetching#async-data), [plugins](/docs/2.x/directory-structure/plugins), [middleware](/docs/2.x/directory-structure/middleware) et [nuxtServerInit](/docs/2.x/directory-structure/store#the-nuxtserverinit-action). Le contexte fournit des informations _additionnelles_ et souvent optionnelles de la requête envoyée à l'application. + +Tout d'abord, le contexte est utilisé pour permettre un accès aux autres parties d'une application Nuxt.js, comme par exemple un store Vuex ou l'instance `connect` sous-jacente. Ainsi, nous avons les objets `req` et `res` disponibles dans le contexte du côté serveur et le `store` de toujours disponible. Avec le temps, le contexte fût étendu avec plein d'autres variables bien pratiques et de raccourcis. Ainsi, nous avons accès au fonctionnalités du HMR en mode `development`, la `route` actuelle, les `params` de la page, la `query` (URL), ainsi que la possibilité d'avoir accès à des variables d'environment à travers le contexte. En plus de cela, les modules de fonctions et les helpers peuvent être exposés à travers le contexte pour être disponibles sur les deux - côté client et serveur. + +**Toutes les propriétés du contexte qui sont présents par défaut** + +```js +function (context) { + // toujours disponibles + const { + app, + store, + route, + params, + query, + env, + isDev, + isHMR, + redirect, + error, + $config + } = context + + // disponible uniquement côté serveur + if (process.server) { + const { req, res, beforeNuxtRender } = context + } + + // disponible uniquement côté client + if (process.client) { + const { from, nuxtState } = context + } +} +``` + +<base-alert> + +Le _context_ dont nous parlons ici ne doit pas être confondu avec l'objet `context` disponible dans les [Actions Vuex](https://vuex.vuejs.org/guide/actions.html) ou celui disponible dans la fonction `build.extend` dans notre `nuxt.config.js`. Ils n'ont absolument aucun rapport entre eux ! + +</base-alert> + +Découvrez davantage de propriétés disponibles dans le contexte dans le [Glossaire des propriétés internes](/docs/2.x/internals-glossary/context) + +## Exemples + +### Utiliser les paramètres de la page pour notre requête API + +Le contexte expose directement tous les paramètres dynamiques possibles de la route via `context.params`. Dans l'exemple suivant, on appelle une API grâce au module `nuxt/http` en utilisant un paramètre dynamique de la page dans l'URL. Les modules tels que [nuxt/http](https://http.nuxtjs.org/) peuvent exposer leurs propres fonctions qui peuvent par la suite être disponibles à travers l'objet `context.app`. + +Nous allons de plus, entourer le call API d'une instruction `try/catch` pour gérer le cas d'erreurs potentielles. Avec la fonction `context.error`, nous pouvons directement afficher la page d'erreur de Nuxt et lui passer l'erreur survenue. + +```js{}[pages/posts/_id.vue] +export default { + async asyncData(context) { + const id = context.params.id + try { + // ici, on utilise le module nuxtjs/http disponible via context.app + const post = await context.app.$http.$get( + `https://api.nuxtjs.dev/posts/${id}` + ) + return { post } + } catch (error) { + context.error(error) // affiche la page d'erreur de nuxt avec l'erreur correspondante + } + } +} +``` + +Grâce à l'[ES6](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/), on peut utiliser la syntaxe pour déstructurer l'objet `context`. On peut passer les objets auxquels nous voulons avoir accès et ensuite les utiliser dans notre code sans même utiliser le mot `context`. + +```js{}[pages/posts/_id.vue] +export default { + async asyncData({ params, $http, error }) { + const id = params.id + + try { + // ici on utilise le module nuxtjs/http depuis le contexte + const post = await $http.$get(`https://api.nuxtjs.dev/posts/${id}`) + return { post } + } catch (error) { + error(error) // affiche la page d'erreur de nuxt avec l'erreur correspondante + } + } +} +``` + +On préfère plutôt utiliser les paramètres de requête ? Nous pouvons alors utiliser `context.query.id` + +### Rediriger les utilisateurs et accéder au store + +Accéder au store Vuex (quand nous l'avons configuré dans le répertoire `store`) est aussi possible via le contexte. Cela fournit un objet `store` qui est équivalent à `this.$store` dans les composants Vue. De plus, on peut utiliser la méthode `redirect`, un helper disponible via le contexte, pour rediriger l'utilisateur dans le cas où le state `authenticated` est falsy. + +```js +export default { + middleware({ store, redirect }) { + // on déstructure les objets avec leurs propriétés + const isAuthenticated = store.state.authenticated + if (!isAuthenticated) { + return redirect('/login') + } + } +} +``` + +<app-modal> + <code-sandbox :src="csb_link_context"></code-sandbox> +</app-modal> + +## Les helpers + +En plus des raccourcis dans le contexte, il y a aussi de petits helpers présents dans notre application Nuxt.js. + +## `$nuxt`: Le helper Nuxt.js + +Le helper `$nuxt` est prévu pour améliorer l'expérience utilisateur et peut être une trappe de secours dans certains cas. Il est accessible via `this.$nuxt` dans les composants Vue et via `window.$nuxt` du côté client. + +### Vérification de la connexion + +Le helper `$nuxt` fournit un moyen rapide pour voir si l'utilisateur a de la connexion ou pas: nous avons accès aux booléens `isOffline` et `isOnline`. On peut utiliser ceux-ci pour montrer un message dès que l'utilisateur est hors ligne (par exemple). + +```html{}[layouts/default.vue] +<template> + <div> + <div v-if="$nuxt.isOffline">Vous êtes hors-ligne</div> + <Nuxt /> + </div> +</template> +``` + +### Accéder à l'instance racine + +Au delà de l'aspect DX/UX, le helper `$nuxt` fournit aussi un raccourci à l'instance racine de notre application à partir de n'importe quel composant. Mais ce n'est pas tout - nous pouvons aussi avoir accès au helper `$nuxt` via `window.$nuxt`, ce qui peut être pratique comme solution de secours pour avoir accès à des méthodes de module comme `$axios` depuis l'extérieur de nos composants Vue. Nous pouvons utiliser cela judicieusement et seulement en **dernier recours**. + +### Actualiser la data de la page + +Quand nous voulons actualiser la page actuelle pour l'utilisateur, nous ne voulons pas recharger la page intégralement et entraîner une nouvelle requête au serveur ainsi qu'une nouvelle initialisation de l'intégralité de notre application Nuxt.js. À la place, on préférera souvent juste actualiser la data, que l'on peut récupérer avec `asyncData` ou `fetch`. + +Nous pouvons faire cela en utilisant `this.$nuxt.refresh()` ! + +```html +<template> + <div> + <div>{{ content }}</div> + <button @click="refresh">Actualiser</button> + </div> +</template> + +<script> + export default { + asyncData() { + return { content: 'Créé le: ' + new Date() } + }, + methods: { + refresh() { + this.$nuxt.refresh() + } + } + } +</script> +``` + +### Contrôler la barre de progression + +Avec `$nuxt`, nous pouvons aussi contrôler la barre de progression de manière programmatique via `this.$nuxt.$loading`. + +```js +export default { + mounted() { + this.$nextTick(() => { + this.$nuxt.$loading.start() + setTimeout(() => this.$nuxt.$loading.finish(), 500) + }) + } +} +``` + +Plus d'informations sont disponibles dans le [chapitre sur le loader](../features/loading) + +## Le helper onNuxtReady + +Si nous voulons exécuter certains scripts _après_ que notre application Nuxt.js soit chargée et prête, nous pouvons utiliser la fonction `window.onNuxtReady`. Cela peut être utile si nous souhaitons exécuter une fonction côté client sans augmenter le temps à l'interactivité ([TTI](https://web.dev/tti/)). + +```js +window.onNuxtReady(() => { + console.log('Nuxt.js est monté et prêt') +}) +``` + +## Les helpers de Process + +Nuxt.js injecte trois valeurs booléennes dans l'objet global `process`, ce dernier va permettre de déterminer si l'app a été render côté serveur ou intégralement côté client, ainsi que vérifier la génération du site en version statique. Ces helpers sont disponibles à travers notre application et sont communément utilisés dans un bloc `asyncData`. + +```html{}[pages/about.vue] +<template> + <h1>Je suis render côté {{ renderedOn }}</h1> +</template> + +<script> + export default { + asyncData() { + return { renderedOn: process.client ? 'client' : 'serveur' } + } + } +</script> +``` + +Dans l'exemple, `renderedOn` aura la valeur `'serveur'` dans le cas d'un render côté serveur quand un utilisateur arrivera sur la page directement. Quand l'utilisateur voudra naviguer jusqu'à la page à partir d'un autre endroit de l'application, par exemple en cliquant sur un `<NuxtLink>`, la valeur sera à `client`. + +<app-modal> + <code-sandbox :src="csb_link_helpers"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/2.concepts/3.server-side-rendering.md b/nuxtjs.org/content/fr/0.docs/2.concepts/3.server-side-rendering.md new file mode 100644 index 000000000..f747f8913 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/2.concepts/3.server-side-rendering.md @@ -0,0 +1,104 @@ +--- +title: Rendu côté serveur +description: Le rendu côté serveur (SSR), est la capacité qu'une application a à générer une page web sur le serveur au lieu de la générer dans le navigateur. +position: 3 +category: concepts +questions: + - question: De quel type de serveur avons-nous besoin pour faire du rendu côté serveur ? + answers: + - un serveur PHP + - un serveur JavaScript + - un serveur Node.js + correctAnswer: un serveur Node.js + - question: Qu'utilisons-nous pour contrôler et étendre les possibilités du serveur ? + answers: + - Middleware + - ServerMiddleware + - Il n'est pas possible de contrôler le serveur + correctAnswer: ServerMiddleware + - question: Pouvons-nous héberger une application avec un rendu côté serveur sur une plateforme d'hébergement serverless ? + answers: + - vrai + - faux + correctAnswer: faux + - question: Avons-nous accès au document côté serveur ? + answers: + - Oui, il est toujours disponible + - Non, l'objet appartient au navigateur et il n'est pas disponible sur le serveur + correctAnswer: Non, l'objet appartient au navigateur et il n'est pas disponible sur le serveur + - question: Quand notre page devient interactive ? + answers: + - Quand le navigateur reçoit la page HTML générée depuis le serveur + - Quand l'hydratation de Vue.js est effective + - Quand le navigateur envoie la requête initiale + correctAnswer: Quand l'hydratation de Vue.js est effective + - question: La navigation entre les pages utilisant <NuxtLink> est faite + answers: + - Côté client + - Côté serveur + correctAnswer: Côté client + - question: Quelles sont les étapes correctes ? + answers: + - navigateur → serveur, serveur → navigateur, navigateur → navigateur + - serveur → navigateur, navigateur → serveur, serveur → serveur + - navigateur → serveur, serveur → navigateur, navigateur → serveur + correctAnswer: navigateur → serveur, serveur → navigateur, navigateur → navigateur +--- + +Le rendu côté serveur (SSR), est la capacité qu'une application a à générer une page web sur le serveur au lieu de la générer dans le navigateur. Le rendu côté serveur renvoie une page complète au client; le JavaScript côté client prend ensuite le relais et permet à Vue.js d'[hydrater](https://ssr.vuejs.org/guide/hydration.html) notre application. + +## Serveur Node.js requis + +Un environnement JavaScript est requis pour render notre page web. + +Un serveur Node.js a besoin d'être configuré pour exécuter notre application Vue.js. + +## Contrôler et étendre les possibilités de notre serveur + +Nous pouvons étendre les possibilités de notre serveur avec `serverMiddleware` et contrôler les routes avec `middleware`. + +```js{}[server-middleware/logger.js] +export default function (req, res, next) { + console.log(req.url) + next() +} +``` + +```js{}[nuxt.config.js] +export default { + serverMiddleware: ['~/server-middleware/logger'] +} +``` + +<!--todo did not get what is written below, so I rather comment it out +en: If your server middleware consists of a list of functions mapped to paths: +fr: Si notre middleware de serveur est constitué d'une liste de fonctions correspondant à des chemins: --> + +## Différence entre serveur et navigateur + +Comme nous sommes dans un environnement Node.js nous avons accès aux objets Node.js tels que `req` et `res`. Nous n'avons pas accès aux objets `window` ou `document` vu qu'ils appartiennent au navigateur. Nous pouvons cependant utiliser `window` ou `document` en les utilisant dans les hooks `beforeMount` ou `mounted`. + +```js +beforeMount{ + window.alert('hello'); +} +mounted{ + window.alert('hello'); +} +``` + +## Les étapes pour faire du rendu côté serveur avec Nuxt.js + +### Étape 1: Du navigateur au serveur + +Quand le navigateur envoie la requête initiale, cela va atterir sur le serveur Node.js. Nuxt.js va alors générer le HTML et le renvoyer au navigateur en prenant en compte le résultat des functions telles que `asyncData`, `nuxtServerInit` or `fetch`. Les fonctions présentes dans les hooks seront aussi exécutées. + +### Étape 2: Du serveur au navigateur + +Le navigateur reçoit la page avec le HTML généré depuis le serveur. Le contenu est affiché et l'hydratation de Vue.js entre en scène, rendant le tout réactif. Après ce processus, la page est intéractive. + +### Étape 3: Du navigateur au navigateur + +Naviguer entre les pages à l'aide de [`<NuxtLink>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component) est fait du côté client afin que nous n'ayons pas besoin de faire une requête au serveur, sauf si nous faisons un rafraîchissement manuel de notre navigateur. + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/2.concepts/4.static-site-generation.md b/nuxtjs.org/content/fr/0.docs/2.concepts/4.static-site-generation.md new file mode 100644 index 000000000..275df48ad --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/2.concepts/4.static-site-generation.md @@ -0,0 +1,73 @@ +--- +title: Génération de site statique +description: Avec la génération statique nous pouvons générer notre application durant la phase de build et déployer notre site sur n'importe quel hébergeur tel que Netlify, Github pages, Vercel etc... +position: 4 +category: concepts +questions: + - question: Nous avons besoin d'un serveur pour héberger notre site statique + answers: + - vrai + - faux + correctAnswer: faux + - question: Quelle commande utilisons-nous pour générer notre site statique ? + answers: + - nuxt build + - nuxt prerender + - nuxt generate + correctAnswer: nuxt generate + - question: Quand appelons-nous notre API ? + answers: + - À chaque fois que nous naviguons sur une page avec du contenu qui provient de notre API + - Quand nous générons notre site + - Quand nous générons notre site et à chaque fois que nous naviguons sur une page avec du contenu qui provient de notre API + correctAnswer: Quand nous générons notre site + - question: Quelles pages vont se rabattre sur le mode de Single Page App ? + answers: + - La page d'erreur + - Celles qui sont exclues de la génération avec generate.excludes + - Toutes les pages de la navigation + correctAnswer: Celles qui sont exclues de la génération avec generate.excludes + - question: Comment mettons-nous à jour le contenu de notre site ? + answers: + - Il se met à jour automatiquement + - Nous avons besoin de régénérer notre site + correctAnswer: Nous avons besoin de régénérer notre site +--- + +Avec la génération statique nous pouvons générer notre application durant la phase de build et déployer notre site sur n'importe quel hébergeur tel que Netlify, Github pages, Vercel etc... Ce qui veut dire qu'il n'y a pas besoin de serveur pour pouvoir déployer notre application. + +### Générer notre site + +Lorsque nous déployons notre site avec [target:static](/docs/2.x/features/deployment-targets#static-hosting), toutes nos pages `.vue` seront générées dans des fichiers HTML et JavaScript. Tous les calls aux API seront faits et mis en cache dans un répertoire nommé `static` à l'intérieur de notre contenu généré pour le côté client, ainsi il n'y aura pas besoin de faire d'appels à notre API par la suite. + +### Étape 1: Du navigateur au CDN + +Lorsqu'un navigateur enverra la requête initiale, il va accéder au CDN. + +### Étape 2: du CDN au navigateur + +Le CDN va envoyer le HTML préalablement généré, ainsi que le JavaScript et toutes les ressources statiques au navigateur. Le contenu sera affiché et l'hydratation de Vue.js commencera à faire effet afin de rendre le tout réactif. À la suite de ce processus, la page sera interactive. + +### Étape 3: du navigateur au navigateur + +Naviguer entre les pages à l'aide de [`<NuxtLink>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component) est fait du côté client afin que nous n'ayons pas besoin de refaire une requête au CDN et les appels à l'API seront chargés à partir du répertoire des ressources mis en cache et ce même si nous rafraîchissez manuellement notre page. + +### Solution de secours: la SPA + +Les pages qui auront été exclues de la génération en utilisant la propriété `generate.exclude` se rabattront sur la version SPA de notre application. Ces pages n'existeront donc pas sur le CDN et seront régénérées sur le client (dans le navigateur) à chaque fois qu'un utilisateur naviguera sur ces pages. + +<base-alert type="next"> + +Pour en savoir davantage sur la [propriété `generate`](/docs/2.x/configuration-glossary/configuration-generate#exclude) + +</base-alert> + +### Mettre à jour notre contenu + +Afin de récupérer le nouveau contenu sur notre site à partir de l'API, nous aurons besoin de régénérer le site à nouveau. Avec la plupart des services d'hébergement, nous pouvons parvenir à cela en poussant nos modifications sur la branche `master` avec git ou via une pull request. + +### Mode de prévisualisation + +Le mode de prévisualisation va appeler notre API ou notre CMS afin que nous puissions voir les changements en live avant de déployer. Se référer au [mode de prévisualisation](/docs/2.x/features/live-preview) pour activer cette fonctionnalité. + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/2.concepts/5.nuxt-lifecycle.md b/nuxtjs.org/content/fr/0.docs/2.concepts/5.nuxt-lifecycle.md new file mode 100644 index 000000000..4e564c528 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/2.concepts/5.nuxt-lifecycle.md @@ -0,0 +1,166 @@ +--- +title: Cycle de vie de Nuxt +description: Peu importe l'outil que nous utilisons, nous serons davantage en confiance lorsque nous serons capable de comprendre comment il marche dans les détails. Il en est de même pour Nuxt.js. +position: 5 +category: concepts +img: /docs/2.x/nuxt-lifecycle.svg +imgAlt: understanding-nuxt-2-12-lifecycle-hooks +questions: + - question: Quand commence le cycle de Nuxt.js ? + answers: + - Lorsque la réponse va être envoyée au client + - Après la phase de build + - Lors de l'exécution de nuxt dev + correctAnswer: Après la phase de build + - question: De quels facteurs principaux dépend le contenu du cycle de vie de Nuxt ? + answers: + - L'heure et la date à laquelle nous avons lancé le serveur + - Si le rendu côté serveur est activé et si oui, quel est le type utilisé. + - Sur quel type d'OS est-ce que l'application est en train de s'exécuter. + correctAnswer: Si le rendu côté serveur est activé et si oui, quel est le type utilisé. + - question: Quand est appelé nuxtServerInit ? + answers: + - Au rendu côté serveur et client + - Lorsque l'hydratation par Vue.js s'est achevée + - Uniquement du côté serveur + correctAnswer: Uniquement du côté serveur + - question: Quels sont les trois types de middleware ? + answers: + - Global, Layout, Route + - Global, Layout, Page + - Global, Group, Route + correctAnswer: Global, Layout, Route + - question: Quelle étape ne peut avoir lieu que du côté client ? + answers: + - Hydratation de Vue.js + - Exécution du middleware + - Appeler la fonction fetch + correctAnswer: Hydratation de Vue.js + - question: Quelle étape n'a jamais lieu du côté client ? + answers: + - Exécuter asyncData + - Exécuter serverMiddleware + - Exécuter fetch + correctAnswer: Exécuter serverMiddleware + - question: Quelles méthodes de Vue sont appelées sur le serveur et sur le client ? + answers: + - mounted et beforeMount + - beforeDestroy et destroyed + - created et beforeCreate + correctAnswer: created et beforeCreate + - question: Quelle étape n'a pas lieu après avoir navigué avec un <NuxtLink> ? + answers: + - Appeler fetch + - Exécuter des plugins clients de Nuxt.js + - Appeler beforeCreate + correctAnswer: Exécuter des plugins clients de Nuxt.js + - question: Quelle est la différence entre asyncData et fetch après avoir navigué via un <NuxtLink> ? + answers: + - asyncData est plus rapide que fetch + - asyncData est appelé après fetch + - asyncData est bloquant alors que fetch ne l'est pas + correctAnswer: asyncData est bloquant alors que fetch ne l'est pas +--- + +<app-modal :src="img" :alt="imgAlt"></app-modal> + +Peu importe l'outil que nous utilisons, nous serons davantage en confiance lorsque nous serons capable de comprendre comment il marche dans les détails. Il en est de même pour Nuxt.js. Le but de ce chapitre est de nous donner une vue d'ensemble des différentes parties du framework, leur ordre d'exécution ainsi que la façon dont ils intéragissent entre eux. + +Le cycle de vie de Nuxt.js décrit les différentes étapes qui ont lieu après la phase de build, une fois que notre application a été bundlée, chunkée et minifiée. Ce qu'il se passe après cette phase dépend de si nous avons activé le rendu côté serveur ou pas. Si c'est le cas, il faut ensuite regarder le type de rendu serveur que nous avons choisi: + +Rendu dynamique côté serveur (SSR) (`nuxt start`) + +ou Génération statique de site (SSG) (`nuxt generate`). + +## Cycle de vie + +### Serveur + +Pour le SSR, les étapes suivantes seront exécutées pour chaque requête sur notre app + +- Le serveur démarre (`nuxt start`) + +Lorsque nous utilisons la génération statique de notre site, les étapes qui ont lieu sur le serveur ne seront exécutées que lors de la phase de build et une fois pour chaque page générée. + +- Le processus de génération commence (`nuxt generate`) + +- Hooks Nuxt +- serverMiddleware +- Les plugins de Nuxt côté serveur + - en suivant l'ordre défini dans nuxt.config.js +- nuxtServerInit + - action Vuex qui est appelée seulement côté serveur pour pré-remplir le store + - le premier argument dans le **context de Vuex**, le second argument dans le **context de Nuxt.js** + - on dispatch les autres actions d'ici → c'est seulement le "point d'entrée" pour des actions ultérieures du côté serveur + - peut seulement être défini dans le `store/index.js` +- Middleware + - Global middleware + - Layout middleware + - Route middleware +- asyncData +- beforeCreate (cycle de vie de Vue) +- created (cycle de vie de Vue) +- Le nouveau fetch (du haut vers le bas, en parallèle si ce sont des voisins) +- Sérialisation du state (hook `render:routeContext` de Nuxt.js) + +- le rendu HTML commence (hook `render:route` de Nuxt.js) + +- `render:routeDone` hook quand le HTML a été envoyé au navigateur + +- `generate:before` hook de Nuxt.js +- les fichiers HTML sont générés + - **génération intégralement statique** + - ex. les payloads statiques sont extraits + - `generate:page` (HTML éditable) + - `generate:routeCreated` (Route générée) +- `generate:done` quand tous les fichiers HTML ont été générés + +### Client + +Cette partie du cycle est entièrement exécutée dans le navigateur, peu importe le mode que nous avons choisi pour Nuxt.js. + +- Reçoit le HTML +- Charge les ressources (ex. Javascript) +- Hydratation de Vue +- Middleware + - Global middleware + - Layout middleware + - Route middleware +- asyncData (bloquant) +- plugins clients de Nuxt.js + - en suivant l'ordre défini dans nuxt.config.js +- beforeCreate (méthode du cycle de vie de Vue) +- created (méthode du cycle de vie de Vue) +- Le nouveau fetch (du haut vers le bas, en parallèle si ce sont des voisins) +- beforeMount (méthode du cycle de vie de Vue) +- mounted (méthode du cycle de vie de Vue) + +### Naviguer en utilisant le composant NuxtLink + +De la même façon que pour la partie _client_, tout se passe dans le navigateur mais seulement lors d'une navigation avec `<NuxtLink>`. De plus, aucun contenu n'est affiché sur la page tant qu'il reste des tâches _bloquantes_. + +<base-alert type="info"> + +Se référer au chapitre sur les composants pour plus d'informations sur [`<NuxtLink>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component). + +</base-alert> + +- middleware (bloquant) + - Global middleware + - Layout middleware + - Route middleware +- asyncData (bloquant) +- asyncData (bloquant) [ou chargement entièrement statique du payload] +- beforeCreate & created (méthode du cycle de vie de Vue) +- fetch (non-bloquant) +- beforeMount & mounted + +### Ensuite ? + +<base-alert type="next"> + +Plus d'informations dans le [recueil sur les features](/docs/2.x/features/rendering-modes). + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/2.concepts/index.md b/nuxtjs.org/content/fr/0.docs/2.concepts/index.md new file mode 100644 index 000000000..1cca58593 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/2.concepts/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/concepts/views +--- diff --git a/nuxtjs.org/content/fr/0.docs/3.features/1.rendering-modes.md b/nuxtjs.org/content/fr/0.docs/3.features/1.rendering-modes.md new file mode 100644 index 000000000..64b82704d --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/1.rendering-modes.md @@ -0,0 +1,42 @@ +--- +title: Les modes de rendu +description: Les modes de rendu +position: 1 +category: features +--- + +## Rendu côté serveur et sites statiques + +**Les sites de rendus côté serveur** sont rendus sur le serveur chaque fois que l'utilisateur demande une page, par conséquent un serveur est nécessaire pour pouvoir servir la page à chaque demande. + +**Les sites statiques** sont très similaires aux applications rendues côté serveur, la principale différence étant que les sites statiques sont rendus au moment de la construction, aucun serveur n'est donc nécessaire. La navigation d'une page à l'autre se fait alors côté client. + +Voir les [cibles de déploiements](/docs/2.x/features/deployment-targets) pour plus d'informations sur l'hébergement statique et serveur. + +```js{}[nuxt.config.js] +export default { + ssr: true // default value +} +``` + +<base-alert type="info"> + +Vous n'avez pas besoin d'ajouter `ssr: true` à votre configuration nuxt pour activer le rendu côté serveur vu qu'il est activé par défaut. + +</base-alert> + +## Rendu côté client uniquement + +Avec le rendu côté client uniquement, il n'y a pas de rendu côté serveur. Le rendu côté client signifie le rendu du contenu dans le navigateur à l'aide de JavaScript. Au lieu d'obtenir tout le contenu du HTML, nous obtenons simplement un document HTML de base avec un fichier JavaScript qui rendra ensuite le reste du site à l'aide du navigateur. Pour le rendu côté client, définissez ssr sur `false`. + +```js{}[nuxt.config.js] +export default { + ssr: false +} +``` + +<base-alert type="next"> + +[La propriété ssr](/docs/2.x/configuration-glossary/configuration-ssr) + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/10.live-preview.md b/nuxtjs.org/content/fr/0.docs/3.features/10.live-preview.md new file mode 100644 index 000000000..9b49399d5 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/10.live-preview.md @@ -0,0 +1,88 @@ +--- +title: Mode de prévisualisation +description: Prévisualisation en temps réel pour une génération statique avec le mode de prévisualisation +category: features +position: 12 +--- + +Avec Nuxt.js et une génération axée sur de l'intégralement statique, nous pouvons maintenant utiliser la prévisualisation en temps réel, sans configuration additionnelle. Cela nous permettra d'appeler notre API ou notre CMS afin que nous puissions voir les changements avant de déployer. + +<base-alert>Seulement disponible dans le cas d'un [target:static](/docs/2.x/features/deployment-targets#static-hosting)</base-alert> + +Le mode de prévisualisation va s'occuper de rafraîchir automatiquement la data de la page vu qu'il utilise `$nuxt.refresh` (et donc fait les appels de `nuxtServerInit`, `asyncData` et `fetch`) du côté client. + +Pour activer la prévisualisation en temps réel, il faudra ajouter le plugin suivant: + +```js{}[plugins/preview.client.js] +export default function ({ query, enablePreview }) { + if (query.preview) { + enablePreview() + } +} +``` + +<base-alert> +`EnablePreview` est seulement disponible dans l'objet contexte des plugins. Les prévisualisations sont gérées côté client et donc, le plugin doit s'exécuter sur le client: `preview.client.js` +</base-alert> + +```js{}[nuxt.config.js] +export default { + plugins: ['~/plugins/preview.client.js'] +} +``` + +Une fois que l'on a ajouté le plugin, on peut maintenant générer et servir notre site. + +<code-group> +<code-block label="npx" active> + +```bash +npx nuxt generate +npx nuxt start +``` + +</code-block> +<code-block label="Yarn" > + +```bash +yarn generate +yarn start +``` + + </code-block> +</code-group> + +Nous pouvons maintenant voir la page de prévisualisation en ajoutant une query param à la fin de la page qui nous intéresse: + +```js +?preview=true +``` + +<base-alert> +`enablePreview` doit être testé localement avec `yarn start` et non `yarn dev` +</base-alert> + +### Prévisualiser les pages qui ne sont pas encore générées + +Pour les pages qui ne sont pas encore générées, la solution de rechange de la SPA va continuer de s'occuper de faire un appel à l'API avant de montrer une page 404 vu que ces pages existent sur l'API mais ne sont pas encore générées. + +Si nous avons configuré un crochet de validation (webhook), on aura sans doute besoin de le modifier afin d'accommoder le fait qu'il ne redirige plus vers une 404 en mode de prévisualisation. + +```js +validate({ params, query }) { + if (query.preview) { + return true +} +``` + +### Passer la data à enablePreview + +On peut passer de la data à la fonction `enablePreview`. La data sera ainsi disponible sur le helper de contexte `$preview` et sur `this.$preview`. + +### Et ensuite ? + +<base-alert type="next"> + +Se référer au [document sur la structure des répertoires](/docs/2.x/directory-structure/nuxt). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/2.deployment-targets.md b/nuxtjs.org/content/fr/0.docs/3.features/2.deployment-targets.md new file mode 100644 index 000000000..0abd8a3c5 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/2.deployment-targets.md @@ -0,0 +1,70 @@ +--- +title: Cibles de déploiement +description: Cibles de déploiement +position: 2 +category: features +--- + +## Hébergement statique + +Avec de l'hébergement statique, nous n'avons pas besoin de serveur, nous pouvons choisir d'héberger une SPA ou une MPA (`multiple page application`), en somme: des sites statiques. Ce qui veut dire que nous pouvons envoyer le tout sur un hébergement serverless ou un CDN et ce, de manière gratuite. Pour de l'hébergement statique, la propriété `target` doit être mise sur `static` dans le fichier `nuxt.config`. + +```js{}[nuxt.config.js] +export default { + target: 'static' // la valeur par défaut est 'server' +} +``` + +### SPA + +Les Single Page Applications (SPA) sont des pages qui sont render seulement du côté client sans le besoin d'un serveur. Pour déployer une SPA, il faut mettre [le `mode` à `spa`](/docs/2.x/features/rendering-modes#spa) et ensuite utiliser la commande `build` pour générer notre application. + +```js{}[nuxt.config.js] +export default { + target: 'static' // la valeur par défaut est 'server' + mode: 'spa' +} +``` + +### Sites Statiques + +Comme Nuxt.js marche aussi en tant que générateur de sites statiques, nous pouvons générer notre application en tant que tel. Générer notre application Nuxt.js et bénéficier de tous les avantages d'une application universelle sans avoir besoin d'un serveur. La commande nuxt `generate` va s'occuper de générer l'HTML pour chacune de nos routes et mettre le tout dans le répertoire `dist`. + +Globalement, chaque fichier `.vue` qui sera placé à l'intérieur du répertoire `pages` sera généré en tant que page HTML statique. Cela va améliorer la performance, le SEO (référencement naturel) ainsi que permettre un meilleur support en mode hors-ligne. + +<base-alert type="info"> + +Les sites statiques fonctionnent avec le mode [universel](https://nuxtjs.org/guides/features/rendering-modes#universal) par défaut. + +</base-alert> + +**Utiliser la commande `nuxt dev` avec `static` comme cible de déploiement peut améliorer l'expérience développeur.** + +- Enlève `req` & `res` du `context` +- Solution de secours sur le rendu côté client dans le cas d'une 404, d'erreurs et de redirections [voir les solutions de secours d'une SPA](/docs/2.x/concepts/static-site-generation#spa-fallback) +- `$route.query` sera toujours égal à `{}` sur le render côté serveur +- `process.static` est vrai + +<base-alert type="info"> + +Nous mettons de plus `process.target` à disposition pour les auteurs de modules qui souhaiteraient ajouter un comportement particulier en fonction de l'utilisateur visé. + +</base-alert> + +## Hébergement avec serveur + +L'hébergement avec serveur requiert un serveur et a pour but d'être utilisé dans le cas d'applications SSR. Le rendu côté serveur aussi connu sous le nom de SSR, signifie que notre page est générée sur le serveur à chaque fois qu'un utilisateur en fait la requête. Quand l'utilisateur ouvre une de nos pages, son navigateur va envoyer une requête au serveur pour lui demander cette page. Une fois render sur le serveur, la page est renvoyée au navigateur avec tout le contenu. + +Pour de l'hébergement avec serveur, la propriété `target` doit être mise à `server` (valeur par défaut). On utilise la commande `build` pour générer l'application. + +```js{}[nuxt.config.js] +export default { + target: 'server' +} +``` + +<base-alert type="info"> + +Les SSR fonctionnent avec le mode [universel](https://nuxtjs.org/guides/features/rendering-modes#universal) par défaut. + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/3.file-system-routing.md b/nuxtjs.org/content/fr/0.docs/3.features/3.file-system-routing.md new file mode 100644 index 000000000..60a9dcd4a --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/3.file-system-routing.md @@ -0,0 +1,535 @@ +--- +title: Système de route par fichier +description: Nuxt.js s'occupe de générer automatiquement la configuration pour vue-router en fonction de l'arborescence des fichiers Vue à l'intérieur du répertoire des pages. Il suffit de créer un fichier .vue à l'intérieur du répertoire des pages pour que le routage soit fonctionnel, nul besoin de configuration. +position: 3 +category: features +questions: + - question: Quel est le nom du composant utilisé pour naviguer entre les pages ? + answers: + - '<a>' + - '<NuxtLink>' + - '<Nuxt>' + correctAnswer: '<NuxtLink>' + - question: Qu'est-ce qu'il faut pour générer automatiquement une configuration avec le routeur ? + answers: + - ajouter un fichier .vue dans le répertoire des pages + - créer un fichier de configuration router.config + - 'ajouter un <NuxtLink> à notre page' + correctAnswer: ajouter un fichier .vue dans le répertoire des pages + - question: Lequel ne va pas créer une route dynamique ? + answers: + - dynamic.vue + - _slug.vue + - _slug/index.vue + correctAnswer: dynamic.vue + - question: Les routes dynamiques sont ignorées par la commande nuxt generate. + answers: + - vrai + - faux + correctAnswer: faux + - question: Comment accède-t-on aux paramètres de la route dans une page dynamique telle que users/id.vue ? + answers: + - $route.params.id + - $route.id + - $route.params.users.id + correctAnswer: $route.params.id + - question: Comment se déclare le composant parent d'une route imbriquée ? + answers: + - en créant un fichier Vue appelé parent, à l'intérieur du répertoire qui contient les vues imbriquées + - en créant un fichier Vue avec un nom différent du répertoire qui contient les vues imbriquées + - en créant un fichier Vue du même nom que le répertoire qui contient les vues imbriquées + correctAnswer: en créant un fichier Vue du même nom que le répertoire qui contient les vues imbriquées + - question: Si nous ne connaissons pas la profondeur de la structure de notre URL, quel fichier pouvons-nous utiliser pour dynamiquement correspondre aux chemins imbriqués ? + answers: + - _.vue + - _index.vue + - _id.vue + correctAnswer: _.vue + - question: Quels composants pouvons-nous utiliser pour render des vues nommées ? + answers: + - '<Nuxt> and <Child>' + - '<Nuxt> and <NuxtChild>' + - '<NuxtChild> and <NuxtLink>' + correctAnswer: '<Nuxt> and <NuxtChild>' + - question: Quel fichier pouvons-nous créer afin d'avoir la scrollbar en haut de page pour chaque route ? + answers: + - app/router.scrollBehavior.js + - app/scrollBehavior.js + - app/router.js + correctAnswer: app/router.scrollBehavior.js + - question: Nous pouvons ajouter un slash traînant pour chaque route. + answers: + - vrai + - faux + correctAnswer: vrai +--- + +Nuxt.js s'occupe de générer automatiquement la configuration pour vue-router en fonction de l'arborescence des fichiers Vue à l'intérieur du répertoire des pages. Il suffit de créer un fichier .vue à l'intérieur du répertoire des pages pour que le routage soit fonctionnel, nul besoin de configuration. + +Parfois nous aurons besoin de créer une route dynamique ou une route imbriquée ou encore de configurer notre router de manière plus poussée. Ce chapitre a pour but de tout passer en revue afin de tirer le maximum de notre routeur. + +<base-alert type="info"> + +Nuxt.js nous offre du code splitting automatique pour nos routes, sans configuration supplémentaire. + +</base-alert> + +<base-alert type="info"> + +Utilisez le composant [NuxtLink](/docs/2.x/features/nuxt-components#the-nuxtlink-component) pour naviguer entre les pages. + +</base-alert> + +```html +<template> + <nuxt-link to="/">Page d'accueil</nuxt-link> +</template> +``` + +## Routes Basiques + +Cette structure de fichier: + +``` +pages/ +--| user/ +-----| index.vue +-----| one.vue +--| index.vue +``` + +va automatiquement générer ceci: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'user', + path: '/user', + component: 'pages/user/index.vue' + }, + { + name: 'user-one', + path: '/user/one', + component: 'pages/user/one.vue' + } + ] +} +``` + +## Routes Dynamiques + +Parfois il n'est pas possible de connaître le nom de la route. Un call vers une API pour récupérer une liste d'utilisateurs ou d'articles de blog par exemple. C'est ce que l'on appelle des routes dynamiques. Pour créer une route dynamique, il faut ajouter un underscore (`_`) avant le nom du fichier `.vue` ou devant le nom du répertoire. Nous pouvons nommer le fichier ou le répertoire de la façon dont nous voulons mais il doit être préfixé d'un underscore. + +Cette structure de fichiers: + +``` +pages/ +--| _slug/ +-----| comments.vue +-----| index.vue +--| users/ +-----| _id.vue +--| index.vue +``` + +va automatiquement générer ceci: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'users-id', + path: '/users/:id?', + component: 'pages/users/_id.vue' + }, + { + name: 'slug', + path: '/:slug', + component: 'pages/_slug/index.vue' + }, + { + name: 'slug-comments', + path: '/:slug/comments', + component: 'pages/_slug/comments.vue' + } + ] +} +``` + +<base-alert type="info"> + +Comme nous pouvons le voir, la route nommée `users-id` a la valeur `:id?` dans son chemin, ce qui en fait une valeur optionnelle. Si nous souhaitons rendre ce paramètre obligatoire, il faut créer un fichier `index.vue` dans le répertoire `users/_id`. + +</base-alert> + +<base-alert type="info"> + +Depuis Nuxt >= v2.13, un crawler va détecter nos liens et générer des routes dynamiques à partir de ceux-ci. Cependant, si nous avons des pages qui ne sont pas liées (comme une page secrète), nous aurons besoin de spécifier manuellement que nous souhaitons générer cette route dynamique. + +</base-alert> + +<base-alert type="next"> + +[Générer des routes dynamiques](/docs/2.x/concepts/static-site-generation) pour des sites statiques. + +</base-alert> + +### Accéder aux paramètres de la route localement + +Nous pouvons accéder aux paramètres de la route actuelle, depuis notre page locale ou notre composant en appelant `this.$route.params.{nomDuParamètre}`. Par exemple, si nous avons une page dynamique avec la liste de nos utilisateurs (`users\_id.vue`), nous pouvons accéder au paramètre `id` pour charger un utilisateur en particulier, pour cela nous pouvons utiliser: `this.$route.params.id`. + +## Routes Imbriquées + +Nuxt.js nous permet de créer des routes imbriquées grâce à `vue-router`. Pour définir le composant parent d'une route imbriquée, nous avons besoin de créer un fichier Vue du même nom que le répertoire qui va contenir les vues imbriquées. + +<base-alert> + +Il ne faut pas oublier d'inclure le composant [NuxtChild](/docs/2.x/features/nuxt-components#the-nuxtchild-component) à l'intérieur du composant parent (fichier `.vue`). + +</base-alert> + +Cette structure de fichiers: + +``` +pages/ +--| users/ +-----| _id.vue +-----| index.vue +--| users.vue +``` + +va automatiquement générer ceci: + +```js +router: { + routes: [ + { + path: '/users', + component: 'pages/users.vue', + children: [ + { + path: '', + component: 'pages/users/index.vue', + name: 'users' + }, + { + path: ':id', + component: 'pages/users/_id.vue', + name: 'users-id' + } + ] + } + ] +} +``` + +## Routes dynamiques imbriquées + +Ce n'est pas très commun mais il se peut que nous ayons envie d'avoir des enfants dynamiques dans des parents dynamiques, c'est possible avec Nuxt.js. + +Cette structure de fichiers: + +``` +pages/ +--| _category/ +-----| _subCategory/ +--------| _id.vue +--------| index.vue +-----| _subCategory.vue +-----| index.vue +--| _category.vue +--| index.vue +``` + +va automatiquement générer ceci: + +```js +router: { + routes: [ + { + path: '/', + component: 'pages/index.vue', + name: 'index' + }, + { + path: '/:category', + component: 'pages/_category.vue', + children: [ + { + path: '', + component: 'pages/_category/index.vue', + name: 'category' + }, + { + path: ':subCategory', + component: 'pages/_category/_subCategory.vue', + children: [ + { + path: '', + component: 'pages/_category/_subCategory/index.vue', + name: 'category-subCategory' + }, + { + path: ':id', + component: 'pages/_category/_subCategory/_id.vue', + name: 'category-subCategory-id' + } + ] + } + ] + } + ] +} +``` + +## Routes dynamiques imbriquées inconnues + +Si nous ne connaissons pas la profondeur d'une URL, nous pouvons utiliser `_.vue` pour dynamiquement faire correspondre les chemins imbriqués. Cela va matcher tant qu'il n'y a pas de _requête plus spécifique_. + +Cette structure de fichiers: + +``` +pages/ +--| people/ +-----| _id.vue +-----| index.vue +--| _.vue +--| index.vue +``` + +va automatiquement générer ceci: + +``` +/ -> index.vue +/people -> people/index.vue +/people/123 -> people/_id.vue +/about -> _.vue +/about/careers -> _.vue +/about/careers/chicago -> _.vue +``` + +<base-alert type="info"> + +Gérer les pages 404 ne fait pas partie du travail d'une page `_.vue`. + +</base-alert> + +## Personnaliser le routeur + +Il y a plusieurs façons de personnaliser notre routeur avec Nuxt: + +- [router-extras-module](https://github.com/nuxt-community/router-extras-module) pour personnaliser les paramètres dans la page +- le composant [@nuxtjs/router](https://github.com/nuxt-community/router-module) pour écraser le routeur Nuxt et écrire notre propre fichier `router.js` +- utiliser la propriété [router.extendRoutes](/docs/2.x/configuration-glossary/configuration-router#extendroutes) dans notre fichier `nuxt.config.js` + +## La propriété router + +La propriété router nous permet de personnaliser le routeur Nuxt.js (`vue-router`). + +```js{}[nuxt.config.js] +export default { + router: { + // personnalisons le routeur de Nuxt.js + } +} +``` + +### Base: + +L'url de base de notre application. Par exemple, si nous voulons que notre Single Page App soit sous le chemin `/app/`, alors nous devons lui attribuer la valeur `'app/'`. + +<base-alert type="next"> + +[Propriété base du routeur](/docs/2.x/configuration-glossary/configuration-router#base). + +</base-alert> + +### extendRoutes + +Nous voulons peut-être personnaliser les routes créées par Nuxt.js, pour cela nous pouvons utiliser l'option `extendRoutes`. + +Exemple d'ajout d'une route personnalisée: + +```js{}[nuxt.config.js] +export default { + router: { + extendRoutes(routes, resolve) { + routes.push({ + name: 'custom', + path: '*', + component: resolve(__dirname, 'pages/404.vue') + }) + } + } +} +``` + +Si nous souhaitons trier nos routes, nous pouvons utiliser la fonction `sortRoutes(routes)` à partir de `@nuxt/utils`: + +```js{}[nuxt.config.js] +import { sortRoutes } from '@nuxt/utils' +export default { + router: { + extendRoutes(routes, resolve) { + // ajouter nos routes ici ... + + // trions-les + sortRoutes(routes) + } + } +} +``` + +<base-alert> + +Les routes doivent respecter le schéma du [vue-router](https://router.vuejs.org/en/). + +</base-alert> + +<base-alert> + +Lorsque l'on ajoute les routes qui utilisent des [routes nommées](https://nuxtjs.org/guide/routing#named-views), il ne faut pas oublier d'ajouter les `chunkNames` des `components`. + +</base-alert> + +```js{}[nuxt.config.js] +export default { + router: { + extendRoutes(routes, resolve) { + routes.push({ + path: '/users/:id', + components: { + default: resolve(__dirname, 'pages/users'), // ou routes[index].component + modal: resolve(__dirname, 'components/modal.vue') + }, + chunkNames: { + modal: 'components/modal' + } + }) + } + } +} +``` + +<base-alert type="next"> + +[propriété extendRoutes](/docs/2.x/configuration-glossary/configuration-router#extendroutes). + +</base-alert> + +### fallback + +S'occupe du routeur, si ce dernier doit se rabattre en mode `hash` lorsque le navigateur ne supporte pas `history.pushState` alors que le mode est configuré sur `history`. + +<base-alert type="next"> + +[propriété fallback](/docs/2.x/configuration-glossary/configuration-router#fallback). + +</base-alert> + +### mode + +Nous pouvons changer le mode du routeur, ce n'est cependant pas recommandé en raison du Server Side Rendering (SSR). + +<base-alert type="next"> + +[propriété mode](/docs/2.x/configuration-glossary/configuration-router#mode). + +</base-alert> + +### parseQuery / stringifyQuery + +Fournit des fonctions de _parsing_ / _stringification_ personnalisées. + +<base-alert type="next"> + +[propriété parseQuery / stringifyQuery](/docs/2.x/configuration-glossary/configuration-router#parsequery--stringifyquery). + +</base-alert> + +### routeNameSplitter + +Nous pourrions vouloir changer le séparateur entre les noms des routes que Nuxt.js utilise, pour cela nous pouvons utiliser l'option `routeNameSplitter` dans notre fichier de configuration. Prenons par exemple le fichier page `pages/posts/_id.vue`. Nuxt.js va générer le nom de la route de manière programmatique, ici ce sera `posts-id`. Passer le `routeNameSplitter` à `/` va changer le nom en `posts/id`. + +```js{}[nuxt.config.js] +export default { + router: { + routeNameSplitter: '/' + } +} +``` + +### scrollBehavior + +L'option `scrollBehavior` nous laisse le choix pour définir un comportement personnalisé pour la position du défilement entre les routes. Cette méthode est appelée à chaque fois qu'une page est render. + +<base-alert type="next"> + +Pour plus d'informations, veuillez consulter [la documentation sur le scrollBehavior de vue-router](https://router.vuejs.org/guide/advanced/scroll-behavior.html). + +</base-alert> + +Disponible depuis la version `2.9.0`: + +Dans Nuxt.js, nous pouvons utiliser un fichier pour écraser le `scrollBehavior` du routeur. Ce fichier doit être placé dans le répertoire `app`. + +`~/app/router.scrollBehavior.js`. + +Un exemple de comment forcer la position du défilement à se retrouver tout en haut pour chaque route: + +```js{}[app/router.scrollBehavior.js] +export default function (to, from, savedPosition) { + return { x: 0, y: 0 } +} +``` + +<base-alert type="next"> + +[fichier `router.scrollBehavior.js` par défaut de Nuxt.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/router.scrollBehavior.js). + +</base-alert> + +<base-alert type="next"> + +[propriété scrollBehavior](/docs/2.x/configuration-glossary/configuration-router#scrollbehavior). + +</base-alert> + +### trailingSlash + +Disponible depuis la version `2.10`: + +Si cette option est passée à `true`, des slashs traînants seront suffixés pour chaque route. Sinon, ils seront enlevés. + +```js{}[nuxt.config.js] +export default { + router: { + trailingSlash: true + } +} +``` + +<base-alert> + +Cette option doit être changée avec une certaine préparation et une sequence de tests conséquents. Lorsque l'on définit `router.trailingSlash` a quelque chose d'autre que la valeur par défaut (`undefined`), la route opposée cessera de fonctionner. Il doit donc y avoir des redirections 301 et nos _liens internes_ doivent s'adapter eux aussi. Si nous passons `trailingSlash` à `true`, alors seulement `example.com/abc/` vont marcher mais pas `example.com/abc`. Dans le cas d'un `false`, c'est l'inverse. + +</base-alert> + +<base-alert type="next"> + +[propriété trailingSlash](/docs/2.x/configuration-glossary/configuration-router#trailingslash). + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/4.data-fetching.md b/nuxtjs.org/content/fr/0.docs/3.features/4.data-fetching.md new file mode 100644 index 000000000..e04b93b7a --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/4.data-fetching.md @@ -0,0 +1,330 @@ +--- +title: Récupération de la data +description: Dans Nuxt.js, nous avons 2 façons de récupérer de la data depuis une API. Nous pouvons utiliser la méthode fetch ou bien asyncData. +position: 4 +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/04_data_fetching?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Où pouvons-nous utiliser le hook `fetch` de Nuxt.js ? + answers: + - dans les pages et les composants + - seulement dans les pages + - seulement dans les composants + correctAnswer: dans les pages et les composants + - question: On a accès à `this` dans le hook `fetch` de Nuxt.js + answers: + - vrai + - faux + correctAnswer: vrai + - question: Quand le hook fetch de Nuxt.js est-il appelé ? + answers: + - après l'instanciation du composant + - avant l'instanciation du composant + - durant l'instanciation du composant + correctAnswer: après l'instanciation du composant + - question: Qu'est-ce qui nous permet d'afficher un placeholder lorsque `fetch` est en cours d'appel *côté client* ? + answers: + - $fetchState.timestamp + - $fetchState.error + - $fetchState.pending + correctAnswer: $fetchState.pending + - question: Comment peut-on sauvegarder les appels fait avec fetch sur les pages que l'on a déjà visité ? + answers: + - keep-alive + - save-fetch + - cache-fetch + correctAnswer: keep-alive + - question: Dans le hook `activated`, quel propriété nous permet d'ajouter un cache de 30 secondes à fetch ? + answers: + - $fetchState.pending + - $fetchState.timestamp + - $fetchState.cache + correctAnswer: $fetchState.timestamp + - question: Quand `asyncData` est-il appelé ? + answers: + - après l'instanciation du composant + - pendant l'instanciation du composant + - avant l'instanciation du composant + correctAnswer: avant l'instanciation du composant + - question: Nous avons accès à `this` dans asyncData + answers: + - vrai + - faux + correctAnswer: faux + - question: Avec asyncData, on peut utiliser le paramètre `context` pour accéder à des infos sur la route dynamique + answers: + - vrai + - faux + correctAnswer: vrai + - question: Nous avons accès au status code en cas d'erreur dans asyncData + answers: + - vrai + - faux + correctAnswer: vrai +--- + +Nuxt.js prend en charge les modèles Vue traditionnels pour le chargement de données dans votre application côté client, comme la récupération de données dans le hook `mounted()` d'un composant. Cependant, les applications universelles doivent utiliser des hooks spécifiques à Nuxt.js pour pouvoir restituer les données lors du rendu côté serveur. Cela permet à votre page de s'afficher avec toutes ses données requises présentes. + +Nuxt a deux hooks pour le chargement asynchrone des données: + +- Le hook `fetch` (Nuxt 2.12+). Ce hook peut être placé sur n'importe quel composant et fournit des raccourcis pour le rendu des états de chargement (pendant le rendu côté client) et des erreurs. +- Le hook `asyncData`. Ce hook ne peut être placé que sur les composants _page_. Contrairement à `fetch`, ce hook n'affiche pas d'espace réservé de chargement pendant le rendu côté client: à la place, ce hook bloque la navigation de l'itinéraire jusqu'à ce qu'il soit résolu, affichant une erreur de page en cas d'échec. + +<base-alert> + +Dans les versions de Nuxt antérieures à la 2.12, le hook `fetch` fonctionnait un peu comme `asyncData` aujourd'hui. Cette fonctionnalité est toujours supportée aujourd'hui pour des raisons de rétrocompatibilité: si un argument `context` est accepté dans votre `fetch()`, il sera considéré comme un hook de récupération "hérité". Cette fonctionnalité est obsolète et doit être remplacée par `asyncData(context)` ou par un [middleware anonyme](/docs/2.x/directory-structure/middleware#anonymous-middleware) en utilisant `middleware(context)`. + +</base-alert> + +Ces hooks peuvent être utilisés avec _toute bibliothèque de récupération de données_ que vous choisissez. Nous vous recommandons d'utiliser [@nuxt/http](https://http.nuxtjs.org/) ou [@nuxt/axios](https://axios.nuxtjs.org/) pour faire des requêtes HTTP aux API. Vous trouverez plus d'informations sur ces bibliothèques, telles que des guides de configuration, des en-têtes d'authentification, dans leur documentation respective. + +## Le hook fetch + +<base-alert type="info"> + +Ce hook est uniquement disponible à partir de Nuxt `2.12+`. + +</base-alert> + +Le hook `fetch` de Nuxt.js est appelé après que l'instanciation du composant soit faite côté serveur: `this` est disponible à l'intérieur. + +```js +export default { + async fetch() { + console.log(this) + } +} +``` + +<base-alert> + +`fetch(context)` a été déprécié dans nos pages, il faut utiliser un [middleware anonyme](/docs/2.x/directory-structure/middleware#anonymous-middleware) à la place: `middleware(context)` + +</base-alert> + +### Quand utiliser fetch? + +À chaque fois que nous avons besoin d'avoir de la data asynchrone. `fetch` est appelé côté serveur lors du render de la route et côté client lors de la navigation. + +Cela expose `$fetchState` au niveau du composant et avec les propriétés suivantes: + +- `pending` est un Booléen, il permet d'afficher un placeholder quand `fetch` est appelé _côté client_. +- `error`, il peut être soit à `null` soit à `Error` et nous permet d'afficher un message +- `timestamp` est l'horodatage du dernier `fetch`, cela peut s'avérer utile pour faire du [cache avec `keep-alive`](#caching) + +Nous avons aussi accès à `this.$fetch()`, utile si nous voulons appeler le hook `fetch` dans notre composant. + +```html{}[components/NuxtMountains.vue] +<template> + <p v-if="$fetchState.pending">Récupération des montagnes... ⛰️</p> + <p v-else-if="$fetchState.error">Une erreur est survenue :(</p> + <div v-else> + <h1>Montagnes Nuxt</h1> + <ul v-for="mountain of mountains"> + <li>{{ mountain.title }}</li> + </ul> + <button @click="$fetch">Actualiser</button> + </div> +</template> + +<script> + export default { + data() { + return { + mountains: [] + } + }, + async fetch() { + this.mountains = await fetch( + 'https://api.nuxtjs.dev/mountains' + ).then(res => res.json()) + } + } +</script> +``` + +<base-alert type="info"> + +On peut accéder au [contexte](/docs/2.x/concepts/context-helpers) Nuxt à l'intérieur du hook `fetch` avec `this.$nuxt.context`. + +</base-alert> + +### Options + +`fetchOnServer`: Un booléen ou une fonction (par défaut: `true`), utile si on veut appeler `fetch()` lors du render de la page côté serveur. + +`fetchDelay`: Un entier (par défaut: `200`), définit une limite minimale exprimée en millisecondes de temps d'exécution (pour éviter les flashs). + +Lorsque `fetchOnServer` est falsy (`false` ou retourne quelque chose de faux), `fetch` sera appelé uniquement côté client et `$fetchState.pending` retournera `true` lors du render du composant côté serveur. + +```js +export default { + data() { + return { + posts: [] + } + }, + async fetch() { + this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res => + res.json() + ) + }, + // on appelle fetch uniquement du côté client + fetchOnServer: false +} +``` + +### Écoute des modifications des query strings + +Le hook `fetch` n'est pas appelé sur les modifications des query strings par défaut. Pour surveiller ces modifications, nous pouvons ajouter un watcher sur `$route.query` et appeler `$fetch`: + +```js +export default { + watch: { + '$route.query': '$fetch' + }, + async fetch() { + // appelé aussi lors des modifications de query + } +} +``` + +### Mise en cache + +Nous pouvons utiliser la directive `keep-alive` dans les composants `<nuxt/>` et `<nuxt-child>` pour sauvegarder le résultat des appels de `fetch` dans les pages déjà visitées: + +```html{}[layouts/default.vue] +<template> + <nuxt keep-alive /> +</template> +``` + +Nous pouvons aussi spécifier les [props](https://vuejs.org/v2/api/#keep-alive) passées à `<keep-alive>` en passant la prop `keep-alive-props` au composant `<nuxt>`. + +```html{}[layouts/default.vue] +<nuxt keep-alive :keep-alive-props="{ max: 10 }" /> +``` + +Le code ci-dessus va garder en mémoire 10 composants `page`. + +### Utiliser le hook `activated` + +Nuxt va directement remplir `this.$fetchState.timestamp` (horodatage) avec le dernier appel de `fetch` (cela inclut le SSR). Nous pouvons utiliser cette propriété en combinaison avec le hook `activated` pour ajouter 30 secondes de cache à `fetch`: + +```html{}[pages/posts/_id.vue] +<template> ... </template> + +<script> + export default { + data() { + return { + posts: [] + } + }, + activated() { + // appeller fetch de nouveau si le dernier appel date de plus de 30 secondes + if (this.$fetchState.timestamp <= Date.now() - 30000) { + this.$fetch() + } + }, + async fetch() { + this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res => + res.json() + ) + } + } +</script> +``` + +La navigation à la même page ne va pas rappeler `fetch` tant que le dernier call ne date pas d'au moins 30 secondes. + +## Async Data + +<base-alert> + +`asyncData` est seulement disponible pour les [pages](/docs/2.x/directory-structure/pages) et nous n'avons donc pas accès à `this` à l'intérieur du hook. + +</base-alert> + +La différence principale avec `fetch` est que vous n'avez pas à gérer les status d'erreur ou en cours. Nuxt.js va attendre que le hook `asyncData` soit terminé avant de procéder à la navigation sur la page suivante ou afficher la [page d'erreur](/docs/2.x/directory-structure/layouts#error-page) + +Ce hook reçoit [le contexte](/docs/2.x/concepts/context-helpers) en tant que premier argument. Nous pouvons l'utiliser pour aller chercher de la data et Nuxt.js va automatiquement fusionner l'object retourné avec le `data` du composant. + +```html{}[pages/index.vue] +<template> + <h1>{{ project }}</h1> +</template> + +<script> + export default { + async asyncData(context) { + return { + project: 'nuxt' + } + } + } +</script> +``` + +Dans les exemples qui suivent nous utilisons [@nuxt/http](https://http.nuxtjs.org/), que nous recommandons pour aller récupérer de la data d'une API. + +D'abord, nous devons l'installer: + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add @nuxt/http +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install @nuxt/http +``` + + </code-block> +</code-group> + +Ensuite, nous allons l'ajouter à notre fichier `nuxt.config.js` à la section `modules`: + +```js{}[nuxt.config.js] +export default { + modules: ['@nuxt/http'] +} +``` + +```html{}[pages/posts/_id.vue] +<template> + <div> + <h1>{{ post.title }}</h1> + <p>{{ post.description }}</p> + </div> +</template> + +<script> + export default { + async asyncData({ params, $http }) { + const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`) + return { post } + } + } +</script> +``` + +### Écouter les changements de query + +La méthode `asyncData` n'est pas appelée par défaut sur les modifications liées aux query strings. Si nous souhaitons changer ce comportement, pour par exemple créer un composant de pagination, nous pouvons configurer des paramètres qui seront par la suite écoutés grâce à la propriété `watchQuery` sur le composant de notre page. + +<base-alert type="next"> + +Pour en apprendre davantage sur la [propriété watchQuery](/docs/2.x/components-glossary/pages-watchquery) et voir la liste des [clés disponibles dans le contexte](/docs/2.x/concepts/context-helpers). + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/5.meta-tags-seo.md b/nuxtjs.org/content/fr/0.docs/3.features/5.meta-tags-seo.md new file mode 100644 index 000000000..cf05936df --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/5.meta-tags-seo.md @@ -0,0 +1,228 @@ +--- +title: Balises meta et référencement SEO +description: Nuxt.js nous permet de définir les balises `<meta>` par défaut pour notre application dans le fichier nuxt.config.js en utilisant la propriété head. Cela permet d'ajouter un titre et une description par défaut pour le référencement ou bien définir la fenêtre d'affichage ou ajouter la favicon. +position: 6 +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/06_meta_tags_seo?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Où placer le titre et les méta descriptions de façon globale ? + answers: + - dans le composant de la page + - dans le fichier nuxt.config.js + - dans le package.json + correctAnswer: dans le fichier nuxt.config.js + - question: Où placer le titre et les méta descriptions de façon locale ? + answers: + - dans le composant de la page + - dans le fichier nuxt.config.js + - dans le composant SEO + correctAnswer: dans le composant de la page + - question: Dans les pages, pour avoir accès aux données dans votre titre ou méta description, nous utilisons la + answers: + - fonction meta + - fonction head + - fonction SEO + correctAnswer: fonction head + - question: Nous pouvons charger des ressources externes uniquement dans le fichier nuxt.config.js + answers: + - vrai + - faux + correctAnswer: faux + - question: Pour inclure des scripts avant la fermeture de la balise body nous utilisons + answers: + - 'body: true' + - 'body: false' + - 'scripts: true' + correctAnswer: 'body: true' +--- + +Nuxt.js nous propose trois façons différentes d'ajouter des métadonnées à l'application : + +1. Utiliser globalement le fichier nuxt.config.js +2. Utiliser localement la propriété `head` comme un objet +3. Utiliser localement la propriété `head` comme une fonction pour que nous ayons accès aux données et aux propriétés calculées. + +### Paramètres globaux + +Nuxt.js nous permet de définir les balises `<meta>` par défaut pour notre application dans le fichier `nuxt.config.js` en utilisant la propriété head. Cela permet d'ajouter un titre et une description par défaut pour le référencement ou bien définir la fenêtre d'affichage ou ajouter la favicon. + +```js{}[nuxt.config.js] +export default { + head: { + title: 'mon titre de site web', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { + hid: 'description', + name: 'description', + content: 'ma description de site web' + } + ], + link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] + } +} +``` + +<base-alert type="info"> + +Cela nous donnera le même titre et la même description sur chaque page. + +</base-alert> + +### Configuration locale + +Nous pouvons également ajouter des titres et des meta pour chaque page en utilisant la propriété `head` à l'intérieur de notre balise de script sur chaque page. + +```js{}[pages/index.vue] +<script> +export default { + head: { + title: "Page d'accueil", + meta: [ + { + hid: 'description', + name: 'description', + content: "Description de la page d'accueil" + } + ], + } +} +</script> +``` + +<base-alert type="info"> + +Utiliser `head` comme objet pour définir un titre et une description uniquement pour la page d'accueil. + +</base-alert> + +```html{}[pages/index.vue] +<template> + <h1>{{ title }}</h1> +</template> +<script> + export default { + data() { + return { + title: "Page d'accueil" + } + }, + head() { + return { + title: this.title, + meta: [ + { + hid: 'description', + name: 'description', + content: "Description de la page d'accueil" + } + ] + } + } + } +</script> +``` + +<base-alert type="info"> + +Utiliser `head` comme une fonction pour définir un titre et une description uniquement pour la page d'accueil. En utilisant une fonction, nous avons accès aux données (`data`) et aux propriétés calculées (`computed`). + +</base-alert> + +Nuxt.js utilise [vue-meta](https://vue-meta.nuxtjs.org/) pour mettre à jour l'en-tête et les méta data de notre application. + +<base-alert> + +Pour éviter toute duplication lors de l'utilisation de composants enfants, veuillez donner un identifiant unique avec la clé `hid` à la méta description. De cette façon, `vue-meta` saura qu'il doit écraser la balise par défaut. + +</base-alert> + +<base-alert type="next"> + +Pour en savoir plus sur les options disponibles pour la propriété `head`, on peut consulter la documentation de [vue-meta](https://vue-meta.nuxtjs.org/api/#metainfo-properties). + +</base-alert> + +## Ressources externes + +Nous pouvons inclure des ressources externes telles que des scripts et des polices de caractères en les ajoutant globalement au fichier `nuxt.config.js` ou localement dans l'objet ou la fonction `head`. + +<base-alert type="info"> + +Nous pouvons également passer à chaque ressource un `body : true` optionnel afin d'inclure la ressource avant la balise de fermeture `</body>`. + +</base-alert> + +### Configuration globale + +```js{}[nuxt.config.js] +export default { + head: { + script: [ + { + src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' + } + ], + link: [ + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' + } + ] + } +} +``` + +### Configuration locale + +```html{}[pages/index.vue] +<template> + <h1>Page avec jQuery et la police police de caractère Roboto</h1> +</template> + +<script> + export default { + head() { + return { + script: [ + { + src: + 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' + } + ], + link: [ + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' + } + ] + } + } + } +</script> + +<style scoped> + h1 { + font-family: Roboto, sans-serif; + } +</style> +``` + +## Conseils pour les ressources + +Ajoutez des liens de `prefetch` et de `preload` pour accélérer le temps de chargement de la page initiale. + +Nous voudrons peut-être désactiver cette option si nous avons beaucoup de pages et de routes. + +<base-alert type="next"> + +[Conseils pour les ressources](/docs/2.x/configuration-glossary/configuration-render#resourcehints). + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/6.configuration.md b/nuxtjs.org/content/fr/0.docs/3.features/6.configuration.md new file mode 100644 index 000000000..57f254b38 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/6.configuration.md @@ -0,0 +1,383 @@ +--- +title: Configuration +description: Par défaut, Nuxt.js est configuré pour couvrir la plupart des cas d'usage. Cette configuration par défaut peut être écrasée par un fichier nuxt.config.js. +position: 7 +category: features +csb_link_host_port: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/07_configuration_host_port?fontsize=14&hidenavigation=1&theme=dark +csb_link_pre-processors: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/07_configuration_pre-processors?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Nous pouvons utiliser axios-module dans le fichier nuxt.config.js + answers: + - vrai + - faux + correctAnswer: faux + - question: Quel est le hôte par défaut de Nuxt.js en développement ? + answers: + - localhost + - 3000 + - '0' + correctAnswer: localhost + - question: Quel attribut doit-on définir dans la balise de style pour pouvoir utiliser du SCSS ? + answers: + - lang="scss" + - language="scss" + - style="scss" + correctAnswer: lang="scss" + - question: Quel est le port par défaut de Nuxt.js en développement ? + answers: + - 8000 + - 3000 + - localhost + correctAnswer: 3000 + - question: Dans le fichier nuxt.config.js, quel est la propriété que l'on utilise pour ajouter globalement des fichiers CSS ? + answers: + - styles + - css + - globalCss + correctAnswer: css + - question: Nous pouvons utiliser du JSX dans notre application Nuxt.js + answers: + - vrai + - faux + correctAnswer: vrai + - question: Dans le fichier nuxt.config.js, quelle propriété utilise-t-on pour personnaliser la configuration de webpack ? + answers: + - webpack.extend + - build.extend + - extend.build + correctAnswer: build.extend + - question: Quel est le fichier qui nous permet de spécifier des fichiers à ignorer par notre application Nuxt.js ? + answers: + - .ignore + - .nuxtignore + - .ignorenuxt + correctAnswer: .nuxtignore + - question: Si nous souhaitons ignorer le fichier about dans notre application Nuxt.js, quel préfixe faut-il utiliser ? + answers: + - _about.vue + - -about.vue + - __about.vue + correctAnswer: -about.vue +--- + +Par défaut, Nuxt.js est configuré pour couvrir la plupart des cas d'usage. Cette configuration par défaut peut être écrasée par un fichier nuxt.config.js. + +## La propriété `css` + +Nuxt.js nous permet de définir globalement les fichiers/modules/librairies CSS que nous voulons (ceux qui seront inclus dans chaque page). + +<base-alert> + +Dans le cas où nous souhaitons utiliser du `SASS`, il faut vérifier que nous avons bien installé les paquets `node-sass` et `sass-loader`. + +</base-alert> + +Dans notre fichier `nuxt.config.js`, il faut ajouter les ressources CSS: + +```js{}[nuxt.config.js] +export default { + css: [ + // charge un module Node.js directement (ici c'est un fichier SASS) + 'bulma', + // fichier CSS dans notre projet + '~/assets/css/main.css', + // fichier SCSS dans notre projet + '~/assets/css/main.scss' + ] +} +``` + +<base-alert> + +Nuxt.js va automatiquement deviner le type de fichier par son extension et utiliser le loader du pré-processeur adéquat pour webpack. Nous aurons cependant besoin d'installer le loader requis si nous avons besoin de l'utiliser. + +</base-alert> + +### Extensions de Style + +Nous pouvons omettre l'extension de nos fichiers CSS/SCSS/Postcss/Less/Stylus/... listés dans notre tableau `css`. + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/css/main', '~/assets/css/animations'] +} +``` + +<base-alert> + +Si nous avons deux fichiers du même nom, par ex `main.scss` et `main.css` et si nous ne spécifions par l'extension dans notre tableau `css` par ex `css: ['~/assets/css/main']` alors seulement un fichier sera chargé en fonction de l'ordre défini par `styleExtensions`. Dans ce cas, le fichier `css` sera chargé et le `scss` sera ignoré parce que l'extension `css` arrive en premier dans le tableau `styleExtension`. + +</base-alert> + +Ordre par défaut: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']` + +<app-modal> + <code-sandbox :src="csb_link_pre-processors"></code-sandbox> +</app-modal> + +## Pré-processeurs + +Grâce au [loader Vue](http://vue-loader.vuejs.org/en/configurations/pre-processors.html), nous pouvons utiliser n'importe quel type de pré-processeur pour notre `<template>` ou `<style>`, il faut utiliser l'attribut `lang` pour cela. + +Voici l'exemple d'un fichier `pages/index.vue` utilisant du [pug](https://github.com/pugjs/pug) et du [SASS](http://sass-lang.com/): + +```html{}[pages/index.vue] +<template lang="pug"> h1.red Salut {{ name }} !</template> + +<style lang="scss"> + .red { + color: red; + } +</style> +``` + +Pour utiliser ces pré-processeurs, nous avons besoin d'installer leurs loaders Webpack: + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add -D pug pug-plain-loader +yarn add -D node-sass sass-loader +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install --save-dev pug pug-plain-loader +npm install --save-dev node-sass sass-loader +``` + + </code-block> +</code-group> + +## JSX + +Nuxt.js utilise [@nuxt/babel-preset-app](https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app), qui est basé sur l'officiel [@vue/babel-preset-app](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) pour une configuration de Babel par défaut, afin que nous puissions utiliser du JSX dans nos composants. + +Nous pouvons aussi utiliser du JSX dans la méthode `render` des composants: + +```js +<script> +export default { + data () { + return { name: 'Le monde' } + }, + render (h) { + return <h1 class="red">{this.name}</h1> + } +} +</script> +``` + +Abréger `createElement` par `h` est une convention commune que nous pouvons voir dans l'écosystème Vue mais c'est en fait optionnel pour du JSX car ce dernier [injecte automatiquement](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection) `const h = this.$createElement` dans n'importe quelle méthode et getter (pas les fonctions ni les fonctions fléchées) à condition qu'ils soient définis dans la syntaxe ES2015. Si c'est le cas, nous pouvons omettre le paramètre `h` dans le cas où nous utilisons du JSX. + +Nous pouvons en apprendre davantage sur le fonction du JSX dans cette [section](https://vuejs.org/v2/guide/render-function.html#JSX) de la documentation de Vue. + +## Ignorer des fichiers + +### .nuxtignore + +Nous pouvons utiliser un fichier `.nuxtignore` pour dire à Nuxt.js d'ignorer des `layout`, `page`, `store` et/ou `middleware` à la racine de notre projet (`rootDir`) durant la phase de build. Le fichier `.nuxtignore` est sujet aux mêmes spécifications qu'un `.gitignore` ou un `.eslintignore`, dans le sens où chaque ligne est un schéma (glob pattern) indiquant quels fichiers devraient être ignorés. + +```markdown{}[.nuxtignore] +# ignore le layout foo.vue + +layouts/foo.vue + +# ignore les fichiers layout dont le nom finit par -ignore.vue + +layouts/\*-ignore.vue + +# ignore la page bar.vue + +pages/bar.vue + +# ignore les pages à l'intérieur du répertoire ignore + +pages/ignore/\*.vue + +# ignore le store baz.js + +store/baz.js + +# ignore les fichiers du store qui correspondent avec _.test._ + +store/ignore/_.test._ + +# ignore les fichiers middleware à l'intérieur du répertoire foo sauf foo/bar.js + +middleware/foo/\*.js !middleware/foo/bar.js +``` + +### La propriété ignorePrefix + +N'importe quel fichier dans `pages/`, `layout/`, `middleware/` ou `store/` sera ignoré durant le build si son nom de fichier commence par le préfixe spécifié par `ignorePrefix`. + +Par défaut, tous les fichiers qui commencent par un `-` seront ignorés, tels que `store/-foo.js` et `pages/-bar.vue`. Cela permet de laisser cohabiter des tests, des utilitaires et des composants avec les appelants sans pour autant les convertir en des routes, des stores etc. + +### La propriété `ignore` + +Plus configurable que `ignorePrefix`: tous les fichiers qui correspondent au schéma (glob pattern) seront ignorés durant le build. + +```js{}[nuxt.config.js] +export default { + ignore: 'pages/bar.vue' +} +``` + +### ignoreOptions + +Derrière `.nuxtignore` se cache `node-ignore`, ainsi `ignoreOptions` peut être configuré avec les mêmes options que `node-ignore`. + +```js{}[nuxt.config.js] +export default { + ignoreOptions: { + ignorecase: false + } +} +``` + +## Personnaliser la configuration Webpack + +Nous pouvons personnaliser la configuration webpack de Nuxt via l'option `extend` dans notre fichier `nuxt.config.js`, cette option est une méthode qui accepte deux arguments. Le premier argument est l'objet `config` de webpack exporté depuis la configuration webpack de Nuxt.js. Le second paramètre est un objet `context` contenant les propriétés booléennes suivantes: `{ isDev, isClient, isServer, loaders }`. + +```js{}[nuxt.config.js] +export default { + build: { + extend(config, { isDev, isClient }) { + // ... + config.module.rules.push({ + test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, + loader: 'file-loader' + }) + if (isDev) { + // asse Webpack en mode développement si `isDev` est vrai. + config.mode = 'development' + } + } + } +} +``` + +La méthode `extend` est appelée deux fois, une fois pour le bundle du client et une fois pour celui du serveur. + +### Personnaliser la configuration des fragments + +Nous souhaiterions peut-être customiser un peu la [configuration d'optimisation](/docs/2.x/configuration-glossary/configuration-build#optimization), en évitant de ré-écrire l'objet par défaut. + +```js{}[nuxt.config.js] +export default { + build: { + extend(config, { isClient }) { + if (isClient) { + config.optimization.splitChunks.maxSize = 200000 + } + } + } +} +``` + +### Exécuter ESLint à chaque build de webpack dans un environnement de développement + +Pour être au courant d'erreurs de style de code, nous pourrions avoir envie d'exécuter [ESLint](https://github.com/webpack-contrib/eslint-loader) à chaque build dans un environnement de développement. + +```js{}[nuxt.config.js] +export default { + build: { + extend(config, { isDev, isClient }) { + if (isDev && isClient) { + config.module.rules.push({ + enforce: 'pre', + test: /\.(js|vue)$/, + loader: 'eslint-loader', + exclude: /(node_modules)/ + }) + } + } + } +} +``` + +## Éditer l'hôte et le port + +Par défaut, l'environnement de développement du hôte de Nuxt.js est `localhost`, qui n'est accessible qu'au sein de la machine hôte. Afin d'admirer notre application sur un autre appareil nous aurons besoin de modifier l'hôte. + +Le hôte `'0.0.0.0'` a pour but de dire à Nuxt.js de résoudre une adresse hôte, afin de lui permettre d'être accessible à d'autres appareils en _dehors_ de la machine hôte (ex: LAN). Si le hôte est défini sur la chaîne de caractère `'0'` (pas `0`, qui lui est falsy) ou bien `'0.0.0.0'`, notre adresse IP locale sera assignée à notre application Nuxt.js. + +```js{}[nuxt.config.js] +export default { + server: { + host: '0' // par défaut: localhost + } +} +``` + +Nous pouvons aussi changer le port par défaut. + +```js{}[nuxt.config.js] +export default { + server: { + port: 8000 // par défaut: 3000 + } +} +``` + +<base-alert type="info"> + +Si le hôte est défini sur la chaîne de caractère `'0'` (pas `0`, qui lui est falsy), un port aléatoire sera assigné à notre application Nuxt.js. + +</base-alert> + +Même si nous pouvons modifier cela dans le fichier `nuxt.config.js`, ce n'est pas conseillé car cela peut causer des soucis lors de l'hébergement de notre site. Il sera plutôt conseillé de modifier l'hôte et le port directement dans notre commande `dev`. + +```bash +HOST=0 PORT=8000 npm run dev +``` + +ou créer un script dans notre `package.json` + +```json +"scripts": { + "dev:host": "nuxt --hostname '0' --port 8000" +} +``` + +<app-modal> + <code-sandbox :src="csb_link_host_port"></code-sandbox> +</app-modal> + +## Configuration Asynchrone + +Même s'il est conseillé d'utiliser la configuration normale `export default {}`, nous pouvons utiliser une configuration asynchrone en exportant une fonction asynchrone qui retourne l'objet de configuration. + +```js{}[nuxt.config.js] +import axios from 'axios' + +export default async () => { + const data = await axios.get('https://api.nuxtjs.dev/posts') + return { + head: { + title: data.title + //... le reste de la configuration + } + } +} +``` + +<base-alert> + +L'`axios-module` ne peut pas être utilisé dans le fichier `nuxt.config.js`. Nous aurons besoin d'importer axios et de le configurer à nouveau. + +</base-alert> + +## Configuration avancée + +<base-alert type="next"> + +Le fichier `nuxt.config.js` a bien plus d'option de customisation et de configuration ! Se référer aux clés présentes dans le [glossaire de configuration](/docs/2.x/configuration-glossary/configuration-build). + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/7.loading.md b/nuxtjs.org/content/fr/0.docs/3.features/7.loading.md new file mode 100644 index 000000000..c6e2ddb85 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/7.loading.md @@ -0,0 +1,264 @@ +--- +title: Chargement +description: Nuxt.js fournit sa propre barre de chargement lors de la navigation entre les routes. Nous pouvons la personnaliser, la désactiver ou même créer la notre. +position: 8 +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/08_loading?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Qu'avons-nous besoin de faire pour faire fonctionner la barre de progression de Nuxt.js ? + answers: + - Rien, cela marche, tout simplement ! + - passer la propriété `loading` à `true` dans le fichier `nuxt.config.js` + - créer un composant `loading` + correctAnswer: Rien, cela marche, tout simplement ! + - question: Où pouvons-nous modifier les styles pour la barre de progression ? + answers: + - dans le composant `layout` + - dans le composant `page` + - dans le fichier `nuxt.config.js` + correctAnswer: dans le composant `layout` + - question: Dans le fichier `nuxt.config.js`, dans quelle propriété faut-il définir les styles pour la barre de progression de Nuxt.js ? + answers: + - progress + - loading + - loadingBar + correctAnswer: loading + - question: Que faut-il ajouter au fichier `nuxt.config.js` pour désactiver la barre de progression ? + answers: + - 'loadingBar: false' + - "loading: 'none'" + - 'loading: false' + correctAnswer: 'loading: false' + - question: On peut désactiver la barre de progression sur des pages spécifiques + answers: + - vrai + - faux + correctAnswer: vrai + - question: Qu'utilise-t-on pour démarrer la barre de progression de manière programmatique ? + answers: + - $nuxt.loading.start() + - $nuxt.loading() + - $loading.start() + correctAnswer: $nuxt.loading.start() + - question: Quelle propriété est utilisée pour faire en sorte que la barre de progression soit continue lorsque la chargement prend plus de temps ? + answers: + - "duration: 'continuous'" + - "loading: 'continuous'" + - 'continuous: true' + correctAnswer: 'continuous: true' + - question: Quelles sont les deux méthodes requises lors de la création d'un composant de chargement personnalisé ? + answers: + - start() and fail() + - start() and finish() + - loading() and finish() + correctAnswer: start() and finish() + - question: Lorsque nous avons créé notre propre composant `loading.vue`, comment l'utilise-t-on ? + answers: + - importons-le dans la page des layouts + - ajoutons-le dans le fichier `nuxt.config.js` dans la propriété `loading` + - ajoutons-le dans le fichier `nuxt.config.js` dans la propriété `plugins` + correctAnswer: ajoutons le dans le fichier `nuxt.config.js` dans la propriété `loading` + - question: Pour ajouter un tourniquet lorsque notre application Nuxt.js est en mode SPA, que faut-il ajouter à la propriété `loading` ? + answers: + - 'circle: true' + - 'spinner: circle' + - 'name: circle' + correctAnswer: 'name: circle' +--- + +Nuxt.js fournit sa propre barre de chargement lors de la navigation entre les routes. Nous pouvons la personnaliser, la désactiver ou même créer la notre. + +## Personnaliser la barre de progression + +Parmi les propriétés que nous pouvons modifier, on peut lister la couleur, la taille, la durée et la direction de la barre de progression, cela afin de correspondre aux besoins de notre application. Cela peut être fait en mettant à jour la propriété `loading` du fichier `nuxt.config.js` avec les propriétés correspondantes (`color`, `size`, `duration`, `direction`). + +Par exemple, pour définir une barre de progression bleue d'une hauteur de 5 pixels, nous pouvons mettre à jour le fichier `nuxt.config.js` avec: + +```js +export default { + loading: { + color: 'blue', + height: '5px' + } +} +``` + +Voici la liste des propriétés que nous pouvons utiliser pour personnaliser la barre de progression. + +| Propriété | Type | Défaut | Description | +| ----------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- | +| color | String | 'black' | Couleur CSS de la barre de progression | +| failedColor | String | 'red' | Couleur CSS de la barre de progression lors d'une erreur lors du render d'une route (ex: de la data ou un fetch ont échoué). | +| height | String | '2px' | Hauteur de la barre de progression (utilisé dans la propriété `style` de la barre de progression) | +| throttle | Number | 200 | En millisecondes, le temps a attendre avant que la barre de navigation ne soit affichée. Utile pour éviter de créer des flashs. | +| duration | Number | 5000 | En millisecondes, la durée maximum de la barre de progression, Nuxt.js assume que la route sera render en moins de 5 secondes. | +| continuous | Boolean | false | Continuer d'animer la barre de progression lorsque le chargement prends plus de temps que la valeur de la propriété `duration`. | +| css | Boolean | true | Définir à `false` pour enlever tous les styles appliqués à la barre de progression (y compris les vôtres). | +| rtl | Boolean | false | Définit la direction de la barre de progression, de droite à gauche. | + +## Désactiver la barre de progression + +Si nous ne voulons pas afficher la barre de progression entre les routes, il suffit d'ajouter `loading: false` à notre fichier `nuxt.config.js`: + +```js{}[nuxt.config.js] +export default { + loading: false +} +``` + +La propriété `loading` nous donne l'option de désactiver la barre de progression sur une page spécifique. + +```html{}[pages/index.vue] +<template> + <h1>Ma page</h1> +</template> + +<script> + export default { + loading: false + } +</script> +``` + +## Lancer la barre de progression de manière programmatique + +La barre de progression peut aussi être lancée de manière programmatique dans nos composants en appelant `this.$nuxt.$loading.start()` pour lancer le chargement et `this.$nuxt.$loading.finish()` pour le finir. + +Durant le process de montage du composant page, la propriété `$loading` peut ne pas être immédiatement accessible. Pour remédier à cette problématique et nous permettre de commencer la progression dans la méthode `mounted`, il faut enrouler notre méthode `$loading` dans un `this.$nextTick` comme montré ci-dessous: + +```js +export default { + mounted() { + this.$nextTick(() => { + this.$nuxt.$loading.start() + setTimeout(() => this.$nuxt.$loading.finish(), 500) + }) + } +} +``` + +## Les rouages de la barre de progression + +Malheureusement, il n'est pas possible pour le composant de chargement de connaître en avance le temps que va mettre une page pour charger. Ainsi, il n'est pas possible d'animer la barre de progression de manière adéquate pour correspondre au temps de chargement. + +Le composant de chargement de Nuxt.js résout ce problème en nous laissant la possibilité de définir une durée (`duration`), nous permettant de définir une estimation de la durée de chargement que cela devrait prendre. À moins que nous n'utilisions un composant de chargement personnalisé, la barre de progression ira toujours de 0 à 100% de la durée (`duration`), peu importe la progression actuelle. Lorsque le chargement réel prend plus de temps que la durée définie, la barre de progression va rester à 100% jusqu'à ce que le chargement soit fini. + +Nous pouvons changer le comportement par défaut en passant la propriété `continuous` à `true`. Ainsi, la barre de progression reviendra à 0% de nouveau, après avoir atteint les 100%. L'animation va se répéter (de 0 à 100%) jusqu'à ce que le chargement ne soit fini. + +```js +export default { + loading: { + continuous: true + } +} +``` + +_Exemple d'une barre de progression continue:_ + +![https://nuxtjs.org/api-continuous-loading.gif](https://nuxtjs.org/api-continuous-loading.gif) + +## Utiliser un composant de chargement personnalisé + +Nous pouvons aussi créer notre propre composant que Nuxt.js se chargera d'appeler au lieu d'utiliser celui par défaut. Pour ce faire, nous aurons besoin de spécifier le chemin de du composant dans l'option `loading`. + +Notre composant devra fournir certaines des méthodes suivantes: + +| Méthode | Requis | Description | +| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | +| start() | Requis | Appelé lors d'un changement de route, c'est à ce moment là que nous affichons notre composant. | +| finish() | Requis | Appelé lorsqu'une route est chargée (et la data collectée), c'est à ce moment là que nous cachons notre composant. | +| fail(error) | Optionnel | Appelé lorsqu'une de nos routes n'a pas pu être chargée (ex: le chargement de la data a échoué) | +| increase(num) | Optionnel | Appelé durant le chargement du composant de la route, `num` est un `Integer` < 100. | + +Nous pouvons créer notre composant personnalisé dans `components/LoadingBar.vue`: + +```html{}[components/LoadingBar.vue] +<template> + <div v-if="loading" class="loading-page"> + <p>Chargement...</p> + </div> +</template> + +<script> + export default { + data: () => ({ + loading: false + }), + methods: { + start() { + this.loading = true + }, + finish() { + this.loading = false + } + } + } +</script> + +<style scoped> + .loading-page { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + text-align: center; + padding-top: 200px; + font-size: 30px; + font-family: sans-serif; + } +</style> +``` + +Ensuite, il faut mettre à jour le fichier `nuxt.config.js` pour dire à Nuxt.js d'utiliser notre composant: + +```js{}[nuxt.config.js] +export default { + loading: '~/components/LoadingBar.vue' +} +``` + +## La propriété du tourniquet de chargement + +Lorsque nous utilisons Nuxt.js en mode SPA, il n'y a pas de contenu provenant du serveur lors du premier chargement de la page. Ainsi, au lieu d'afficher une page vide pendant que la page charge, Nuxt.js nous permet d'utiliser un tourniquet que nous pouvons personnaliser afin d'ajouter nos propres couleurs, notre background et même changer le tourniquet lui même. + +```js{}[nuxt.config.js] +export default { + loadingIndicator: { + name: 'circle', + color: '#3B8070', + background: 'white' + } +} +``` + +## Tourniquets intégrés + +Ces tourniquets sont importés depuis le projet génial qu'est [Spinkit](http://tobiasahlin.com/spinkit). Nous pouvons regarder la page de démonstration pour avoir un aperçu des tourniquets disponibles. Afin d'utiliser l'un des tourniquets, tout ce nous avons à faire est d'ajouter son nom à la propriété `name`. Pas besoin d'importer ou d'installer quoi que ce soit. Voici la liste de tous les tourniquets intégrés que nous pouvons utiliser: + +- circle +- cube-grid +- fading-circle +- folding-cube +- chasing-dots +- nuxt +- pulse +- rectangle-bounce +- rotating-plane +- three-bounce +- wandering-cubes + +Les tourniquets intégrés supportent les options `color` et `background`. + +## Tourniquets personnalisés + +Si nous souhaitons avoir notre propre tourniquet, une chaîne de caractères ou un nom peuvent aussi être un chemin vers un template de tourniquet. Toutes les options seront ainsi passées au template. + +Si nous voulons nous inspirer du tourniquet de base de Nuxt.js, nous pouvons retrouver le code [ici](https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading) ! + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/8.nuxt-components.md b/nuxtjs.org/content/fr/0.docs/3.features/8.nuxt-components.md new file mode 100644 index 000000000..2f59e02c0 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/8.nuxt-components.md @@ -0,0 +1,414 @@ +--- +title: Composants Nuxt +description: Nuxt.js arrive avec quelques composants importants, ceux-ci nous seront utiles pour construire notre application. +position: 9 +category: features +csb_link_nuxt_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/09_components_nuxt-link?fontsize=14&hidenavigation=1&theme=dark +csb_link_nuxt: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/09_components_nuxt?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Quel composant est utilisé lorsque nous souhaitons afficher les composants page ? + answers: + - '<Nuxt>' + - '<Page>' + - '<Views>' + correctAnswer: '<Nuxt>' + - question: 'Le composant <Nuxt> peut être utilisé dans :' + answers: + - les composants + - les pages + - les layouts + correctAnswer: les layouts + - question: Quel composant est utilisé lorsque nous souhaitons afficher les composants enfants dans une route imbriquée ? + answers: + - '<Nuxt>' + - '<NuxtChild>' + - '<Children>' + correctAnswer: '<NuxtChild>' + - question: Où faut-il insérer le composant `<NuxtChild>` ? + answers: + - pages/child.vue + - pages/parent.vue + - layouts/parent.vue + correctAnswer: pages/parent.vue + - question: '`keep alive` peut être utilisé dans' + answers: + - 'le composant <Nuxt> seulement' + - 'les composants <Nuxt> et <NuxtChild>' + - 'le composant <NuxtChild> seulement' + correctAnswer: 'les composants <Nuxt> et <NuxtChild>' + - question: Quel composant faut-il utiliser pour lier des pages internes ? + answers: + - '<NuxtLink>' + - '<RouterLink>' + - '<a>' + correctAnswer: '<NuxtLink>' + - question: 'Comment se fait le lien de la page À propos en utilisant un <NuxtLink> ?' + answers: + - to="/about" + - href="/about" + - link="/about" + correctAnswer: to="/about" + - question: Quel paramètre faut-il utiliser pour désactiver le prefetching sur certaines pages ? + answers: + - no-prefetch + - :prefetch="false" + - no-prefetch et :prefetch="false" + correctAnswer: no-prefetch et :prefetch="false" + - question: Quelle est la classe (utilisée par défaut) qui nous permet d'ajouter des styles à des liens actifs ? + answers: + - nuxt-link-active + - link-active + - router-link-active + correctAnswer: nuxt-link-active + - question: Quelle est la classe (utilisée par défaut) qui nous permet d'ajouter des styles à des liens actifs dans le cas d'une correspondance exacte ? + answers: + - nuxt-link-exact-active + - link-exact-active + - nuxt-exact-active-link + correctAnswer: nuxt-link-exact-active + - question: Dans Nuxt ≥ 2.9.0, quel composant faut-il utiliser pour que le composant ne soit render que du côté client ? + answers: + - '<client-only>' + - '<no-ssr>' + - '<client>' + correctAnswer: '<client-only>' +--- + +Nuxt.js arrive avec quelques composants importants, ceux-ci nous seront utiles pour construire notre application. Les composants sont disponibles de manière globale, ce qui veut dire que nous n'avons pas besoin de les importer pour les utiliser. + +Dans les paragraphes suivants, chacun de ces composants sera expliqué. + +## Le composant Nuxt + +Le composant `<Nuxt>` nous permet d'afficher les composants page. Basiquement, le composant est remplacé par les pages qui concordent avec la route montrée. Ainsi, il est important d'ajouter le composant `<Nuxt>` à nos layouts. + +```html{}[layouts/default.vue] +<template> + <div> + <div>Ma barre de navigation</div> + <Nuxt /> + <div>Mon pied de page</div> + </div> +</template> +``` + +<base-alert> + +Le composant `<Nuxt>` ne peut être utilisé que dans les [layouts](/docs/2.x/concepts/views#layouts). + +</base-alert> + +Le composant `<Nuxt>` peut prendre la propriété `nuxt-child-key`, cette dernière sera passée à `<RouterView>` afin que les transitions dans les pages dynamiques fonctionnent correctement. + +Il y a 2 façons de gérer la propriété `key` de `<RouterView>`: + +1. Utiliser la propriété `nuxt-child-key` sur notre composant `<Nuxt>` + +```html{}[layouts/default.vue] +<template> + <div> + <Nuxt :nuxt-child-key="uneKey" /> + </div> +</template> +``` + +2. Ajouter l'option `key` dans les composants _page_ en tant que `string` ou `function` + +```js +export default { + key(route) { + return route.fullPath + } +} +``` + +## Le composant NuxtChild + +Ce composant est utilisé pour afficher les composants enfants dans une route imbriquée. + +Exemple: + +``` +-| pages/ +---| parent/ +------| child.vue +---| parent.vue +``` + +Cette arborescence de fichiers va générer les chemins suivants : + +```js +;[ + { + path: '/parent', + component: '~/pages/parent.vue', + name: 'parent', + children: [ + { + path: 'child', + component: '~/pages/parent/child.vue', + name: 'parent-child' + } + ] + } +] +``` + +Pour afficher le composant `child.vue`, il faut insérer le composant `<NuxtChild>` à l'intérieur de `pages/parent.vue`: + +```html{}[pages/parent.vue] +<template> + <div> + <h1>Je suis la view parent</h1> + <NuxtChild :foobar="123" /> + </div> +</template> +``` + +## keep-alive + +Les composants `<Nuxt>` et `<NuxtChild/>` acceptent tous les deux `keep-alive` et `keep-alive-props.` + +<base-alert type="info"> + +Pour en apprendre davantage sur `keep-alive` et `keep-alive-props`, se référer à la [documentation de Vue](https://vuejs.org/v2/api/#keep-alive). + +</base-alert> + +```html{}[layouts/default.vue] +<template> + <div> + <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'] }" /> + </div> +</template> + +<!-- le code du haut sera converti dans le code suivant --> +<div> + <keep-alive :exclude="['modal']"> + <RouterView /> + </keep-alive> +</div> +``` + +```html{}[pages/parent.vue] +<template> + <div> + <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" /> + </div> +</template> + +<!-- le code du haut sera converti dans le code suivant --> +<div> + <keep-alive :exclude="['modal']"> + <RouterView /> + </keep-alive> +</div> +``` + +Les composants `<NuxtChild>` peuvent aussi recevoir des propriétés comme n'importe quel composant standard de Vue. + +```html +<template> + <div> + <NuxtChild :key="$route.params.id" /> + </div> +</template> +``` + +Pour voir un exemple, on peut regarder celui sur les [routes imbriquées](https://nuxtjs.org/examples/nested-routes). + +<app-modal> + <code-sandbox :src="csb_link_nuxt"></code-sandbox> +</app-modal> + +## Le composant NuxtLink + +Pour naviguer entre les pages de notre application, il faut utiliser le composant `<NuxtLink>`. Ce composant est inclus dans Nuxt.js et nous n'avons donc pas besoin de l'importer comme un composant standard. Son fonctionnement est le même qu'une balise HTML `<a>` a l'exception qu'au lieu d'utiliser un `href="/about"` il faut utiliser `to="/about"`. Si nous avons déjà utilisé `vue-router` par le passé, nous pouvons voir `<NuxtLink>` comme un équivalent à `<RouterLink>`. + +Un simple lien vers la page `index.vue` dans notre répertoire `pages`: + +```html +<template> + <NuxtLink to="/">Page d'accueil</NuxtLink> +</template> +``` + +Le composant `<NuxtLink>` doit être utilisé pour tous les liens internes. Ce qui veut dire que tous les liens à l'intérieur de notre site doivent utiliser `<NuxtLink>`. La balise `<a>` doit être utilisée pour les liens externes (les sites web qui ne font pas partie de notre application). + +```html +<template> + <div> + <h1>Page d'accueil</h1> + <nuxt-link to="/about"> + À propos (lien interne à l'application Nuxt) + </nuxt-link> + <a href="https://nuxtjs.org">Lien externe vers une autre page</a> + </div> +</template> +``` + +<base-alert type="info"> + +Si nous voulons en savoir plus sur `RouterLink`, se référer à la [documentation du Routeur Vue](https://router.vuejs.org/api/#router-link). + +</base-alert> + +<base-alert type="info"> + +`<NuxtLink>` est utilise le [préfétching intelligent](/docs/2.x/features/nuxt-components#the-nuxtlink-component) par défaut. + +</base-alert> + +## prefetchLinks + +Nuxt.js fait du prefetching intelligent, il détecte si un lien est visible (soit dans le viewport, soit lors d'un défilement) et il prefetch le JavaScript pour ces pages pour qu'elles soient prêtes quand l'utilisateur clique sur le lien. Nuxt.js charge la ressource seulement quand le navigateur n'est pas occupé. Le prefetching n'a pas non plus lieu si l'utilisateur est hors-ligne ou qu'il est en connexion 2G. + +### Désactiver le prefetching pour des liens spécifiques + +Cependant, si notre page est lourde en JavaScript ou que nous avons beaucoup de pages différentes qui se retrouveraient à charger de nombreux scripts tiers, nous pouvons désactiver le prefetching sur certains de ces liens. Pour cela, nous pouvons utiliser la propriété `no-prefetch`. Depuis Nuxt.js v2.10.0, nous pouvons aussi définir la propriété `prefetch` à `false`. + +```html +<NuxtLink to="/about" no-prefetch>Page à propos non pré-fetchée</NuxtLink> +<NuxtLink to="/about" :prefetch="false">Page à propos non pré-fetchée</NuxtLink> +``` + +### Désactiver le prefetching de manière globale + +Pour désactiver le prefetching sur tous les liens, il faut passer `prefetchLinks` à `false`: + +```js{}[nuxt.config.js] +export default { + router: { + prefetchLinks: false + } +} +``` + +Depuis Nuxt.js v2.10.0, si nous avons passé `prefetchLinks` à `false` mais que nous souhaitons cependant prefetch un lien particulier, nous pouvons utiliser la propriété `prefetch`: + +```html +<NuxtLink to="/about" prefetch>Page à propos pré-fetchée</NuxtLink> +``` + +## linkActiveClass + +`linkActiveClass` marche de la même façon que la classe sur des liens actifs de `vue-router`. Si nous souhaitons montrer quels liens sont actifs, la seule chose que nous avons besoin de faire est de créer un peu de CSS pour la classe `nuxt-link-active`. + +```css +.nuxt-link-active { + color: red; +} +``` + +<base-alert> + +Ce CSS peut être ajouté au composant de navigation, dans une page spécifique, dans un layout ou dans le fichier `main.css`. + +</base-alert> + +Si nous souhaitons changer le nom de cette classe par autre chose, nous pouvons modifier `linkActiveClass` dans la propriété `router` à l'intérieur du fichier `nuxt.config.js`. + +```js +export default { + router: { + linkActiveClass: 'mon-super-lien-actif' + } +} +``` + +<base-alert type="info"> + +Cette option est donnée directement à la propriété `linkActiveClass` du `vue-router`, plus d'informations [ici](https://router.vuejs.org/api/#active-class). + +</base-alert> + +## linkExactActiveClass + +`linkExactActiveClass` marche exactement de la même façon que [`linkActiveClass`](#linkactiveclass) dans le cas d'une correspondance exacte de la route. + +```css +.nuxt-link-exact-active { + color: green; +} +``` + +La configuration dans le fichier `nuxt.config.js` se fait de la même façon. + +```js{}[nuxt.config.js] +export default { + router: { + linkExactActiveClass: 'mon-lien-exact-actif' + } +} +``` + +## linkPrefetchedClass + +`linkPrefetchedClass` va nous permettre d'ajouter des styles pour tous les liens qui ont été prefetch. C'est pratique pour tester tous les liens qui ont été prefetch après avoir modifié un comportement. `linkPrefetchedClass` est désactivé par défaut. Si nous souhaitons l'activer, il faut ajouter la propriété dans le fichier `nuxt.config.js`. + +```js{}[nuxt.config.js] +export default { + router: { + linkPrefetchedClass: 'lien-de-nuxt-prefetched' + } +} +``` + +Il suffit par la suite d'ajouter les styles pour cette classe. + +```css +.nuxt-link-prefetched { + color: orangeRed; +} +``` + +<base-alert type="info"> + +Comme nous avons pu le voir avec `lien-de-nuxt-prefetched`, le nom de la classe est totalement arbitraire. + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link_nuxt_link"></code-sandbox> +</app-modal> + +## Le composant côté-client seulement + +L'usage de ce composant force un composant a être render uniquement du côté client. Pour importer un composant seulement sur le client, il faut l'encapsuler dans un `client-only`. + +```html{}[pages/example.vue] +<template> + <div> + <sidebar /> + <client-only placeholder="Chargement..."> + <!-- ce composant sera render seulement du côté client --> + <comments></comments> + </client-only> + </div> +</template> +``` + +Utiliser un élément de substitution jusqu'à ce que le contenu du `<client-only />` ne soit monté sur le client. + +```html{}[pages/example.vue] +<template> + <div> + <sidebar /> + <client-only> + <!-- ce composant sera render seulement du côté client --> + <comments></comments> + + <!-- indicateur de chargement, render du côté serveur --> + <comments-placeholder slot="placeholder"></comments-placeholder> + </client-only> + </div> +</template> +``` + +<base-alert> + +Depuis Nuxt.js > v2.9.0, il faut utiliser `<client-only>` au lieu de `<no-ssr>`. + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/9.transitions.md b/nuxtjs.org/content/fr/0.docs/3.features/9.transitions.md new file mode 100644 index 000000000..d50d5fbb8 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/9.transitions.md @@ -0,0 +1,302 @@ +--- +title: Transitions +description: Nuxt.js utilise le composant `<transition>` pour permettre de créer de superbes transitions/animations entre nos routes. +position: 10 +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/05_transitions?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Pour définir une transition personnalisée pour une route spécifique, quel est la propriété qu'il faut ajouter à notre page ? + answers: + - pageTransition + - transition + - layoutTransition + correctAnswer: transition + - question: Quel est le mode de transition par défaut de Nuxt.js ? + answers: + - in-out + - out-in + - none + correctAnswer: out-in + - question: Quel est le nom par défaut de la transition pour les transitions de page ? + answers: + - .page + - .pages + - .page-transition + correctAnswer: .page + - question: Quel est le meilleur endroit pour ajouter nos classes de transition CSS afin que nous ayons des transitions globales sur toutes nos routes ? + answers: + - index.vue + - un fichier CSS global + - layouts/default.vue + correctAnswer: un fichier CSS global + - question: Dans quel tableau dans le fichier nuxt.config.js avons-nous besoin d'ajouter notre feuille de style globale ? + answers: + - 'css: []' + - 'styles: []' + - 'transitions: []' + correctAnswer: 'css: []' + - question: Quelle est la classe par défaut pour les transitions de layout ? + answers: + - layout + - layout-transition + - transition + correctAnswer: layout + - question: Dans le fichier nuxt.config.js, quelle est la propriété qu'il faut utiliser afin de configurer les paramètres par défaut pour les transitions de layout ? + answers: + - layout + - layoutTransition + - layoutTransitions + correctAnswer: layoutTransition + - question: Si l'on renomme le layout par défaut pour être appelé 'mon-layout', quelle classe faut-il utiliser pour créer les transitions CSS ? + answers: + - layout + - mon-layout + - monLayout + correctAnswer: mon-layout + - question: Dans le fichier nuxt.config.js, quelle est la propriété qu'il faut utiliser afin de configurer les paramètres par défaut pour les transitions de page ? + answers: + - page + - pageTransition + - layoutTransition + correctAnswer: pageTransition + - question: Où pouvons-nous modifier les paramètres par défaut pour les transitions de notre page ? + answers: + - main.css + - pages.vue + - nuxt.config.js + correctAnswer: nuxt.config.js +--- + +Nuxt.js utilise le composant [`<transition>`](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) pour permettre de créer de superbes transitions/animations entre nos routes. + +Pour définir une transition personnalisée pour une route spécifique, il faut ajouter la propriété `transition` au composant page. + +```js{}[pages/index.vue] +export default { + // peut être une chaîne de caractères + transition: '' + // ou un objet + transition: {} + // ou une fonction + transition (to, from) {} +} +``` + +## Chaîne de caractères + +Si la propriété `transition` est une chaîne de caractères, ce sera utilisé comme `transition.name`. + +```js{}[pages/index.vue] +export default { + transition: 'home' +} +``` + +Nuxt.js va utiliser ces paramètres pour configurer le composant comme suit: + +```html{}[pages/index.vue] +<transition name="home"></transition> +``` + +<base-alert> + +Ceci est fait automatiquement pour nous et nous n'avons pas besoin d'ajouter de composant `<transition>` à nos pages ou layouts. + +</base-alert> + +Maintenant, il ne nous reste plus qu'à créer la nouvelle classe pour nos transitions. + +```html{}[pages/index.vue] +<styles> + .home-enter-active, .home-leave-active { transition: opacity .5s; } + .home-enter, .home-leave-active { opacity: 0; } +</styles> +``` + +## Objet + +Si la propriété `transition` est un objet: + +```js{}[pages/index.vue] +export default { + transition: { + name: 'home', + mode: 'out-in' + } +} +``` + +Nuxt.js va utiliser ces paramètres pour configurer le composant comme suit: + +```html{}[pages/index.vue] +<transition name="test" mode="out-in"></transition> +``` + +L'objet `transition` peut avoir des propriétés telles que le nom, le mode, le CSS, la durée et encore tout plein d'autres ! La [documentation de Vue](https://vuejs.org/v2/guide/transitions.html) a plus d'informations sur ce sujet. On peut aussi définir des méthodes dans la propriété `transition` de la page. + +```js +export default { + transition: { + afterLeave(el) { + console.log('afterLeave', el) + } + } +} +``` + +### Mode de transition + +<base-alert> + +La mode de transition par défaut pour les pages diffère de celui de Vue.js. Ici, le mode par défaut est à `out-in`. Si l'on souhaite avoir des transitions d'entrée/sortie simultanées, il faudra changer le mode en lui attribuant une chaîne de caractères vide `mode: ''`. + +</base-alert> + +```js{}[pages/index.vue] +export default { + transition: { + name: 'home', + mode: '' + } +} +``` + +## Function + +Si la propriété `transition` est une fonction: + +```js{}[pages/index.vue] +export default { + transition(to, from) { + if (!from) { + return 'slide-left' + } + return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left' + } +} +``` + +Voici ce que cela va générer comme transitions: + +- `/` to `/posts` => `slide-left` +- `/posts` to `/posts?page=3` => `slide-left` +- `/posts?page=3` to `/posts?page=2` => `slide-right` + +## Paramètres globaux + +Le nom de la transition par défaut de Nuxt.js est `"page"`. Pour ajouter une transition d'estompage à chaque page de notre application, nous avons seulement besoin d'un fichier CSS qui est partagé entre toutes les routes. + +Notre fichier global CSS `assets/main.css`: + +```css{}[assets/main.css] +.page-enter-active, +.page-leave-active { + transition: opacity 0.5s; +} +.page-enter, +.page-leave-to { + opacity: 0; +} +``` + +Nous l'ajoutons à notre tableau CSS dans le fichier `nuxt.config.js`: + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/main.css'] +} +``` + +## Paramètres de configuration + +## La propriété layoutTransition + +`layoutTransition` est utilisée pour définir les propriétés par défaut pour les transitions du layout. + +Les paramètres par défaut sont: + +```js +{ + name: 'layout', + mode: 'out-in' +} +``` + +```js{}[assets/main.css] +.layout-enter-active, .layout-leave-active { + transition: opacity .5s +} +.layout-enter, .layout-leave-active { + opacity: 0 +} +``` + +Pour les changer, rendons-nous dans le fichier `nuxt.config.js`: + +```js{}[nuxt.config.js] +export default { + layoutTransition: 'mes-layouts' + // ou + layoutTransition: { + name: 'mes-layouts', + mode: 'out-in' + } +} +``` + +```css{}[assets/main.css] +.mes-layouts-enter-active, +.mes-layouts-leave-active { + transition: opacity 0.5s; +} +.mes-layouts-enter, +.mes-layouts-leave-active { + opacity: 0; +} +``` + +## La propriété pageTransition + +Les paramètres par défaut sont: + +```js +{ + name: 'page', + mode: 'out-in' +} +``` + +Pour les changer, rendons-nous dans le fichier `nuxt.config.js` + +```js{}[nuxt.config.js] +export default { + pageTransition: 'ma-page' + // ou + pageTransition: { + name: 'ma-page', + mode: 'out-in', + beforeEnter (el) { + console.log('Avant de rentrer...'); + } + } +} +``` + +Si l'on modifie `pageTransition`, il faudra faire attention à renommer les classes CSS qui vont avec. + +```css{}[assets/main.css] +.ma-page-enter-active, +.ma-page-leave-active { + transition: opacity 0.5s; +} +.ma-page-enter, +.ma-page-leave-to { + opacity: 0; +} +``` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/3.features/index.md b/nuxtjs.org/content/fr/0.docs/3.features/index.md new file mode 100644 index 000000000..d3008186b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/3.features/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/features/rendering-modes +--- diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/1.nuxt.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/1.nuxt.md new file mode 100644 index 000000000..4b9854522 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/1.nuxt.md @@ -0,0 +1,76 @@ +--- +title: .nuxt +description: Le répertoire `.nuxt` est le répertoire de build. Il est dynamiquement généré et caché du système de fichier par défaut. À l'intérieur du répertoire nous pouvons trouver des fichiers générés automatiquement en utilisant la commande `nuxt dev` ou bien nos artefacts de construction lorsque nous utilisons `nuxt build`. +position: 1 +category: directory-structure +questions: + - question: Quelle(s) commande(s) permet(tent) de générer le répertoire .nuxt ? + answers: + - nuxt start + - nuxt generate + - nuxt build or nuxt dev + correctAnswer: nuxt build ou nuxt dev + - question: Quelle propriété devons nous utiliser pour renommer le répertoire nuxt ? + answers: + - dir + - build + - buildDir + correctAnswer: buildDir + - question: Dans quel fichier pouvons nous trouver les routes générées ? + answers: + - pages.js + - router.js + - views.js + correctAnswer: router.js + - question: Que pouvons-nous trouver dans le répertoire des composants ? + answers: + - nuxt components + - custom components + - global components + correctAnswer: nuxt components + - question: Le répertoire `.nuxt` est le répertoire qui doit être mis en ligne lorsque nous déployons des sites statiques ? + answers: + - vrai + - faux + correctAnswer: faux +--- + +Le répertoire `.nuxt` est le répertoire de build. Il est dynamiquement généré et caché du système de fichier par défaut. À l'intérieur du répertoire nous pouvons trouver des fichiers générés automatiquement en utilisant la commande `nuxt dev` ou bien nos artefacts de construction lorsque nous utilisons `nuxt build`. La modification de ces fichiers est idéale pour le débogage mais rappelons-nous qu'il s'agit de fichiers générés et qu'une fois que nous exécuterons à nouveau la commande `dev` ou `build`, tout ce qui a été modifié ici sera écrasé. + +<base-alert> + +Le répertoire `.nuxt` ne doit pas être versionné par le système de contrôle de version (ex: git) et doit être ignoré via le `.gitignore` car il sera généré automatiquement lors de l'exécution de `nuxt dev` ou de `nuxt build`. + +</base-alert> + +### La propriété buildDir: + +Par défaut, de nombreux outils supposent que `.nuxt` est un répertoire caché car son nom commence par un point. Nous pouvons utiliser l'option buildDir dans `nuxt.config.js` pour éviter cela. Si nous changeons le nom n'oubliez pas d'ajouter le nouveau nom au fichier `.gitignore`. + +```js{}[nuxt.config.js] +export default { + buildDir: 'nuxt-dist' +} +``` + +### À l'intérieur du répertoire `.nuxt`: + +- Le fichier router.js est le fichier de routeur généré que Nuxt.js génère pour nous lorsque nous plaçons les fichiers `.vue` dans le répertoire pages. Nous pouvons utiliser ce fichier pour le débogage lorsque nous souhaitons rechercher les routes générées par `vue-router` et connaître les noms d'une route spécifique. +- Le fichier router.scrollBehavior.js qui est notre `Router ScrollBehavior` +- Le répertoire `components` contient tous les composants Nuxt tels que `NuxtChild` et `NuxtLink`. Il contient également l'indicateur `nuxt-build-indicator` qui est la page que nous voyons lorsque notre application est en cours de construction et `nuxt-loading` qui est notre composant de chargement qui est vu lorsque nous attendons le chargement de la page. Nous trouverons également la page d'erreur par défaut de Nuxt.js. +- Le répertoire `mixins` contient les fichiers nécessaires à la méthode Nuxt `$ fetch`. +- Le répertoire `views` contient notre modèle d'application et la page d'erreur du serveur. +- Le fichier `app.js` est le principal fichier de l'application. +- Le fichier `client.js` est le fichier nécessaire pour que tout ce qui se passe bien côté client. +- Le fichier vide est volontairement laissé vide pour les _noop aliases_. +- Le fichier `index.js` amorce notre application. +- Le `loading.html` est le fichier qui est utilisé lors du chargement de la page. +- Le fichier `middleware` est l'endroit où notre middleware est conservé. +- Le fichier `server.js` est tout le code exécuté sur le serveur. +- les _utilities_ contiennent les utilitaires dont Nuxt a besoin pour fonctionner. + +### Déploiement + +Le répertoire `.nuxt` fait partie des fichiers nécessaires au déploiement de notre application SSR. Cela n'est pas nécessaire pour déployer notre application statique Nuxt.js car nous utilisons le répertoire `dist` pour cela. + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/10.plugins.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/10.plugins.md new file mode 100644 index 000000000..b2fc51553 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/10.plugins.md @@ -0,0 +1,337 @@ +--- +title: plugins +description: Le répertoire `plugins` contient les plugins JavaScript que l'on souhaite exécuter avant l'instantiation de l'application principale Vue.js. +position: 11 +category: directory-structure +csb_link_plugins_client: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_client?fontsize=14&hidenavigation=1&theme=dark +csb_link_plugins_external: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_external?fontsize=14&hidenavigation=1&theme=dark +csb_link_plugins_custom: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_custom_plugin?fontsize=14&hidenavigation=1&theme=dark +csb_link_plugins_vue: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_vue?fontsize=14&hidenavigation=1&theme=dark +img: /guides/plugins.svg +imgAlt: modules-servermiddleware-plugins-in-nuxt-js +questions: + - question: The `plugins` directory contains your Javascript plugins that you want to run Le répertoire `plugins` contient les plugins JavaScript que l'on souhaite exécuter + answers: + - avant l'instantiation de l'application principale Vue.js + - pendant l'instantiation de l'application principale Vue.js + - après l'instantiation de l'application principale Vue.js + correctAnswer: avant l'instantiation de l'application principale Vue.js + - question: Les hooks Vue.js beforeCreate et created sont appelés + answers: + - uniquement côté client + - uniquement côté serveur + - côté client et serveur + correctAnswer: côté client et serveur + - question: À chaque fois que l'on souhaite utiliser Vue.use(), on devrait créer un fichier dans le répertoire + answers: + - vue + - plugins + - vuePlugins + correctAnswer: plugins + - question: Où ajoute-t-on le plugin afin qu'il soit importé dans notre application principale ? + answers: + - dans notre page layouts + - dans le fichier nuxt.config.js + - nous n'avons pas besoin de l'importer, c'est fait automatiquement + correctAnswer: dans le fichier nuxt.config.js + - question: Certains plugins ne devraient marcher que dans le navigateur + answers: + - true + - false + correctAnswer: true + - question: Quelle extension faut-il mettre si l'on souhaite que notre plugin s'exécute seulement côté serveur ? + answers: + - .serverside.js + - .ssr.js + - .server.js + correctAnswer: .server.js + - question: Quels sont les deux modes que l'on peut utiliser pour nos plugins ? + answers: + - server et client + - ssr et client + - server-side et client-side + correctAnswer: server et client + - question: Comment pouvons nous rendre nos fonctions/variables disponibles à travers toute notre application ? + answers: + - en créant un plugin + - en utilisant la méthode inject + - en créant un module + correctAnswer: en utilisant la méthode inject + - question: Quelle est la convention pour le préfixe des fonctions que l'on a injecté ? + answers: + - $ + - _ + - ':' + correctAnswer: $ + - question: Pour changer l'ordre des plugins, quelle propriété faut-il utiliser ? + answers: + - orderPlugins + - extendPlugins + - plugins + correctAnswer: extendPlugins +--- + +<app-modal :src="img" :alt="imgAlt"></app-modal> + +Le répertoire `plugins` contient les plugins JavaScript que l'on souhaite exécuter avant l'instantiation de l'application principale Vue.js. C'est ici que l'on peut ajouter des plugins Vue.js et injecter des fonctions/constantes. À chaque fois que l'on a besoin d'utiliser `Vue.use()`, on peut créer un fichier dans `plugins/` et ajouter son chemin à la propriété `plugins` dans le fichier `nuxt.config.js`. + +## Packages externes + +On pourrait avoir envie d'utiliser des packages/modules externes dans notre application (ex: [axios](https://axios.nuxtjs.org/)) pour faire des requêtes HTTP côté client et serveur. + +Premièrement, l'installer via npm ou Yarn. + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add @nuxtjs/axios +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install @nuxtjs/axios +``` + + </code-block> +</code-group> + +On peut par exemple configurer les intercepteurs d'axios pour réagir à de possibles erreurs lorsque l'on fait des appels à notre API et ce, à travers toute notre application. Dans l'exemple suivant, on redirige l'utilisateur sur une page d'erreur personnalisée appelée `sorry` lorsque l'on a une status d'erreur 500 de la part de notre API. + +```js{}[plugins/axios.js] +export default function ({ $axios, redirect }) { + $axios.onError(error => { + if (error.response.status === 500) { + redirect('/sorry') + } + }) +} +``` + +Il faut par la suite ajouter le module et les plugin fraîchement créé dans la configuration du projet. + +```js{}[nuxt.config.js] +module.exports = { + modules: ['@nuxtjs/axios'], + plugins: ['~/plugins/axios.js'] +} +``` + +Ensuite, on pourra l'utiliser directement dans nos composants page: + +```js{}[pages/index.vue] +<template> + <h1>{{ post.title }}</h1> +</template> + +<script> +export default { + async asyncData ({ $axios, params }) { + const post = await $axios.$get(`https://api.nuxtjs.dev/posts/${params.id}`) + return { post } + } +} +</script> +``` + +<app-modal> + <code-sandbox :src="csb_link_plugins_external"></code-sandbox> +</app-modal> + +## Plugins Vue + +Si on veut utiliser des plugins Vue.js, comme par exemple [v-tooltip](https://akryum.github.io/v-tooltip) pour afficher des tooltips dans notre application, nous avons besoin de configurer le plugin avant de lancer l'application. + +Commençons par l'installer + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add v-tooltip +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install v-tooltip +``` + + </code-block> +</code-group> + +Ensuite, créons le fichier `plugins/vue-tooltip.js` + +```js{}[plugins/vue-tooltip.js] +import Vue from 'vue' +import VTooltip from 'v-tooltip' + +Vue.use(VTooltip) +``` + +<app-modal> + <code-sandbox :src="csb_link_plugins_vue"></code-sandbox> +</app-modal> + +## La propriété plugins + +Ensuite nous pouvons ajouter le chemin du fichier à l'intérieur de la propriété `plugins` du fichier `nuxt.config.js`. La propriété `plugins` permet d'ajouter facilement des plugins Vue.js à notre application principale. Tous les chemins définis dans la propriété `plugins` seront importés avant d'initialiser l'application principale. + +```js{}[nuxt.config.js] +export default { + plugins: ['~/plugins/vue-tooltip.js'] +} +``` + +### Plugins ES6 + +Si le plugin est situé dans les `node_modules` et qu'il exporte un module en ES6, nous aurons besoin de l'ajouter à l'option de build `transpile`: + +```js{}[nuxt.config.js] +module.exports = { + build: { + transpile: ['vue-tooltip'] + } +} +``` + +Pour davantage d'informations sur les options, veuillez vous référer à la [configuration du build](/docs/2.x/configuration-glossary/configuration-build#transpile). + +## Côté client ou serveur seulement + +Certains plugins ne devraient marcher que dans le navigateur car ils n'auront pas de support SSR (Server Side Rendering). + +### Convention pour le nommage des plugins + +Si un plugin est voué à être exécuté seulement du côté client ou seulement du côté serveur, on peut appliquer une extension `.client.js` ou `.server.js` à l'extension du fichier du plugin. Le fichier sera automatiquement inclus du côté client ou serveur seulement (respectivement). + +```js{}[nuxt.config.js] +export default { + plugins: [ + '~/plugins/foo.client.js', // seulement du côté client + '~/plugins/bar.server.js', // seulement du côté serveur + '~/plugins/baz.js' // sur le serveur et sur le client + ] +} +``` + +### Syntaxe objet + +On peut aussi utiliser la syntaxe objet avec la propriété mode (`'client'`  ou `'server'`) dans `plugins`. + +```js{}[nuxt.config.js] +export default { + plugins: [ + { src: '~/plugins/client-only.js', mode: 'client' }, // seulement du côté client + { src: '~/plugins/server-only.js', mode: 'server' }, // seulement du côté serveur + { src: '~/plugins/both-sides.js' } // sur le serveur et sur le client + ] +} +``` + +<app-modal> + <code-sandbox :src="csb_link_plugins_client"></code-sandbox> +</app-modal> + +## Injection dans le `$root` et le `context` + +Parfois, on souhaiterai rendre des fonctions ou des variables accessibles dans l'intégralité de notre application. On peut injecter ces variables dans notre instance Vue (côté client), dans le `context` (côté serveur) et même dans le store Vuex. La convention pour le préfixe des fonctions que l'on a injecté est `$`. + +Nuxt.js nous fournit une méthode `inject(cle, valeur)` pour faire cela facilement. Le second paramètre donné à `inject` est la fonction que l'on souhaite exporter. Le `$` sera automatiquement préfixé à notre clé. + +<base-alert type="info"> + +Il est important de savoir que dans tout [lifecycle](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) d'une instance Vue, seulement les hooks `beforeCreate` et `created` seront appellés du côté client et serveur. Les hooks restants seront appellés seulement du côté client. + +</base-alert> + +```js{}[plugins/hello.js] +export default ({ app }, inject) => { + // Ceci injecte $hello(msg) dans Vue, dans le context et le store. + inject('hello', msg => console.log(`Hello ${msg}!`)) +} +``` + +```js{}[nuxt.config.js] +export default { + plugins: ['~/plugins/hello.js'] +} +``` + +Maintenant le service `$hello` est accessible depuis le `context` et `this` dans les pages, les composants, les plugins, et les actions du store. + +```js{}[example-component.vue] +export default { + mounted() { + this.$hello('mounted') + // Va console.log 'Hello mounted!' + }, + asyncData({ app, $hello }) { + $hello('asyncData') + // Si la version de Nuxt.js <= 2.12, il faut utiliser 👇 + app.$hello('asyncData') + } +} +``` + +```js{}[store/index.js] +export const state = () => ({ + someValue: '' +}) + +export const actions = { + setSomeValueToWhatever({ commit }) { + this.$hello('store action') + const newValue = 'whatever' + commit('changeSomeValue', newValue) + } +} +``` + +<base-alert> + +Il faut bien faire attention à ne pas utiliser `Vue.use()`, `Vue.component()` ou quoi que ce soit d'autre à l'**intérieur** de cette fonction dédiée à l'injection de Nuxt.js. Sinon, cela causerait des fuites de mémoire côté serveur. + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link_plugins_custom"></code-sandbox> +</app-modal> + +## La propriété extendPlugins + +On pourrait avoir envie de personnaliser les plugins ou changer l'ordre des plugins créé par Nuxt.js. Cette fonction accepte un tableau d'objets [plugins](/docs/2.x/configuration-glossary/configuration-plugins) et retourne la même chose, réarrangé. + +Un exemple de changement de l'ordre des plugins: + +```js{}[nuxt.config.js] +export default { + extendPlugins(plugins) { + const pluginIndex = plugins.findIndex( + ({ src }) => src === '~/plugins/shouldBeFirst.js' + ) + const shouldBeFirstPlugin = plugins[pluginIndex] + + plugins.splice(pluginIndex, 1) + plugins.unshift(shouldBeFirstPlugin) + + return plugins + } +} +``` + +### Mixins globaux + +Des mixins globaux peuvent être facilement ajoutés aux plugins de Nuxt.js mais peuvent causer des soucis et des fuites de mémoire s'ils sont mal gérés. À chaque fois que l'on ajoute un mixin global à l'application, if faut bien faire attention à lui passer un flag pour éviter de l'enregistrer plusieurs fois: + +```js{}[plugins/my-mixin-plugin.js] +if (!Vue.__my_mixin__) { + Vue.__my__mixin__ = true + Vue.mixin({ ... }) // On peut ensuite configurer le mixin +} +``` + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/11.static.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/11.static.md new file mode 100644 index 000000000..476057e78 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/11.static.md @@ -0,0 +1,89 @@ +--- +title: static +description: Le répertoire `static` est directement relié à la racine du serveur () et contient des fichiers qui ne seront probablement pas modifiés. Tous les fichiers inclus sont automatiquement servis par Nuxt et accessibles via l'URL racine de votre projet. +position: 12 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/13_static?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Dans quel répertoire devez-vous placer vos fichiers qui ne seront probablement pas modifiés comme par exemple la favicon ou le robots.txt ? + answers: + - assets + - static + - src + correctAnswer: static + - question: Ce répertoire peut être facilement renommé sans aucune configuration + answers: + - vrai + - faux + correctAnswer: faux + - question: Où devez-vous mettre vos images si vous voulez que webpack les rassemble ? + answers: + - static + - assets + - src + correctAnswer: assets + - question: Tout ce qui se trouve dans le répertoire `static` est relatif au répertoire racine + answers: + - vrai + - faux + correctAnswer: vrai + - question: Vous pouvez configurer le comportement du répertoire `static` dans le fichier nuxt.config.js + answers: + - vrai + - faux + correctAnswer: vrai +--- + +Le répertoire `static` est directement relié à la racine du serveur () et contient des fichiers qui ne seront probablement pas modifiés. Tous les fichiers inclus sont automatiquement servis par Nuxt et accessibles via l'URL racine de votre projet. + +`/static/robots.txt` sera disponible à l'adresse `http://localhost:3000/robots.txt` + +`/static/favicon.ico` sera disponible à l'adresse `http://localhost:3000/favicon.ico` + +Cette option est utile pour les fichiers tels que `robots.txt`, `sitemap.xml` ou `CNAME` (qui est important pour le déploiement des pages sur GitHub). + +<base-alert> + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +</base-alert> + +## Ressources statique + +Si vous ne souhaitez pas utiliser les ressources Webpack du répertoire `assets`, vous pouvez ajouter les images dans le répertoire `static`. + +Dans votre code, vous pouvez alors référencer ces fichiers par rapport à la racine (`/`) : + +```html +<!-- Image statique du répertoire `static` --> +<img src="/mon-image.png" /> + +<!-- Image webpacked du répertoire `assets` --> +<img src="@/assets/mon-image-2.png" /> +``` + +## Configuration du répertoire `static` + +Si vous en avez besoin, vous pouvez configurer le comportement du répertoire `static/` dans le fichier `nuxt.config.js`. + +### Préfixe des ressources statique + +Si nous déployons Nuxt.js dans un sous-répertoire, par exemple `/blog/`, la base du routeur sera ajoutée par défaut au chemin de la ressource statique. Si nous voulons désactiver ce comportement, vous pouvez mettre `static.prefix` à `false` dans le `nuxt.config.js`. + +```js +export default { + static: { + prefix: false + } +} +``` + +Par défaut : `/blog/mon-image.png` + +Avec `static.prefix` désactivé : `/mon-image.png` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/12.store.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/12.store.md new file mode 100644 index 000000000..82ad265a3 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/12.store.md @@ -0,0 +1,287 @@ +--- +title: store +description: Le répertoire `store` contient vos fichiers Store pour Vuex. Le Store Vuex est livré avec Nuxt.js mais désactivé par défaut. La création d'un fichier `index.js` dans ce répertoire active le store. +position: 13 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/14_store?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Comment activer le store ? + answers: + - Il est activé par défaut + - créer un fichier js dans le répertoire store + - ajouter `store:true` au fichier nuxt.config.js + correctAnswer: créer un fichier js dans le répertoire store + - question: Chaque fichier .js dans le répertoire store est transformé en un + answers: + - plugin + - module + - fonction + correctAnswer: module + - question: Dans store, vous devez exporter `state` comme + answers: + - une fonction + - un objet + - une chaine de caractères + correctAnswer: une fonction + - question: Dans store, vous devez exporter les mutations et les actions comme + answers: + - une fonction + - un objet + - une chaine de caractères + correctAnswer: un objet + - question: Vous pouvez ajouter des plugins dans store + answers: + - vrai + - faux + correctAnswer: vrai + - question: La méthode `fetch` est utilisée pour remplir le store + answers: + - avant le rendu de la page + - pendant le rendu de la page + - après le rendu de la page + correctAnswer: avant le rendu de la page + - question: Que pouvez-vous utiliser lorsque vous avez des données sur le serveur que vous voulez donner directement au côté client ? + answers: + - nuxtServerInit + - fetch + - asyncData + correctAnswer: nuxtServerInit + - question: Dans asynData, le contexte est donné au nuxtServerInit en tant que + answers: + - premier argument + - deuxième argument + - troisième argument + correctAnswer: deuxième argument +--- + +Le répertoire `store` contient vos fichiers Store pour [Vuex](http://vuex.vuejs.org/en/). Le Store Vuex est livré avec Nuxt.js mais désactivé par défaut. La création d'un fichier `index.js` dans ce répertoire active le store. + +<base-alert> + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +</base-alert> + +L'utilisation du store pour gérer l'état est importante pour toute grande application. C'est pourquoi Nuxt.js implémente Vuex dans son noyau. + +## Activer le Store + +Nuxt.js recherchera le répertoire `store`, s'il existe, il fera : + +1. L'importation de Vuex +2. L'ajout de l'option `store` à la racine de l'instance Vue. + +## Modules + +Chaque fichier `.js` dans le répertoire `store` est transformé en [namespaced module](http://vuex.vuejs.org/en/modules.html) (`index` étant le module racine). L'état `state` doit toujours être une fonction pour éviter les états _partagés_ non désirés du côté du serveur. + +Pour commencer, exportez l'état `state` en tant que fonction, et les mutations et actions en tant qu'objets. + +```js{}[store/index.js] +export const state = () => ({ + counter: 0 +}) + +export const mutations = { + increment(state) { + state.counter++ + } +} +``` + +Ensuite, vous pouvez avoir un fichier `store/todos.js` : + +```js{}[store/todos.js] +export const state = () => ({ + list: [] +}) + +export const mutations = { + add(state, text) { + state.list.push({ + text, + done: false + }) + }, + remove(state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle(todo) { + todo.done = !todo.done + } +} +``` + +Le store sera créé en tant que tel : + +```js +new Vuex.Store({ + state: () => ({ + counter: 0 + }), + mutations: { + increment(state) { + state.counter++ + } + }, + modules: { + todos: { + namespaced: true, + state: () => ({ + list: [] + }), + mutations: { + add(state, { text }) { + state.list.push({ + text, + done: false + }) + }, + remove(state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle(state, { todo }) { + todo.done = !todo.done + } + } + } + } +}) +``` + +Et dans votre `pages/todos.vue`, en utilisant le module `todos` : + +```js{}[pages/todos.vue] +<template> + <ul> + <li v-for="todo in todos" :key="todo.text"> + <input :checked="todo.done" @change="toggle(todo)" type="checkbox"> + <span :class="{ done: todo.done }">{{ todo.text }}</span> + </li> + <li><input @keyup.enter="addTodo" placeholder="Que faut-il faire ?"></li> + </ul> +</template> + +<script> +import { mapMutations } from 'vuex' + +export default { + computed: { + todos () { + return this.$store.state.todos.list + } + }, + methods: { + addTodo (e) { + this.$store.commit('todos/add', e.target.value) + e.target.value = '' + }, + ...mapMutations({ + toggle: 'todos/toggle' + }) + } +} +</script> + +<style> +.done { + text-decoration: line-through; +} +</style> +``` + +La méthode des modules fonctionne également pour les définitions de haut niveau sans implémenter un sous-répertoire dans le répertoire `store`. + +Exemple pour l'état `state` : nous créons un fichier `store/state.js` et nous ajoutons ce qui suit. + +```js +export default () => ({ + counter: 0 +}) +``` + +Et les mutations correspondantes peuvent se trouver dans le fichier `store/mutations.js`. + +```js{}[store/mutations.js] +export default { + increment(state) { + state.counter++ + } +} +``` + +## Plugins dans le Store + +Vous pouvez ajouter des plugins supplémentaires au store en les plaçant dans le fichier `store/index.js` : + +```js{}[store/index.js] +import monPlugin from 'monPlugin' + +export const plugins = [monPlugin] + +export const state = () => ({ + counter: 0 +}) + +export const mutations = { + increment(state) { + state.counter++ + } +} +``` + +Plus d'informations sur les plugins : [Documentation Vuex](https://vuex.vuejs.org/fr/guide/plugins.html). + +## L'action nuxtServerInit + +Si l'action `nuxtServerInit` est définie dans le store et que le mode est `universal`, alors Nuxt.js l'appellera avec le contexte (uniquement du côté du serveur). C'est utile lorsque nous avons des données sur le serveur à passer directement au côté client. + +Par exemple, disons que nous avons des sessions côté serveur et que nous pouvons accéder à l'utilisateur connecté par l'intermédiaire de `req.session.user`. Pour donner l'utilisateur authentifié à notre store, nous mettons à jour notre `store/index.js` comme suit : + +```js{}[store/index.js] +actions: { + nuxtServerInit ({ commit }, { req }) { + if (req.session.user) { + commit('user', req.session.user) + } + } +} +``` + +<base-alert> + +Seul le module principal (dans `store/index.js`) recevra cette action. Vous devrez enchaîner vos actions de module à partir de là. + +</base-alert> + +Le [contexte](/docs/2.x/concepts/context-helpers) est donné à `nuxtServerInit` comme 2ème argument dans la méthode `asyncData`. + +Si `nuxt generate` est lancé, `nuxtServerInit` sera exécuté pour chaque route dynamique générée. + +<base-alert type="info"> + +Les actions asynchrones `nuxtServerInit` doivent retourner une Promesse ou utiliser `async/await` pour permettre au serveur nuxt de les attendre. + +</base-alert> + +```js{}[store/index.js] +actions: { + async nuxtServerInit({ dispatch }) { + await dispatch('core/load') + } +} +``` + +## Vuex Strict Mode + +Le mode strict est activé par défaut en mode développement et désactivé en mode production. Pour désactiver le mode strict en dev, suivez l'exemple ci-dessous dans `store/index.js` : + +```js +export const strict = false +``` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/13.nuxt-config.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/13.nuxt-config.md new file mode 100644 index 000000000..16e4e2c4a --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/13.nuxt-config.md @@ -0,0 +1,352 @@ +--- +title: nuxt.config +description: Par défaut, Nuxt.js est configuré de sorte à pouvoir couvrir la plupart des cas. Cette configuration peut être écrasée grâce au fichier nuxt.config.js. +position: 14 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/15_nuxt-config?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: + answers: + - + - + - + correctAnswer: + - question: + answers: + - + - + - + correctAnswer: + - question: + answers: + - + - + - + correctAnswer: + - question: + answers: + - + - + - + correctAnswer: +--- + +Par défaut, Nuxt.js est configuré de sorte à pouvoir couvrir la plupart des cas. Cette configuration peut être écrasée grâce au fichier nuxt.config.js. + +## nuxt.config.js + +### build + +Cette option permet de configurer différents paramètres lors de l'étape de build, cela inclus les `loaders`, les `noms de fichiers`, la `configuration Webpack` ainsi que la `transpilation`. + +```js{}[nuxt.config.js] +export default { + build: { + /* + ** On peut personnaliser la configuration de Webpack ici + */ + extend(config, ctx) {} + } +} +``` + +<base-alert type="next"> + +Se référer à la propriété [build](/docs/2.x/configuration-glossary/configuration-build). + +</base-alert> + +### css + +Cette option permet de définir les fichiers CSS, les modules et les librairies que l'on veut inclure globalement (sur chaque page). + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/css/main.css', '~/assets/css/animations.scss'] +} +``` + +On peut omettre l'extension pour les fichiers CSS/SCSS/Postcss/Less/Stylus/... listés dans le tableau css du fichier `nuxt.config.js`. + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/css/main', '~/assets/css/animations'] +} +``` + +En omettant l'extension, cela nous permet de ne pas avoir à renommer le fichier si jamais on décide de le passer du CSS au SASS. + +<base-alert type="next"> + +Se référer à la propriété [css](/docs/2.x/configuration-glossary/configuration-css). + +</base-alert> + +### dev + +Cette option permet de définir le mode `development` ou `production` de Nuxt.js (utile lorsque l'on veut utiliser Nuxt.js de façon programmatique). + +```js{}[nuxt.config.js] +export default { + dev: process.env.NODE_ENV !== 'production' +} +``` + +<base-alert type="next"> + +Se référer à la propriété [dev](/docs/2.x/configuration-glossary/configuration-dev). + +</base-alert> + +### env + +Cette option permet de définir des variables d'environment qui seront disponibles côté client mais aussi serveur. + +```js{}[nuxt.config.js] +export default { + env: { + baseUrl: process.env.BASE_URL || baseUrl + } +} +``` + +<base-alert type="next"> + +Se référer à la propriété [env](/docs/2.x/configuration-glossary/configuration-env). + +</base-alert> + +### generate + +Cette option permet de définir les paramètres pour chaque route dynamique de l'application, ces derniers seront transformés en fichiers HTML par Nuxt.js. + +```js{}[nuxt.config.js] +export default { + generate: { + dir: 'gh_pages', // gh_pages/ au lieu de dist/ + subFolders: false // les fichiers HTML sont générés en fonction du chemin de la route + } +} +``` + +<base-alert type="next"> + +Se référer à la propriété [generate](/docs/2.x/configuration-glossary/configuration-generate). + +</base-alert> + +### head + +```js{}[nuxt.config.js] +export default { + head: { + title: 'my title', + meta: [ + { charset: 'utf-8' }, + ..... + ] + } +} +``` + +Cette option permet de définir toutes les balises méta par défaut pour l'application. + +<base-alert type="next"> + +Se référer à la propriété [head](/docs/2.x/configuration-glossary/configuration-head). + +</base-alert> + +### loading + +Cette option permet de personnaliser le composant de chargement que Nuxt.js utilise par défaut. + +```js{}[nuxt.config.js] +export default { + loading: { + color: '#fff' + } +} +``` + +<base-alert type="next"> + +Se référer à l'intégration du [chargement](/docs/2.x/configuration-glossary/configuration-loading). + +</base-alert> + +### modules + +Cette option permet d'ajouter des modules Nuxt.js au projet. + +```js{}[nuxt.config.js] +export default { + modules: ['@nuxtjs/axios'] +} +``` + +<base-alert type="next"> + +Se référer à la propriété [modules](/docs/2.x/configuration-glossary/configuration-modules). + +</base-alert> + +### modulesDir + +Cette propriété est utilisée pour définir les répertoires des modules afin de déterminer le chemin de résolution. Par ex: le `resolveLoading`, ` nodeExternals` et `postcss` de Webpack. Le chemin de la configuration est relatif par rapport à `options.rootDir` (par défaut: process.cwd()). + +```js{}[nuxt.config.js] +export default { + modulesDir: ['../../node_modules'] +} +``` + +Adapter cet emplacement peut être nécessaire si le projet est organisé en tant que workspace Yarn avec un mono-repo. + +<base-alert type="next"> + +Se référer à la propriété [modulesDir](/docs/2.x/configuration-glossary/configuration-modulesdir). + +</base-alert> + +### plugins + +Cette option permet de définir les plugins JavaScript qui devraient s'exécuter avant l'instanciation de l'application Vue.js principale. + +```js{}[nuxt.config.js] +export default { + plugins: ['~/plugins/url-helpers.js'] +} +``` + +<base-alert type="next"> + +Se référer à la propriété [plugins](/docs/2.x/configuration-glossary/configuration-plugins). + +</base-alert> + +### router + +Avec l'option `router`, on peut écraser la configuration de Nuxt.js par défaut pour le routeur de Vue.js. + +```js{}[nuxt.config.js] +export default { + router: { + linkExactActiveClass: 'text-primary' + } +} +``` + +<base-alert type="next"> + +Se référer à la propriété [router](/docs/2.x/configuration-glossary/configuration-router). + +</base-alert> + +### server + +Cette option permet de configurer des variables de connexion pour l'instance du serveur de l'application Nuxt.js. + +```js{}[nuxt.config.js] +import path from 'path' +import fs from 'fs' + +export default { + server: { + https: { + key: fs.readFileSync(path.resolve(__dirname, 'server.key')), + cert: fs.readFileSync(path.resolve(__dirname, 'server.crt')) + } + } +} +``` + +<base-alert type="next"> + +Se référer à la propriété [server](/docs/2.x/configuration-glossary/configuration-server). + +</base-alert> + +### srcDir + +Cette option permet de définir le répertoire source de l'application Nuxt.js. + +```js{}[nuxt.config.js] +export default { + srcDir: 'client/' +} +``` + +Exemple de la structure du projet de l'application Nuxt.js avec le répertoire `client`: + +```bash +**-| app/ +---| node_modules/ +---| nuxt.config.js +---| package.json +---| client/ +------| assets/ +------| components/ +------| layouts/ +------| middleware/ +------| pages/ +------| plugins/ +------| static/ +------| store/** +``` + +### dir + +Cette option permet de définir des noms personnalisés pour les répertoires de l'application Nuxt.js. + +```js{}[nuxt.config.js] +export default { + pages: 'views' // Nuxt.js va chercher les pages dans le répertoire views/ et non pages/ +} +``` + +<base-alert type="next"> + +Se référer à la propriété [dir](/docs/2.x/configuration-glossary/configuration-dir). + +</base-alert> + +### pageTransition + +Cette option permet de définir les propriétés par défaut pour les transitions de page. + +```js{}[nuxt.config.js] +export default { + pageTransition: 'page' +} +``` + +<base-alert type="next"> + +Se référer à la propriété [transition](/docs/2.x/configuration-glossary/configuration-transition). + +</base-alert> + +## Autres fichiers de configuration + +Outre le fichier `nuxt.config.js`, il peut y avoir d'autres fichiers de configuration à la racine du projet, tels que [.eslintrc](https://eslint.org/), [prettier.config.json](https://prettier.io/) ou [.gitignore](https://git-scm.com/docs/gitignore). Ces derniers sont utilisés pour configurer des outils tels que le linter, le formateur de code ou votre repository Git, ils sont donc décorrélés du fichier `nuxt.config.js`. + +### .gitignore + +Dans le fichier `.gitignore`, il faudra ajouter les entrées qui suivent afin qu'elles soient ignorées du système de contrôle de version. `node_modules` où tous les modules sont installés. Le répertoire `nuxt` qui est créé lorsque l'on lance les commandes `dev` ou `build`. Le répertoire `dist` qui est créé lorsque l'on lance la commande `generate`. + +```markdown{}[.gitignore] +node_modules .nuxt dist +``` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +### Et maintenant ? + +<base-alert type="next"> + +Se référer au [glossaire de configuration](/docs/2.x/configuration-glossary/configuration-build). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/2.assets.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/2.assets.md new file mode 100644 index 000000000..f2f6c3c5d --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/2.assets.md @@ -0,0 +1,287 @@ +--- +title: assets +description: Le répertoire `assets` contient les ressources comme des fichiers Stylus, du SASS, des images ou des polices de caractères. +position: 2 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/02_assets?fontsize=14&hidenavigation=1&theme=dark +videoScript: + - assets-video.md +questions: + - question: Quel répertoire contient les ressources comme des fichiers Stylus, du SASS, des images ou des polices de caractères ? + answers: + - static + - assets + - pages + correctAnswer: assets + - question: Lorsque l'on est dans un template vue, qu'utilise t-on pour avoir accès au répertoire de ressources ? + answers: + - '/assets/notre_image.png' + - '@assets/notre_image.png' + - '@/assets/notre_image.png' + correctAnswer: '@/assets/notre_image.png' + - question: Lorsque l'on est dans un fichier CSS, qu'utilise t-on pour avoir accès au répertoire de ressources ? + answers: + - url("@assets/banniere.svg") + - url("assets/banniere.svg") + - url("@/assets/banniere.svg") + correctAnswer: url("@assets/banniere.svg") + - question: Où importe t-on les feuilles de style CSS globales ? + answers: + - dans le fichier index.vue + - dans le fichier nuxt.config.js + - dans le fichier du layout par défaut + correctAnswer: dans le fichier nuxt.config.js + - question: Quelle propriété est utilisée pour importer une police de caractères de manière globale ? + answers: + - font + - head + - css + correctAnswer: head + - question: Quel loader permet d'encoder un fichier en URL de base-64 ? + answers: + - file-loader + - url-loader + - image-loader + correctAnswer: url-loader + - question: Quel est l'alias pour le répertoire des sources ? + answers: + - '@' + - '@@' + - '^' + correctAnswer: '@' + - question: Quel est l'alias pour le répertoire racine ? + answers: + - '@' + - '@@' + - '@root' + correctAnswer: '@@' +--- + +Le répertoire `assets` contient les ressources comme des fichiers Stylus, du SASS, des images ou des polices de caractères. + +## Images: + +À l'intérieur de nos templates `vue`, si nous avons besoin de faire un lien vers notre répertoire `assets` (ressources), il faut utiliser `~/assets/notre_image.png` (avec un slash avant les `assets`). + +```html +<template> + <img src="~/assets/notre_image.png" /> +</template> +``` + +À l'intérieur de nos fichiers `CSS`, si nous avons besoin de faire un lien vers notre répertoire `assets` (ressources), il faut utiliser `~/assets/banniere.svg` (sans le slash). + +```css +background: url('~assets/banniere.svg'); +``` + +Si l'on travaille avec des images dynamiques, on aura besoin d'utiliser `require`. + +```html +<img :src="require(`~/assets/img/${image}.jpg`)" /> +``` + +<base-alert type="next"> + +Voir les [ressources webpack](/docs/2.x/directory-structure/assets#webpack-assets). + +</base-alert> + +## Styles: + +Nuxt.js nous permet de définir les fichiers/modules/librairies CSS que nous souhaitons utiliser de manière globale (dans chaque page). Dans le fichier de config `nuxt.config.js`, on peut spécifier cela grâce à la propriété `css`: + +```js{}[nuxt.config.js] +export default { + css: [ + // charge un module Node.js directement (ici un fichier SASS) + 'bulma', + // un fichier CSS dans le projet + '~/assets/css/main.css', + // un fichier SCSS dans le projet + '~/assets/css/main.scss' + ] +} +``` + +<base-alert type="info"> + +Dans le cas où l'on veut utiliser `SASS`, il faut bien faire attention à installer les packages `node-sass` et `sass-loader`. + +</base-alert> + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add -D node-sass sass-loader +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install --save-dev node-sass sass-loader +``` + + </code-block> +</code-group> + +Nuxt.js va automatiquement deviner le type de fichier grâce à son extension et utiliser le loader webpack approprié pour le pré-processeur. Nous aurons cependant besoin d'installer le loader requis si nous avons besoin de l'utiliser. + +## Fonts: + +On peut utiliser des polices de caractères locales en les ajoutant dans le répertoire des ressources. Une fois ajoutées, on peut y avoir accès dans notre CSS en utilisant `@font-face`. + +``` +-| assets +----| fonts +------| DMSans-Regular.ttf +------| DMSans-Bold.ttf +``` + +```css{}[assets/main.css] +@font-face { + font-family: 'DM Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('~assets/fonts/DMSans-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'DM Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('~assets/fonts/DMSans-Bold.ttf') format('truetype'); +} +``` + +<base-alert type="info">Les fichiers CSS ne sont pas chargés automatiquement. Ajoutez-les en utilisant la [propriété css](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-css/).</base-alert> + +<base-alert type="next"> + +Pour ajouter des polices de caractères externes telles que des Google Fonts, se référer le chapitre sur le [SEO et les méta tags](/docs/2.x/features/meta-tags-seo#external-resources). + +</base-alert> + +## Ressources de Webpack + +Par défaut, Nuxt.js utilise les `vue-loader`, `file-loader` et `url-loader` de Webpack pour délivrer les ressources. On peut aussi utiliser le répertoire statique pour les ressources, ce dernier ne doit cependant pas passer par Webpack. + +## Webpack + +Le compilateur de templates de Vue s'occupe de process le style (avec `css-loader`) et les fichiers de templates (grâce à [`vue-loader`](http://vue-loader.vuejs.org/)). Durant ce processus, toutes les URL des ressources telles que `<img src="...">`, `background: url(...)` et les `@import` CSS sont résolues en tant que dépendances de modules. + +Par exemple, avec cette arborescence de fichiers: + +``` +-| assets/ +----| image.png +-| pages/ +----| index.vue +``` + +Si dans notre CSS, on utilise `url('~assets/image.png')`, ceci sera traduit en `require('~/assets/image.png')`. + +<base-alert> + +L'alias `~/` ne sera pas résolu correctement dans les fichiers CSS. Il faut bien utiliser `~assets` (**sans le slash**) dans les références CSS `url`, ex: `background: url("~assets/banniere.svg")`. + +</base-alert> + +Si on référence cette image dans notre fichier `pages/index.vue`: + +```html{}[pages/index.vue] +<template> + <img src="~/assets/image.png" /> +</template> +``` + +Ce sera compilé en: + +```js +createElement('img', { attrs: { src: require('~/assets/image.png') } }) +``` + +Parce que `.png` n'est pas un fichier JavaScript, Nuxt.js s'occupe tout seul de demander à Webpack d'utiliser [file-loader](https://github.com/webpack/file-loader) et [url-loader](https://github.com/webpack/url-loader) pour s'occuper de ce format. + +Les bénéfices de ces loaders sont les suivants: + +`file-loader` s'occupe de définir où copier et placer la ressource, ainsi que comment la nommer en utilisant des hash pour une meilleure mise en cache. En production, on pourra bénéficier d'une mise en cache sur le long terme par défaut ! + +`url-loader` permet de transformer un fichier en une seule ligne de data URL encodé en base-64 s'il est en dessous d'un certain seuil. Ceci permet de réduire le nombre de requêtes HTTP pour des fichiers anodins. Si la taille du fichier est plus grosse que le seuil fixé, il va utiliser `file-loader` en solution de repli. + +Pour ces deux loaders, la configuration par défaut est la suivante: + +```js +// https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L297-L316 +;[ + { + test: /\.(png|jpe?g|gif|svg|webp)$/, + loader: 'url-loader', + query: { + limit: 1000, // 1kB + name: 'img/[name].[hash:7].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 1000, // 1kB + name: 'fonts/[name].[hash:7].[ext]' + } + } +] +``` + +Ce qui veut dire que n'importe quel fichier en dessous de 1 Ko sera mis sur une seule ligne de data URL encodé en base-64. Autrement, l'image/police de caractères sera copiée dans le répertoire correspondant (à l'intérieur du répertoire `.nuxt`) avec un nom comprenant le hash d'une version pour une meilleure mise en cache. + +Lorsqu'on lancera l'application `nuxt` avec un template tel que `pages/index.vue`: + +```html{}[pages/index.vue] +<template> + <img src="@/assets/notre_image.png" /> +</template> +``` + +Cela sera transformé en: + +```html +<img src="/_nuxt/img/notre_image.0c61159.png" /> +``` + +Si on souhaite changer la configuration d'un des loaders, on trouvera plus de détails à la page de [`build.extend`](/docs/2.x/configuration-glossary/configuration-build#extend). + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +## Les Alias + +Par défaut le répertoire des sources (`srcDir`) et le répertoire racine (`rootDir`) sont les mêmes. On peut utiliser l'alias `~` pour le répertoire des sources. Au lieu d'écrire des chemins relatifs tels que `../assets/notre_image.png`, on peut écrire `~/assets/notre_image.png` à la place. + +Les deux donneront le même résultat. + +```html{}[components/Avatar.vue] +<template> + <div> + <img src="../assets/notre_image.png" /> + <img src="~/assets/notre_image.png" /> + </div> +</template> +``` + +Nous recommandons l'usage de `~` en tant qu'alias. `@` est toujours supporté mais il ne marchera pas dans certains cas tel que les images de background dans le CSS. + +On peut utiliser `~~` ou `@@` pour le répertoire racine. + +<base-alert type="info"> + +Astuce: Pour avoir accès à `~` sur un clavier espagnol, il faut utiliser `Option` + `ñ` sur Mac OS ou (`Alt gr` + `4`) sur Windows. + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/3.components.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/3.components.md new file mode 100644 index 000000000..9631dae56 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/3.components.md @@ -0,0 +1,209 @@ +--- +title: components +description: Le répertoire des composants contient les composants Vue.js. Les composants sont les éléments qui constituent les différentes parties d'une page et peuvent être réutilisés et importés dans des pages, layouts ou même d'autres composants. +position: 3 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/03_components?fontsize=14&hidenavigation=1&theme=dark +img: /guides/components.png +imgAlt: nuxt components module +questions: + - question: + answers: + - + - + - + correctAnswer: + - question: + answers: + - + - + - + correctAnswer: + - question: + answers: + - + - + - + correctAnswer: + - question: + answers: + - + - + - + correctAnswer: +--- + +Le répertoire des composants contient les composants Vue.js. Les composants sont les éléments qui constituent les différentes parties d'une page et peuvent être réutilisés et importés dans des pages, layouts ou même d'autres composants. + +### Récupérer de la data + +Pour récupérer de la data depuis une API de manière asynchrone dans les composants, on peut utiliser le hook [`fetch()`](/docs/2.x/features/data-fetching#the-fetch-method) de Nuxt.js. + +En utilisant `$fetchState.pending`, on peut afficher un message pendant le chargement de la data. En utilisant `$fetchState.error`, on peut afficher un message d'erreur s'il y a une erreur lors de la récupération des données. Lorsque l'on utilise `fetch`, il faut définir la data dans la propriété `data`, celle-ci sera par la suite remplie une fois que les données auront été récoltées. + +```html{}[components/MountainsList.vue] +<template> + <div> + <p v-if="$fetchState.pending">Chargement....</p> + <p v-else-if="$fetchState.error"> + Erreur lors de la récupération des montagnes + </p> + <ul v-else> + <li v-for="(mountain, index) in mountains" :key="index"> + {{ mountain.title }} + </li> + </ul> + </div> +</template> +<script> + export default { + data() { + return { + mountains: [] + } + }, + async fetch() { + this.mountains = await fetch( + 'https://api.nuxtjs.dev/mountains' + ).then(res => res.json()) + } + } +</script> +``` + +<base-alert type="next"> + +Se référer au chapitre sur [fetch()](/docs/2.x/features/data-fetching#the-fetch-method) pour avoir davantage d'informations sur son fonctionnement. + +</base-alert> + +## Découverte des composants + +<app-modal :src="img" :alt="imgAlt"></app-modal> + +À partir de la version `2.13`, Nuxt.js peut automatiquement importer les composants lorsqu'ils sont utilisés dans les templates. Pour activer cette feature, il suffit de définir `components: true` dans le fichier de configuration: + +```js{}[nuxt.config.js] +export default { + components: true +} +``` + +Ainsi, lors de la création de composants dans le répertoire `components`, ils seront importés et directement disponibles. + +```bash +components/ + TheHeader.vue + TheFooter.vue +``` + +```html{}[layouts/default.vue] +<template> + <div> + <TheHeader /> + <Nuxt /> + <TheFooter /> + </div> +</template> +``` + +### Imports dynamiques + +Pour importer dynamiquement un composant - le "lazy load" (le charger paresseusement) - il suffit juste de le préfixer par un `Lazy` dans les templates. + +```html{}[layouts/default.vue] +<template> + <div> + <TheHeader /> + <Nuxt /> + <LazyTheFooter /> + </div> +</template> +``` + +Utiliser le préfixe `Lazy` permet aussi d'importer dynamiquement un composant lorsqu'un évènement est déclenché. + +```html{}[pages/index.vue] +<template> + <div> + <h1>Montagnes</h1> + <LazyMountainsList v-if="show" /> + <button v-if="!show" @click="showList">Montrer la liste</button> + </div> +</template> + +<script> + export default { + data() { + return { + show: false + } + }, + methods: { + showList() { + this.show = true + } + } + } +</script> +``` + +### Répertoires imbriqués + +Si on a des composants dans des répertoires imbriqués comme ceci: + +```bash +components/ + base/ + Button.vue +``` + +Le nom du composant sera basé sur le nom du fichier, ainsi le composant sera: + +```html +<button /> +``` + +Nous recommandons d'utiliser le nom du répertoire dans le nom du fichier pour plus de clarté. + +```bash +components/ + base/ + BaseButton.vue +``` + +Cependant, si l'on souhaite garder `Button.vue`, on peut utiliser l'option `prefix` dans le fichier de configuration `nuxt.config.js` pour ajouter un préfixe à tous les composants dans un répertoire donné. + +```bash +components/ + base/ + Button.vue +``` + +```bash{}[nuxt.config.js] +components: { + dirs: [ + '~/components', + { + path: '~/components/base/', + prefix: 'Base' + } + ] +} +``` + +Ainsi, on pourra utiliser `BaseButton` dans le template or lieu de `Button` sans pour autant devoir changer le nom du fichier `Button.vue`. + +```html{}[pages/index.vue] +<BaseButton /> +``` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<base-alert type="next"> + +Pour en apprendre davantage, se référer au chapitre sur le [module des composants Nuxt](/blog/improve-your-developer-experience-with-nuxt-components). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/4.content.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/4.content.md new file mode 100644 index 000000000..a3951d426 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/4.content.md @@ -0,0 +1,390 @@ +--- +title: content +description: Augmentez le potentiel de votre application Nuxt.js avec le module `@nuxt/content` grâce auquel on peut écrire dans un répertoire `content/` et récupérer du Markdown, JSON, YAML et des fichiers CSV à travers une API dans le style de MongoDB, qui remplit donc le rôle d'un **CMS headless basé sur Git**. +position: 4 +category: directory-structure +img: /guides/nuxt-content.svg +imgAlt: module content de nuxt +questions: + - question: Quel est le nom par défaut du répertoire dans lequel on ajoute nos fichiers markdown ? + answers: + - markdown + - content + - pages + correctAnswer: content + - question: Quel composant est utilisé dans les templates pour afficher le corps de votre page markdown ? + answers: + - <markdown> + - <nuxt> + - <nuxt-content> + correctAnswer: <nuxt-content> + - question: Quelle classe est automatiquement ajoutée afin que l'on puisse ajouter du style à notre markdown ? + answers: + - .content + - .nuxt-content + - .markdown + correctAnswer: .nuxt-content + - question: Le module content peut gérér le markdown, csv, yaml et les fichiers json + answers: + - true + - false + correctAnswer: true + - question: On peut ajouter des composants vue à nos fichiers markdown + answers: + - true + - false + correctAnswer: true + - question: Qu'utilise-t-on pour lister, filtrer et chercher notre contenu ? + answers: + - $nuxt-content() + - $content() + - $nuxt() + correctAnswer: $content() + - question: Qu'utilise-t-on pour récupérer les articles précédents et suivants ? + answers: + - .surround(slug) + - .prev-next(slug) + - .slug() + correctAnswer: .surround(slug) + - question: Des classes PrismJS sont ajoutées par défaut à nos blocks de code + answers: + - true + - false + correctAnswer: true + - question: Quel est l'URL par défaut pour accéder à l'API et voir notre JSON ? + answers: + - http://localhost:3000/content + - http://localhost:3000/_content + - http://localhost:3000/api + correctAnswer: http://localhost:3000/_content + - question: Quelles balises d'entête sont utilisées pour créer une table des matières ? + answers: + - h1 et h2 + - h2 et h3 + - h1, h2 et h3 + correctAnswer: h2 et h3 + - question: On peut utiliser le module content avec la génération de site statique + answers: + - true + - false + correctAnswer: true +--- + +Augmentez le potentiel de votre application Nuxt.js avec le module `@nuxt/content` grâce auquel on peut écrire dans un répertoire `content/` et récupérer du Markdown, JSON, YAML et des fichiers CSV à travers une API dans le style de MongoDB, qui remplit donc le rôle d'un **CMS headless basé sur Git**. + +<app-modal :src="img" :alt="imgAlt"></app-modal> + +### Rechargement à chaud lors du développement + +En développement, le module `content` est super rapide quand il s'agit de rechargement à chaud car il ne doit pas passer par Webpack lorsque l'on fait des changements à nos fichiers markdown. On peut aussi écouter l'événement `content:update` et créer un plugin qui à chaque fois que l'on va mettre à jour un fichier dans le répertoire `content`, va propager une méthode `fetchCategories` par exemple. + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/advanced#handling-hot-reload) pour davantage de détails. + +</base-alert> + +### Afficher le contenu + +On peut directement utiliser le composant `<nuxt-content>` dans notre template pour afficher le corps de la page. + +```html{}[pages/blog/_slug.vue] +<template> + <article> + <nuxt-content :document="article" /> + </article> +</template> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/displaying#component) pour davantage de détails. + +</base-alert> + +### Styliser votre contenu + +En fonction de ce que l'on va utiliser pour styliser notre application, on pourrait avoir besoin d'écrire un peu de style pour afficher notre markdown proprement. + +Le composant `<nuxt-content>` va automatiquement ajouter une classe `.nuxt-content`, afin que nous puissions personnaliser nos styles. + +```html +<style> + .nuxt-content h2 { + font-weight: bold; + font-size: 28px; + } + .nuxt-content p { + margin-bottom: 20px; + } +</style> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/displaying#style) pour davantage de détails. + +</base-alert> + +### Gérer les formats Markdown, CSV, YAML, JSON(5) + +This module converts your .md files into a JSON AST tree structure, stored in a body variable. You can also add a YAML front matter block to your markdown files or a .yaml file which will be injected into the document. You can also add a json/json5 file which can also be injected into the document. And you can use a .csv file where rows will be assigned to the body variable. + +Ce module convertit nos fichiers `.md` en une structure arborescente de type [JSON AST](https://astexplorer.net/#/gist/6e328cf76a27ca85e552c9cb583cdd74/1077c8842337972509a29bc9063d17bf90a1a492), stockée dans une variable `body`. + +```md +--- +title: Mon premier article de blog +description: Apprendre à se servir de @nuxt/content pour créer un blog +--- +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/writing#markdown) pour davantage de détails. + +</base-alert> + +### Composants Vue dans le markdown + +On peut utiliser les composants Vue directement dans les fichiers markdown. Il faudra cependant utiliser les composants sous leur écriture `kebab-case` et non avec des balises auto-fermantes. + +```html{}[components/global/InfoBox.vue] +<template> + <div class="bg-blue-500 text-white p-4 mb-4"> + <p><slot name="info-box">valeur par défault</slot></p> + </div> +</template> +``` + +```html{}[content/articles/my-first-blog-post.md] +<info-box> + <template #info-box> + Ceci est un composant Vue à l'intérieur d'un markdown, ici on injecte du + contenu en utilisant les slots + </template> +</info-box> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/writing#vue-components) pour davantage de détails. + +</base-alert> + +### API entièrement recherchable + +On peut utiliser `$content()` pour lister, filtrer et chercher notre contenu facilement. + +```html{}[pages/blog/index.vue] +<script> + export default { + async asyncData({ $content, params }) { + const articles = await $content('articles', params.slug) + .only(['title', 'description', 'img', 'slug', 'author']) + .sortBy('createdAt', 'asc') + .fetch() + + return { + articles + } + } + } +</script> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/fetching#methods) pour davantage de détails. + +</base-alert> + +### Articles précédents et suivants + +Le module `content` inclut un `.surround(slug)` qui nous permet de récupérer facilement les articles précédents et suivants. + +```js +async asyncData({ $content, params }) { + const article = await $content('articles', params.slug).fetch() + + const [prev, next] = await $content('articles') + .only(['title', 'slug']) + .sortBy('createdAt', 'asc') + .surround(params.slug) + .fetch() + + return { + article, + prev, + next + } + }, +``` + +```html +<prev-next :prev="prev" :next="next" /> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/fetching#surroundslug-options) pour davantage de détails. + +</base-alert> + +### Recherche par texte complet + +Le module `content` possède une recherche par texte complet afin que l'on puisse rechercher simplement dans nos fichiers markdown sans avoir à installer quoi que ce soit d'autre. + +```html{}[components/AppSearchInput.vue] +<script> + export default { + data() { + return { + searchQuery: '', + articles: [] + } + }, + watch: { + async searchQuery(searchQuery) { + if (!searchQuery) { + this.articles = [] + return + } + this.articles = await this.$content('articles') + .limit(6) + .search(searchQuery) + .fetch() + } + } + } +</script> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/fetching#searchfield-value) pour davantage de détails. + +</base-alert> + +### Surbrillance de la syntaxe + +Ce module va automatiquement envelopper les blocks de code et y appliquer les classes de [PrismJS](https://prismjs.com/). On peut bien sûr ajouter un thème PrismJS différent voire même le désactiver totalement. + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add prism-themes +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install prism-themes +``` + + </code-block> +</code-group> + +```js{}[nuxt.config.js] +content: { + markdown: { + prism: { + theme: 'prism-themes/themes/prism-material-oceanic.css' + } + } +} +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/writing#syntax-highlighting) pour davantage de détails. + +</base-alert> + +### Personnaliser le parsing du markdown + +À l'origine, le markdown ne supporte pas la surbrillance des lignes que ce soit dans les blocks de code ou dans les noms de fichiers. Le module `content` permet cela avec sa propre syntaxe. Les lignes numérotées seront ajoutées à une balise `pre` dans l'attribut data-line et le nom du fichier sera converti en un `span` avec une classe `filename`, afin d'être stylisé. + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/writing#codeblocks) pour davantage de détails. + +</base-alert> + +### Génération d'une table des matières + +Une propriété `toc` (pour Table of Contents) contenant un tableau, sera injectée dans notre document, listant tous les entêtes avec leurs titres et identifiants, afin que l'on puisse les lier. + +```html{}[pages/blog/_slug.vue] +<nav> + <ul> + <li v-for="lien of article.toc" :key="lien.id"> + <NuxtLink :to="`#${lien.id}`">{{ lien.text }}</NuxtLink> + </li> + </ul> +</nav> +``` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/writing#table-of-contents) pour davantage de détails. + +</base-alert> + +### Un QueryBuilder d'API puissant + +Le module `content` possède un puissant QueryBuilder d'API (similaire à MongoDB) qui nous permet de facilement voir le JSON de chaque répertoire à l'URL `http://localhost:3000/_content/`. L'extrémité est accessible via des requêtes `GET` et `POST`, on peut donc utiliser des query params. + +`http://localhost:3000/_content/articles?only=title&only=description&limit=10` + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/advanced/#api-endpoint) pour davantage de détails. + +</base-alert> + +### Personnaliser avec des hooks + +On peut utiliser des hooks pour personnaliser le module afin d'ajouter de la data au document avant que ce dernier ne soit stocké. + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/advanced#hooks) pour davantage de détails. + +</base-alert> + +### Intégration avec @nuxtjs/feed + +Dans le cas d'articles, le contenu peut être utilisé pour générer un fil d'actualité en utilisant le module [@nuxtjs/feed](https://www.npmjs.com/package/@nuxtjs/feed). + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/integrations/#nuxtjsfeed) pour davantage de détails. + +</base-alert> + +### Support pour la génération de site statique + +Ce module marche avec la génération de site statique en utilisant `nuxt generate`. Toutes les routes seront automatiquement générées grâce à la fonctionnalité du crawler de Nuxt.js. + +<base-alert> + +Si on utilise Nuxt.js avec une version <2.13 et que l'on a besoin de spécifier des routes dynamiques, il faut utiliser la méthode `generate` avec le module `@nuxt/content` de manière programmatique. + +</base-alert> + +<base-alert type="next"> + +Se référer à la [documentation du module content](https://content.nuxtjs.org/advanced#programmatic-usage) pour davantage de détails. + +</base-alert> + +<base-alert type="next"> + +Pour voir la documentation complète du [module content](https://content.nuxtjs.org/). + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/5.dist.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/5.dist.md new file mode 100644 index 000000000..d29ccd1a5 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/5.dist.md @@ -0,0 +1,131 @@ +--- +title: dist +description: Le répertoire `dist`, abréviation de *distribution*, est généré dynamiquement lors de l'utilisation de la commande `nuxt generate` et contient les fichiers HTML prêts pour la production ainsi que les ressources nécessaires au déploiement et à l'exécution de votre application Nuxt.js. +position: 5 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/05_dist?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Quelle est la commande permettant de générer le répertoire `dist` ? + answers: + - nuxt build + - nuxt start + - nuxt generate + correctAnswer: nuxt generate + - question: C'est le répertoire que vous devez charger pour votre hébergement de site statique + answers: + - vrai + - faux + correctAnswer: vrai + - question: Quelle est la propriété à modifier pour changer le répertoire `dist` ? + answers: + - dist + - dir + - buildDir + correctAnswer: dir + - question: Quelle est la propriété à utiliser pour ne pas avoir toutes vos pages générées dans un répertoire ? + answers: + - 'folders: false' + - 'subFolders: false' + - 'pages: true' + correctAnswer: 'subFolders: false' + - question: Quelle est la valeur par défaut de la propriété fallback ? + answers: + - "'200.html'" + - "'404.html'" + - 'false' + correctAnswer: "'200.html'" + - question: Lorsque vous travaillez avec des pages générées statiquement, il est recommandé d'utiliser quel fichier pour les pages d'erreur ? + answers: + - "'200.html'" + - "'404.html'" + - false + correctAnswer: "'404.html'" + - question: Quelle propriété pouvez-vous utiliser pour ignorer certains fichiers afin qu'ils ne soient pas générés statiquement ? + answers: + - ignore + - exclude + - fallback + correctAnswer: exclude +--- + +Le répertoire `dist`, abréviation de _distribution_, est généré dynamiquement lors de l'utilisation de la commande `nuxt generate` et contient les fichiers HTML prêts pour la production ainsi que les ressources nécessaires au déploiement et à l'exécution de votre application Nuxt.js. + +### Déploiement + +C'est le répertoire que vous devez **télécharger pour l'hébergement statique** car il contient vos fichiers HTML prêts à la production et vos ressources + +<base-alert> + +Le répertoire `dist` ne doit pas être livré à votre système de contrôle de version et doit être ignoré par votre `.gitignore` car il sera généré automatiquement à chaque fois que vous lancez la commande `nuxt generate`. + +</base-alert> + +### La propriété 'dir' + +Le répertoire dist est nommé dist par défaut mais peut être configuré dans votre fichier nuxt.config. + +```js{}[nuxt.config.js] +generate: { + dir: 'mon-site' +} +``` + +<base-alert> + +Si vous changez votre répertoire dist, vous devrez l'ajouter à votre contrôle de version pour que git l'ignore. + +</base-alert> + +### La propriété subFolders + +Nuxt.js place par défaut toutes nos pages générées dans un répertoire, cependant nous pouvons changer cela si on le souhaite en modifiant le fichier `nuxt.config.js` et en changeant la propriété des sous-répertoires pour qu'ils soient `false`. + +```js{}[nuxt.config.js] +generate: { + subFolders: false +} +``` + +### La propriété fallback + +Lors du déploiement de votre site, vous devrez vous assurer que le chemin html de repli est correctement défini. Il doit être défini comme page d'erreur afin que les routes inconnues soient rendues via Nuxt. S'il n'est pas défini, Nuxt.js utilisera la valeur par défaut qui est la page 200.html. + +Lors de l'exécution d'une application à page unique, il est plus logique d'utiliser 200.html car c'est le seul fichier nécessaire puisque aucune autre route n'est générée. + +Lorsque vous travaillez avec des pages générées statiquement, il est recommandé d'utiliser un fichier 404.html pour les pages d'erreur. + +<base-alert> + +Selon l'endroit où vous hébergez votre site, vous devez utiliser un fichier 200.html ou 404.html. Veuillez vérifier auprès de votre fournisseur d'hébergement. Netlify, par exemple, utilise 404.html. + +</base-alert> + +```js{}[nuxt.config.js] +export default { + generate: { + fallback: '404.html' + } +} +``` + +### La propriété exclude + +Vous pouvez exclure des pages de la génération en utilisant la propriété `generate exclude`. Au lieu d'être générée en tant que page statique, elle deviendra une page d'application unique et ne sera rendue que du côté client. + +```js{}[nuxt.config.js] +generate: { + exclude: [/admin/] +} +``` + +<base-alert type="info"> + +Vous pouvez également utiliser une expression réguliaire ici pour exclure les pages commençant ou se terminant par un mot en particulier. + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/6.layouts.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/6.layouts.md new file mode 100644 index 000000000..dbe33d3f0 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/6.layouts.md @@ -0,0 +1,171 @@ +--- +title: layouts +description: Les `layouts` sont d'une grande aide lorsque vous souhaitez modifier l'aspect et la présentation de votre application Nuxt.js. Vous pouvez inclure une barre latérale ou avoir des pages différentes entre une version mobile et web. +position: 7 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/07_layouts?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Vous pouvez facilement renommer le répertoire `layout` sans aucune configuration + answers: + - vrai + - faux + correctAnswer: faux + - question: Comment s'appelle la page de layout par défaut ? + answers: + - layout.vue + - default.vue + - defaultLayout.vue + correctAnswer: default.vue + - question: Quel composant devez-vous inclure dans vos layouts ? + answers: + - <Nuxt /> + - <NuxtLink /> + - <RouterView /> + correctAnswer: <Nuxt /> + - question: Vous pouvez ajouter tout autre élément à votre layout + answers: + - vrai + - faux + correctAnswer: vrai + - question: Pour ajouter un `layout` personnalisé, nous créons un fichier `.vue` et vous l'ajoutez à quel répertoire ? + answers: + - layout + - layouts + - page + correctAnswer: layouts + - question: Comment dire à une page d'utiliser le `layout` du blog ? + answers: + - "layout: 'blog'" + - "name: 'blog'" + - 'blog: true' + correctAnswer: "layout: 'blog'" + - question: Dans quel répertoire ajoutez-vous une page d'erreur ? + answers: + - pages + - layouts + - errors + correctAnswer: layouts + - question: Vous devez ajouter le composant `<Nuxt>` à la page d'erreur ? + answers: + - vrai + - faux + correctAnswer: faux + - question: Vous pouvez définir un `layout` personnalisé pour votre page d'erreur + answers: + - vrai + - faux + correctAnswer: vrai + - question: La page d'erreur est affichée lorsqu'une erreur se produit lors du rendu côté serveur (SSR) ? + answers: + - vrai + - faux + correctAnswer: faux +--- + +Les `layouts` sont d'une grande aide lorsque vous souhaitez modifier l'aspect et la présentation de votre application Nuxt.js. Vous pouvez inclure une barre latérale ou avoir des pages différentes entre une version mobile et web. + +<base-alert> + +_Ce répertoire ne peut pas être renommé sans configuration supplémentaire._ + +</base-alert> + +## Layout par défaut + +Vous pouvez étendre la présentation principale en ajoutant un fichier `layout/default.vue`. Il sera utilisé pour toutes les pages qui n'ont pas de `layout` défini. Assurez-vous d'ajouter le composant `<Nuxt>` lors de la création d'un `layout` pour inclure le composant de la page. + +Tout ce dont vous avez besoin dans votre layout, c'est de trois lignes de code qui rendront le composant de la page. + +```html{}[layouts/default.vue] +<template> + <Nuxt /> +</template> +``` + +Vous pouvez ajouter ici d'autres éléments tels que : Navigation, Header, Footer etc. + +```html{}[layouts/default.vue] +<template> + <TheHeader /> + <Nuxt /> + <TheFooter /> +</template> +``` + +<base-alert type="info"> + +Si vos [composants sont réglés sur true](/docs/2.x/directory-structure/components) alors il n'est pas nécessaire de déclarer l'importation pour vos composants. + +</base-alert> + +## Layout personnalisé + +Tous les fichiers du répertoire `layouts` créeront un `layout` personnalisée accessible avec la propriété `layout` dans les composants de la page. + +Let's say we want to create a blog layout and save it to `layouts/blog.vue`: + +```html{}[layouts/blog.vue] +<template> + <div> + <div>La barre de navigation de mon blog ici</div> + <Nuxt /> + </div> +</template> +``` + +Ensuite, vous devez indiquer aux pages d'utiliser votre layout personnalisé + +```js{}[pages/posts.vue] +<script> +export default { + layout: 'blog', + // OR + layout (context) { + return 'blog' + } +} +</script> +``` + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +## Page d'erreur + +La page d'erreur est un composant (_page component_) qui est toujours affiché lorsqu'une erreur se produit (qui ne s'est pas lancée du côté du serveur). + +<base-alert> + +Bien que ce fichier soit placé dans le répertoire `layouts`, il doit être traité comme une page. + +</base-alert> + +Comme mentionné ci-dessus, ce `layout` est spéciale et vous ne devez pas inclure `<Nuxt>` dans son modèle. Vous devez voir ce `layout` comme un composant affiché lorsqu'une erreur se produit (`404`, `500`, etc.). Comme pour les autres composants de la page, vous pouvez également définir un `layout` personnalisé pour la page d'erreur de la manière habituelle. + +Vous pouvez personnaliser la page d'erreur en ajoutant un fichier `layouts/error.vue` : + +```js{}[layouts/error.vue] +<template> + <div class="container"> + <h1 v-if="error.statusCode === 404">Page non trouvée</h1> + <h1 v-else>Une erreur est survenue</h1> + <NuxtLink to="/">Page d'accueil</NuxtLink> + </div> +</template> + +<script> +export default { + props: ['error'], + layout: 'blog' // you can set a custom layout for the error page +} +</script> +``` + +<base-alert type="info"> + +Le code source de la page d'erreur par défaut est [disponible sur GitHub](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/components/nuxt-error.vue). + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/7.middleware.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/7.middleware.md new file mode 100644 index 000000000..ada39b51a --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/7.middleware.md @@ -0,0 +1,186 @@ +--- +title: middleware +description: Le répertoire `middleware` contient les middlewares de l'application. Un middleware nous permet de définir des fonctions personnalisées qui peuvent s'exécuter avant de render une page ou un groupe de pages (layout). +position: 8 +category: directory-structure +csb_link_anonymous: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/09_middleware_anonymous?fontsize=14&hidenavigation=1&theme=dark +csb_link_named: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/09_middleware_named?fontsize=14&hidenavigation=1&theme=dark +csb_link_router: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/09_middleware_router?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Un middleware nous permet de définir une fonction qui va s'exécuter + answers: + - avant de render une page + - pendant le render d'une page + - après le render d'une page + correctAnswer: avant de render une page + - question: Dans quel répertoire mettons-nous les middlewares partagés ? + answers: + - middleware + - shared-middleware + - shared + correctAnswer: middleware + - question: Quel est le premier argument que reçoit un middleware ? + answers: + - req + - res + - context + correctAnswer: context + - question: En mode universel, quand le middleware est-il appelé ? + answers: + - côté serveur à la première requête puis côté serveur lors de la navigation + - côté client à la première requête puis côté client lors de la navigation + - côté serveur à la première requête puis côté client lors de la navigation + correctAnswer: côté serveur à la première requête puis côté client lors de la navigation + - question: En mode SPA, quand le middleware est-il appelé ? + answers: + - côté serveur à la première requête puis côté serveur lors de la navigation + - côté client à la première requête puis côté client lors de la navigation + - côté serveur à la première requête puis côté client lors de la navigation + correctAnswer: côté client à la première requête puis côté client lors de la navigation + - question: Dans quel ordre est exécuté le middleware ? + answers: + - les pages qui match ⇒ les layouts qui match ⇒ nuxt.config.js + - nuxt.config.js ⇒ les layouts qui match ⇒ les pages qui match + - les layouts qui match ⇒ les pages qui match ⇒ nuxt.config.js + correctAnswer: nuxt.config.js ⇒ les layouts qui match ⇒ les pages qui match + - question: Quelle propriété utilise-t-on pour ajouter notre middleware à chacune de nos routes ? + answers: + - middleware.router + - router.middleware + - routes.middleware + correctAnswer: router.middleware + - question: Peut-on ajouter plusieurs middlewares à une page spécifique ou à un layout ? + answers: + - true + - false + correctAnswer: true + - question: Comment ajoute-t-on un middleware nommé `middleware/authenticated.js` à notre page ? + answers: + - 'middleware: authenticated' + - 'middleware: true' + - "middleware: 'authenticated'" + correctAnswer: "middleware: 'authenticated'" + - question: Comment utilise-t-on un middleware anonyme pour une page bien spécifique ? + answers: + - créer un middleware nommé et le sauvegarder dans le répertoire des middlewares + - créer une fonction `middleware` dans le composant page + - ajouter un fichier _.vue au répertoire des middlewares + correctAnswer: créer une fonction `middleware` dans le composant page +--- + +Le répertoire `middleware` contient les middlewares de l'application. Un middleware nous permet de définir des fonctions personnalisées qui peuvent s'exécuter avant de render une page ou un groupe de pages (layout). + +Les middlewares partagés devraient être placés dans le répertoire `middleware/`. Le nom du fichiers sera aussi le nom du middleware (un fichier `middleware/auth.js` sera appelé avec middleware `auth`). On peut aussi utiliser des middlewares spécifiques à des pages en utilisant directement une fonction, voir [middlewares anonymes](/docs/2.x/components-glossary/pages-middleware#anonymous-middleware). + +Un middleware reçoit le [context](/docs/2.x/internals-glossary/context) en tant que premier argument. + +```js{}[middleware/user-agent.js] +export default function (context) { + // Ajouter la propriété userAgent au contexte + context.userAgent = process.server + ? context.req.headers['user-agent'] + : navigator.userAgent +} +``` + +Dans le mode universel, les middlewares seront appelés une fois côté serveur (à la première requête à l'application Nuxt.js, ex: lorsque l'on accède directement à l'application ou lors du rafraîchissement de la page) et du côté client lors de la navigation sur des routes supplémentaires. En mode SPA, les middlewares seront appelés côté client dans les deux situations. + +Les middlewares seront appelés en série dans cet ordre: + +1. `nuxt.config.js` (en suivant l'ordre définit dans le fichier) +2. Les layouts qui match +3. Les pages qui match + +## Le middleware du routeur + +Un middleware peut être asynchrone. Pour cela, il faut renvoyer une `Promesse` ou utiliser `async`/`await`. + +```js{}[middleware/stats.js] +import http from 'http' + +export default function ({ route }) { + return http.post('http://mes-stats-api.com', { + url: route.fullPath + }) +} +``` + +Ensuite, dans le fichier `nuxt.config.js`, il faut utiliser la propriété `router.middleware`. + +```js{}[nuxt.config.js] +export default { + router: { + middleware: 'stats' + } +} +``` + +Maintenant, le middleware `stats` sera appelé pour chaque changement de route. + +On peut ajouter notre middleware (plusieurs même) pour un layout spécifique mais aussi une page. + +```js{}[pages/index.vue / layouts/default.vue] +export default { + middleware: ['auth', 'stats'] +} +``` + +<app-modal> + <code-sandbox :src="csb_link_router"></code-sandbox> +</app-modal> + +## Middleware nommé + +On peut nommer un middleware en créant un fichier à l'intérieur du répertoire `middleware/`, le nom du fichier sera aussi le nom du middleware. + +```js{}[middleware/authenticated.js] +export default function ({ store, redirect }) { + // Si l'utilisateur n'est pas authentifié + if (!store.state.authenticated) { + return redirect('/login') + } +} +``` + +```html{}[pages/secret.vue] +<template> + <h1>Page secrète</h1> +</template> + +<script> + export default { + middleware: 'authenticated' + } +</script> +``` + +<app-modal> + <code-sandbox :src="csb_link_named"></code-sandbox> +</app-modal> + +## Middleware anonyme + +Si l'on a besoin d'un middleware pour seulement une page spécifique, on peut directement utiliser une fonction pour cela (voire un tableau de fonctions): + +```html{}[pages/secret.vue] +<template> + <h1>Page secrète</h1> +</template> + +<script> + export default { + middleware({ store, redirect }) { + // Si l'utilisateur n'est pas authentifié + if (!store.state.authenticated) { + return redirect('/login') + } + } + } +</script> +``` + +<app-modal> + <code-sandbox :src="csb_link_anonymous"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/8.modules.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/8.modules.md new file mode 100644 index 000000000..31a637479 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/8.modules.md @@ -0,0 +1,453 @@ +--- +title: modules +description: Nuxt.js fournit un système de modules d'ordre supérieur qui permet de personnaliser son fonctionnement interne. Les modules sont des fonctions qui sont appelées de manière séquentielle lors du démarrage de Nuxt.js. +position: 9 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/10_modules?fontsize=14&hidenavigation=1&theme=dark +img: /docs/2.x/modules.svg +imgAlt: modules-in-nuxt-js +questions: + - question: Quand les modules sont-ils appellés ? + answers: + - avant que Nuxt.js ne démarre + - pendant que Nuxt.js s'exécute + - au démarrage de Nuxt.js + correctAnswer: avant que Nuxt.js ne démarre + - question: Les modules de Nuxt.js peuvent être intégrés dans des packages npm + answers: + - true + - false + correctAnswer: true + - question: Dans le fichier nuxt.config.js, à quelle propriété ajoute-t-on nos modules ? + answers: + - nuxtModules + - modules + - plugins + correctAnswer: modules + - question: Dans le fichier nuxt.config.js, l'ordre dans lequel on ajoute nos modules est important. + answers: + - true + - false + correctAnswer: true + - question: Où devons-nous ajouter les modules qui sont seulement requis durant le développement et lors du build ? + answers: + - modules + - build + - buildModules + correctAnswer: buildModules + - question: Que sont concrètement les modules ? + answers: + - des tableaux + - des fonctions + - des plugins + correctAnswer: des fonctions + - question: Que faut-il utiliser lorsque l'on veut faire certaines choses mais seulement dans des conditions spécifiques et pas seulement durant l'initialisation de Nuxt.js ? + answers: + - plugins + - hooks + - asyncData + correctAnswer: hooks + - question: Les modules peuvent + answers: + - seulement être utilisés en tant que packages npm + - peuvent être seulement inclus directement dans le code source de notre projet + - les deux + correctAnswer: les deux + - question: Quelle ligne est requise si l'on publie notre module en tant que package npm ? + answers: + - module.exports + - module.exports.meta + - module.exports.module + correctAnswer: module.exports.meta + - question: On peut dire à Nuxt.js de charger des modules en passant des paramètres optionnels en tant qu'options + answers: + - true + - false + correctAnswer: true +--- + +<app-modal :src="img" :alt="imgAlt"></app-modal> + +Lors du développement d'applications complexes avec Nuxt.js, on pourrait finir par trouver que les fonctionnalités principales du framework ne sont pas suffisantes. Nuxt.js peut donc être personnalisé avec des options de configuration et des plugins, mais maintenir ces personnalisations à travers plusieurs projets est pénible, répétitif et chronophage. D'autre part, supporter les besoin de n'importe quel projet par défaut rendrait Nuxt.js très complexe et difficile à utiliser. + +Ces raisons font que Nuxt.js nous fournit un système de modules d'ordre supérieur qui permet de personnaliser son fonctionnement interne. Les modules sont des fonctions qui sont appelées de manière séquentielle lors du démarrage de Nuxt.js. Le framework attend que chaque module ait fini avant de procéder. Ainsi, les modules peuvent personnaliser presque n'importe quel aspect du projet. Grâce au design modulaire de Nuxt.js (basé sur [Tapable](https://github.com/webpack/tapable) de Webpack), les modules peuvent facilement utiliser des hooks pour certains points d'entrée tel que l'initialisation du builder. Les modules peuvent aussi écraser les templates, paramétrer les loaders de Webpack, ajouter des librairies CSS et faire plein d'autres tâches utiles. + +Et surtout, les modules de Nuxt.js peuvent être intégrés dans des packages npm. Cela rend possible leur réutilisation à travers plusieurs projets ainsi que la possibilité de partager avec la communauté, en créant un écosystème d'add-ons de haute qualité. + +## La propriété modules + +Les modules sont des extensions Nuxt.js qui peuvent personnaliser le fonctionnement interne du framework et ajouter un nombre infini d'intégrations. Une fois le module installé, on peut l'ajouter au fichier `nuxt.config.js` à la propriété `modules`. + +```js{}[nuxt.config.js] +export default { + modules: [ + // en utilisant le nom du package + '@nuxtjs/axios', + + // de manière relative par rapport au répertoire source du projet (srcDir) + '~/modules/awesome.js', + + // on peut lui passer des options + ['@nuxtjs/google-analytics', { ua: 'X1234567' }], + + // ou le définir directement + function () {} + ] +} +``` + +<base-alert type="info"> + +Les développeurs fournissent la plupart du temps des étapes et détails additionnels pour l'utilisation des modules. + +</base-alert> + +Nuxt.js essaie de résoudre chaque élément qui est présent dans le tableau des modules en utilisant `require path` de Node (dans les `node_modules`) et résout ensuite en partant du `srcDir` du projet si un alias `@` est utilisé. + +<base-alert> + +Les modules sont exécutés de manière séquentielle, l'ordre est donc important. + +</base-alert> + +Les modules doivent exporter une fonction pour permettre d'améliorer le build/runtime et peuvent (optionnel) aussi retourner une promesse en attendant que leur job ne soit terminé. À noter qu'ils seront importés au runtime, donc ils doivent déjà être transpilés s'ils utilisent des fonctionnalités modernes (ex: ES6). + +## Écrire votre propre Module + +Les modules sont des fonctions. Ils peuvent être emballés en tant que modules npm ou directement ajoutés dans le code source du projet. + +```js{}[nuxt.config.js] +export default { + exampleMsg: 'salut', + modules: [ + // Usage simple + '~/modules/example', + // Ici, on passe des options directement + ['~/modules/example', { token: '123' }] + ] +} +``` + +```js{}[modules/example.js] +export default function ExampleModule(moduleOptions) { + console.log(moduleOptions.token) // '123' + console.log(this.options.exampleMsg) // 'salut' + + this.nuxt.hook('ready', async nuxt => { + console.log('Nuxt est prêt') + }) +} + +// REQUIS si l'on publie le module en tant que package npm +module.exports.meta = require('./package.json') +``` + +## 1) ModuleOptions + +`moduleOptions`: c'est l'objet passé par l'utilisateur au travers du tableau `modules`. On peut l'utiliser pour personnaliser son comportement. + +### Options de niveau supérieur + +Parfois, il est plus pratique d'utiliser des options de niveau supérieur lors de la déclaration des modules dans le fichier `nuxt.config.js`. Cela nous permet de combiner plusieurs sources d'options. + +```js{}[nuxt.config.js] +export default { + modules: [['@nuxtjs/axios', { uneAutreOption: true }]], + + // le module axios est au courant de ceci car il utilise `this.options.axios` + axios: { + option1, + option2 + } +} +``` + +## 2) this.options + +`this.options`: on peut directement accéder aux options de Nuxt.js en utilisant cette référence. Cela contient le contenu du fichier `nuxt.config.js` de l'utilisateur avec toutes les options par défaut qui lui sont assignées. Cela peut être utilisé pour partager des options entre les modules. + +```js{}[module.js] +export default function (moduleOptions) { + // `options` va contenir option1, option2 et uneAutreOption + const options = Object.assign({}, this.options.axios, moduleOptions) + + // ... +} +``` + +### Ajouter une librairie CSS + +Si votre module fournit une librairie CSS, il faut s'assurer de vérifier si l'utilisateur l'a déjà inclus pour éviter des doublons ainsi qu'ajouter une option pour la désactiver. + +```js{}[module.js] +export default function (moduleOptions) { + if (moduleOptions.fontAwesome !== false) { + // Ajoute Font Awesome + this.options.css.push('font-awesome/css/font-awesome.css') + } +} +``` + +### Émettre des ressources + +We can register webpack plugins to emit assets during build. +On peut paramétrer les plugins de Webpack afin qu'ils émettent des ressources durant le build. + +```js{}[module.js] +export default function (moduleOptions) { + const info = 'Buildé par un super module - 1.3 alpha le ' + Date.now() + + this.options.build.plugins.push({ + apply(compiler) { + compiler.plugin('emit', (compilation, cb) => { + // Cela va générer un `.nuxt/dist/info.txt' avec le contenu de la variable info. + // La source peut aussi être un buffer + compilation.assets['info.txt'] = { + source: () => info, + size: () => info.length + } + + cb() + }) + } + }) +} +``` + +## 3) this.nuxt + +`this.nuxt`: ceci est une référence à l'instance actuelle de Nuxt.js. On peut attacher des hooks à certains événements du lifecycle. + +- **Ready** : Nuxt est prêt à être utilisé (ModuleContainer et Renderer sont prêts). + +```js +nuxt.hook('ready', async nuxt => { + // Votre code personnalisé ici +}) +``` + +- **Error**: une erreur non générée est survenue durant un hook. + +```js +nuxt.hook('error', async error => { + // Votre code personnalisé ici +}) +``` + +- **Close**: l'instance de Nuxt.js s'arrête proprement. + +```js +nuxt.hook('close', async nuxt => { + // Votre code personnalisé ici +}) +``` + +- **Listen**: le serveur interne de Nuxt.js commence à écouter (lorsque l'on utilise `nuxt start` ou `nuxt dev`). + +```js +nuxt.hook('listen', async (server, {host, port})) => { + // Votre code personnalisé ici +}) +``` + +`this`: le contexte des modules. Tous les modules seront appelés au sein du contexte de l'instance de `ModuleContainer`. + +Plus d'informations pour les méthodes disponibles sont présents dans la documentation du [ModuleContainer](/docs/2.x/internals-glossary/internals-module-container). + +### Exécuter certaines actions lors de hooks spécifiques + +Notre module pourrait avoir besoin de faire des choses seulement dans des conditions spécifiques et pas seulement durant l'initialisation de Nuxt.js. On peut utiliser les puissants hooks de Nuxt.js grâce à [hookable](https://github.com/nuxt-contrib/hookable). Nuxt.js attendra la fin de la fonction si elle retourne une Promesse ou qu'elle est définie en tant que fonction asynchrone. + +Voici quelques exemples basiques: + +```js{}[modules/myModule.js] +export default function myModule() { + this.nuxt.hook('modules:done', moduleContainer => { + // Ceci sera appelé lorsque tous les modules auront fini de charger + }) + + this.nuxt.hook('render:before', renderer => { + // Ceci sera appelé après que le renderer soit créé + }) + + this.nuxt.hook('build:compile', async ({ name, compiler }) => { + // Ceci sera appelé avant que le compilateur (par défaut: Webpack) ne commence + }) + + this.nuxt.hook('generate:before', async generator => { + // Ceci sera appelé avant que Nuxt.js ne génère nos pages + }) +} +``` + +### Ajouter des plugins + +Il est commun que des modules arrivent avec un ou plusieurs plugins lorsqu'ils sont ajoutés. Par exemple, le module [bootstrap-vue](https://bootstrap-vue.js.org/) demandera à être enregistré dans Vue. Dans ces cas là, on peut utiliser le helper `this.addPlugin`. + +```js{}[plugin.js] +import Vue from 'vue' +import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm' + +Vue.use(BootstrapVue) +``` + +```js{}[module.js] +import path from 'path' + +export default function nuxtBootstrapVue(moduleOptions) { + // Enregistrer le template `plugin.js` + this.addPlugin(path.resolve(__dirname, 'plugin.js')) +} +``` + +### Les plugins de template + +Les templates et plugins enregistrés peuvent peuvent bénéficier des [templates lodash](https://lodash.com/docs/4.17.4#template) pour changer conditionnellement les plugins finaux à être enregistrés. + +```js{}[plugin.js] +// Définition du code UA pour Google Analytics +ga('create', '<%= options.ua %>', 'auto') + +<% if (options.debug) { %> +// Code uniquement disponible en développement +<% } %> +``` + +```js{}[module.js] +import path from 'path' + +export default function nuxtGoogleAnalytics(moduleOptions) { + // Enregistrer le template `plugin.js` + this.addPlugin({ + src: path.resolve(__dirname, 'plugin.js'), + options: { + // Nuxt.js remplacera `options.ua` avec `123` lors de la copie du plugin dans le projet + ua: 123, + + // les parties conditionnelles lors du développement seront enlevées du code du plugin lors d'un build en production + debug: this.options.dev + } + }) +} +``` + +### Enregistrer des loaders personnalisés pour Webpack + +On peut faire pareil que `build.extend` dans le fichier `nuxt.config.js` en utilisant `this.extendBuild`. + +```js{}[module.js] +export default function (moduleOptions) { + this.extendBuild((config, { isClient, isServer }) => { + // Loader `.bidule` + config.module.rules.push({ + test: /\.bidule$/, + use: [...] + }) + + // Personnalisation de loaders existants + // Se référer au code source du fonctionnement interne de Nuxt: + // https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js + const barLoader = config.module.rules.find(rule => rule.loader === 'bar-loader') + }) +} +``` + +## Modules asynchrones + +Tous les modules ne feront pas des choses synchrones. Par exemple, on pourrait avoir envie de développer un module qui a besoin de récupérer de la data depuis une API. C'est pour cela que Nuxt.js supporte les modules asynchrones qui peuvent retourner une Promesse ou appeler un callback. + +### Use async/await + +```js +import fse from 'fs-extra' + +export default async function asyncModule() { + // On peut écrire du code asynchrone ici en utilisant `async`/`await` + const pages = await fse.readJson('./pages.json') +} +``` + +### Retourner une promesse + +```js +export default function asyncModule($http) { + return $http + .get('https://jsonplaceholder.typicode.com/users') + .then(res => res.data.map(user => '/users/' + user.username)) + .then(routes => { + // Faire quelques de personnalisé avec les routes de Nuxt.js + }) +} +``` + +<base-alert type="info"> + +Il y a beaucoup de hooks et de possibilités pour les modules. Se référer au [fonctionnement interne](/docs/2.x/internals-glossary/internals) pour comprendre davantage l'API de Nuxt.js. + +</base-alert> + +## Publication de votre module + +`module.exports.meta`: Cette ligne est requise si l'on veut publier le module en tant que package npm. Nuxt.js utilise `meta` en interne afin de fonctionner au mieux avec votre package. + +```js{}[modules/myModule.js] +module.exports.meta = require('./package.json') +``` + +## buildModules + +Certains modules sont importés seulement lors du développement et du build. Utiliser `buildModules` permet de démarrer un projet en production plus rapidement et réduit aussi significativement la taille des `node_modules` pour les déploiements en production. Se référer à la documentation de chaque module pour voir s'il est recommandé d'utiliser `modules` ou `buildModules`. + +La différence à l'utilisation est la suivante: + +- Au lieu d'ajouter aux `modules` à l'intérieur du fichier `nuxt.config.js`, il faut utiliser `buildModules` + +```js{}[nuxt.config.js] +export default { + buildModules: ['@nuxtjs/eslint-module'] +} +``` + +- Au lieu d'ajouter aux `dependencies` à l'intérieur du fichier `package.json`, il faut utiliser `devDependencies` + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn add -D @nuxtjs/eslint-module +``` + + </code-block> + <code-block label="npm"> + +```bash +npm install --save-dev @nuxtjs/eslint-module +``` + + </code-block> +</code-group> + +<base-alert type="info"> + +Si l'on est l'auteur d'un module, il est hautement recommandé de suggérer à vos utilisateurs d'installer votre package en tant que `devDependency` et d'utiliser `buildModules` au lieu de `modules`. + +</base-alert> + +Un module est un `buildModule` à moins que: + +- il fournit un `serverMiddleware` +- il y a besoin d'enregistrer un runtime hook de Node.js (tel que [Sentry](https://sentry.io/)) +- il affecte le comportement de `vue-renderer` ou utilise un hook avec un de ces deux namespaces: `server:` ou `vue-renderer:`. +- tout ce qui est en dehors du scope de Webpack (astuce: les plugins et les templates sont compilés, ils font donc partie du scope de Webpack) + +<base-alert>  + +Si vous vous apprêtez à offrir un `buildModules`, veuillez noter que cette fonctionnalité est disponible depuis seulement la version 2.9. Les versions plus anciennes devront mettre à jour Nuxt.js ou utiliser la section `modules`. + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/9.pages.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/9.pages.md new file mode 100644 index 000000000..bed88d306 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/9.pages.md @@ -0,0 +1,357 @@ +--- +title: pages +description: Le répertoire `pages` contient les vues et les routes de vos applications. Nuxt.js lit tous les fichiers `.vue` à l'intérieur de ce répertoire et crée automatiquement la configuration du routeur pour vous. +position: 10 +category: directory-structure +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/11_pages?fontsize=14&hidenavigation=1&theme=dark +questions: + - question: Dans quel répertoire placez-vous les éléments de votre page ? + answers: + - views + - pages + - vues + correctAnswer: pages + - question: Pour créer des routes, vous devez configurer manuellement un fichier router.js + answers: + - vrai + - faux + correctAnswer: faux + - question: Vous pouvez créer des routes avec des fichiers .js et des fichiers .ts + answers: + - vrai + - faux + correctAnswer: vrai + - question: Quand `asyncData` est-il appelé ? + answers: + - avant d'avoir chargé le composant + - pendant que le composant est chargé + - après avoir chargé le composant + correctAnswer: avant d'avoir chargé le composant + - question: Dans quelle propriété ajoutez-vous vos méta-tags ? + answers: + - head + - meta + - metaTags + correctAnswer: head + - question: Quelle propriété utilisez-vous pour ajouter une mise en page différente à votre page ? + answers: + - layouts + - page + - layout + correctAnswer: layout + - question: Comment paramétrer la propriété scrollToTop si vous voulez dire à Nuxt.js de faire défiler vers le haut lors du rendu de la route de votre enfant ? + answers: + - "scrollToTop: 'scroll'" + - 'scrollToTop: true' + - "scroll: 'top'" + correctAnswer: 'scrollToTop: true' + - question: Comment ajouter le middleware/auth.js à votre page ? + answers: + - 'middleware: true' + - "middleware: 'auth'" + - "import auth from 'middleware/auth.js'" + correctAnswer: "middleware: 'auth'" + - question: Pour mettre en place un `watcher` pour les requêtes, quel propriété utilisez-vous ? + answers: + - watcher + - queryWatcher + - watchQuery + correctAnswer: watchQuery + - question: Le `watcher` est désactivé par défaut. + answers: + - vrai + - faux + correctAnswer: vrai +--- + +Le répertoire `pages` contient les vues et les routes de vos applications. Nuxt.js lit tous les fichiers `.vue` à l'intérieur de ce répertoire et crée automatiquement la configuration du routeur pour vous. + +<base-alert type="info"> + +Vous pouvez également créer des routes avec des fichiers .js et .ts + +</base-alert> + +Chaque composant de Page est un composant Vue mais Nuxt.js ajoute des attributs et des fonctions spéciales pour rendre le développement de votre application universelle aussi facile que possible. + +```html{}[pages +<template> + <h1 class="red">Bonjour {{ name }}!</h1> +</template> + +<script> + export default { + // les propriétés de la page vont ici + } +</script> + +<style> + .red { + color: red; + } +</style> +``` + +## Pages dynamiques + +Les pages dynamiques peuvent être créées lorsque vous ne connaissez pas le nom de la page parce qu'il provient d'une API ou que vous ne voulez pas avoir à créer la même page encore et encore. Pour créer une page dynamique, vous devez ajouter un underscore (\_) avant le nom du fichier .vue ou avant le nom du répertoire, si vous souhaitez que le répertoire soit dynamique. Vous pouvez nommer le fichier ou le répertoire comme vous le souhaitez, mais vous devez le faire précéder d'un underscore . + +Si nous avons défini un fichier nommé `_slug.vue` dans notre répertoire `pages`, nous pouvons accéder à la valeur en utilisant le contexte avec `params.slug` + +```html{}[pages/_slug.vue] +<template> + <h1>{{ this.slug }}</h1> +</template> + +<script> + export default { + async asyncData({ params }) { + const slug = params.slug // En appelant /abc, le slug sera "abc". + return { slug } + } + } +</script> +``` + +Si nous avons défini un fichier nommé `\_slug.vue` dans un répertoire appelé `\_book`, nous pouvons accéder à la valeur en utilisant le contexte avec `params.slug` et `params.book` + +```html{}[pages/_book/_slug.vue] +<template> + <h1>{{ this.book }} / {{ this.slug }}</h1> +</template> + +<script> + export default { + async asyncData({ params }) { + const book = params.book + const slug = params.slug + return { book, slug } + } + } +</script> +``` + +## Propriétés + +### asyncData + +AsyncData est appelé à chaque fois avant le chargement du composant. Elle peut être asynchrone et reçoit le contexte en argument. L'objet renvoyé sera fusionné avec votre objet de données. + +```js{}[pages/index.vue] +export default { + asyncData (context) { + return { name: 'World' } + } +``` + +<base-alert type="next"> + +Pour en savoir plus sur le fonctionnement d'asyncData, consultez notre chapitre [Data Fetching](/docs/2.x/features/data-fetching#async-data) + +</base-alert> + +### fetch + +Chaque fois que vous avez besoin d'obtenir des données asynchrones, vous pouvez utiliser `fetch()`. Fetch est appelé côté serveur lors du rendu de la route, et côté client lors de la navigation. + +```html +<script> + export default { + data() { + return { + posts: [] + } + }, + async fetch() { + this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res => + res.json() + ) + } + } +</script> +``` + +<base-alert type="next"> + +Pour en savoir plus sur le fonctionnement de l'extraction, consultez notre chapitre [Data Fetching](/docs/2.x/features/data-fetching) + +</base-alert> + +### head + +Définissez des balises <meta> pour la page en cours. Nuxt.js utilise `vue-meta` pour mettre à jour l'en-tête du document et les méta attributs de votre application. + +```js{}[pages/index.vue] +export default { + head() { + // Définit les balises Méta pour cette page + } +} +``` + +<base-alert type="next"> + +Pour en savoir plus, consultez notre chapitre [Balises meta et référencement SEO](/docs/2.x/features/meta-tags-seo) + +</base-alert> + +### layout + +Précisez une mise en page définie dans le répertoire des mises en page. + +```js{}[pages/index.vue] +export default { + layout: 'blog' +} +``` + +<base-alert type="next"> + +Pour en savoir plus sur les mises en page, consultez notre chapitre sur les [Vues](/docs/2.x/concepts/views#layouts). + +</base-alert> + +### loading + +Si ce paramètre est défini sur false, il empêche une page d'appeler automatiquement `this.$nuxt.$loading.finish()` lorsque vous l'entrez et `this.$nuxt.$loading.start()` lorsque vous la quittez, ce qui vous permet de contrôler manuellement le comportement, comme le montre [cet exemple](/examples/custom-loading-component). + +```js{}[pages/index.vue] +export default { + loading: false +} +``` + +<base-alert type="info"> + +S'applique uniquement si la propriété loading est également défini dans le fichier nuxt.config.js. + +</base-alert> + +<base-alert type="next"> + +Pour en savoir plus, consultez notre chapitre sur le [Chargement](/docs/2.x/features/loading). + +</base-alert> + +### transition + +Définit une transition spécifique pour la page. + +```js{}[pages/index.vue] +export default { + transition: 'fade' +} +``` + +<base-alert type="next"> + +Pour en savoir plus, consultez notre chapitre sur les [Transitions](/docs/2.x/features/transitions) + +</base-alert> + +### scrollToTop + +La propriété `scrollToTop` vous permet de dire à Nuxt.js de faire défiler la page vers le haut avant de la rendre. Par défaut, Nuxt.js fait défiler la page vers le haut lorsque vous allez sur une autre page, mais avec les routes enfant, Nuxt.js garde la position de défilement. Si vous voulez dire à Nuxt.js de faire défiler la page vers le haut lors du rendu de votre route fille, mettez `scrollToTop` à `true` + +```js{}[pages/index.vue] +export default { + scrollToTop: true +} +``` + +Inversement, vous pouvez aussi régler manuellement `scrollToTop` à `false` sur les routes parentes. + +Si vous souhaitez remplacer le comportement de défilement par défaut de Nuxt.js, consultez l'option [scrollBehavior](/docs/2.x/configuration-glossary/configuration-router#scrollbehavior). + +### middleware + +Définit le middleware pour cette page qui sera appelé avant le rendu de la page. + +```js{}[pages/index.vue] +export default { + middleware: 'auth' +} +``` + +<base-alert type="next"> + +Pour en savoir plus, consultez notre chapitre sur les [Middleware](/docs/2.x/directory-structure/middleware) + +</base-alert> + +### La propriété watchQuery + +Utilisez la propriété `WatchQuery` pour configurer un observateur (watcher) pour les chaînes de requête. Si les chaînes définies changent, toutes les méthodes du composants (asyncData, fetch, validate, layout, ...) seront appelées. Le `watcher` est désactivée par défaut pour améliorer les performances. + +```js{}[pages/index.vue] +export default { + watchQuery: ['page'] +} +``` + +<base-alert type="info"> + +Si vous voulez mettre en place un `watcher` pour toutes les chaînes de requête, définissez `watchQuery` sur `true`. + +</base-alert> + +```js{}[pages/index.vue] +export default { + watchQuery: true +} +``` + +Vous pouvez également utiliser la fonction `watchQuery(newQuery, oldQuery)` pour avoir des observateurs plus raffinés. + +```js{}[pages/index.vue] +export default { + watchQuery(newQuery, oldQuery) { + // Exécute les méthodes du composants que si l'ancienne chaîne de requête contenait `bar`. + // et que la nouvelle chaîne de requête contient `foo`. + return newQuery.foo && oldQuery.bar + } +} +``` + +<base-alert type="next"> + +Pour en savoir plus sur la propriété d'observation, consultez notre chapitre [Data Fetching](/docs/2.x/features/data-fetching) chapter + +</base-alert> + +<app-modal> + <code-sandbox :src="csb_link"></code-sandbox> +</app-modal> + +## Ignorer des pages + +Si vous voulez ignorer des pages afin qu'elles ne soient pas généré dans le fichier `router.js`, alors vous pouvez les ignorer en les préfixant par un `-`. + +Par exemple, `pages/-about.vue` sera ignorée. + +<base-alert type="next"> + +Pour en savoir plus, consultez notre chapitre sur l'option [ignore](/docs/2.x/configuration-glossary/configuration-ignore) + +</base-alert> + +## Configuration + +Vous pouvez renommer le répertoire `pages/` en quelque chose de différent en définissant l'option `dir.pages` : + +```js{}[nuxt.config.js] +export default { + dir: { + // Renommer le répertoire `pages` en `routes`. + pages: 'routes' + } +} +``` + +<base-alert type="next"> + +Pour en savoir plus, consultez notre chapitre sur l'option [dir](/docs/2.x/configuration-glossary/configuration-dir) + +</base-alert> + +<quiz :questions="questions"></quiz> diff --git a/nuxtjs.org/content/fr/0.docs/4.directory-structure/index.md b/nuxtjs.org/content/fr/0.docs/4.directory-structure/index.md new file mode 100644 index 000000000..076cdb0bd --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/4.directory-structure/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/directory-structure/nuxt +--- diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/1.configuration-alias.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/1.configuration-alias.md new file mode 100644 index 000000000..8853656b0 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/1.configuration-alias.md @@ -0,0 +1,61 @@ +--- +title: 'La propriété alias' +description: Nuxt.js vous permet d'utiliser des alias pour accéder, dans votre JavaScript et CSS, à vos répertoires personnalisés +menu: alias +category: configuration-glossary +position: 0 +--- + +> Nuxt.js vous permet d'utiliser des alias pour accéder, dans votre JavaScript et CSS, à vos répertoires personnalisés. + +- Type: `Object` +- Default: + ```js + { + '~~': `<rootDir>`, + '@@': `<rootDir>`, + '~': `<srcDir>`, + '@': `<srcDir>`, + 'assets': `<srcDir>/assets`, // (unless you have set a custom `dir.assets`) + 'static': `<srcDir>/static`, // (unless you have set a custom `dir.static`) + } + ``` + +Cette option vous permet de définir des alias vers les répertoires de votre projet (en plus de ceux ci-dessus). Ces alias peuvent être utilisés dans votre JavaScript et CSS. + +```js{}[nuxt.config.js] +import { resolve } from 'path' +export default { + alias: { + 'images': resolve(__dirname, './assets/images'), + 'style': resolve(__dirname, './assets/style'), + 'data': resolve(__dirname, './assets/other/data') + } +} +``` + +```html{}[components/example.vue] +<template> + <img src="~images/main-bg.jpg"> +</template> + +<script> +import data from 'data/test.json' + +// etc. +</script> + +<style> +@import '~style/variables.scss'; +@import '~style/utils.scss'; +@import '~style/base.scss'; + +body { + background-image: url('~images/main-bg.jpg'); +} +</style> +``` + +<base-alert type="warning">Dans un contexte Webpack (sources d'images, CSS - mais _pas_ JavaScript), vous devez préfixer votre alias avec `~` (comme dans l'exemple ci-dessus).</base-alert> + +<base-alert type="info">Si vous utilisez TypeScript et que vous voulez utiliser l'alias que vous définissez dans vos fichiers TypeScript, vous devrez ajouter les alias à votre objet `paths` dans `tsconfig.json`.</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/10.configuration-extend-plugins.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/10.configuration-extend-plugins.md new file mode 100644 index 000000000..4c2fc8043 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/10.configuration-extend-plugins.md @@ -0,0 +1,32 @@ +--- +title: La propriété extendPlugins +description: La propriété extendPlugins permet de personnaliser les plugins de Nuxt.js. +menu: extendPlugins +category: configuration-glossary +position: 9 +--- + +> La propriété extendPlugins permet de personnaliser les plugins de Nuxt.js ([options.plugins](/docs/2.x/configuration-glossary/configuration-plugins)). + +- Type: `Function` +- Par défaut: `undefined` + +On pourrait vouloir personnaliser les plugins ou changer l'ordre crée par Nuxt.js pour ceux-ci. Cette fonction accepte un tableau d'objets de [plugins](/docs/2.x/configuration-glossary/configuration-plugins) et doit renvoyer un tableau d'objets de plugins. + +Exemple de changement de l'ordre des plugins: + +```js{}[nuxt.config.js] +export default { + extendPlugins(plugins) { + const pluginIndex = plugins.findIndex( + ({ src }) => src === '~/plugins/doitEtreLePremier.js' + ) + const doitEtreLePremierPlugin = plugins[pluginIndex] + + plugins.splice(pluginIndex, 1) + plugins.unshift(doitEtreLePremierPlugin) + + return plugins + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/11.configuration-generate.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/11.configuration-generate.md new file mode 100644 index 000000000..37a6c6737 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/11.configuration-generate.md @@ -0,0 +1,368 @@ +--- +title: La propriété generate +description: Permet de configurer la génération de votre application web universelle en une application web statique. +menu: generate +category: configuration-glossary +position: 10 +--- + +- Type: `Object` + +> Permet de configurer la génération de votre application web universelle en une application web statique. + +Lors de l'appel de `nuxt.generate()`, Nuxt.js va utiliser la configuration définie dans la propriété `generate`. + +```js{}[nuxt.config.js] +export default { + generate: { + ... + } +} +``` + +## cache + +> Introduit avec la v2.14.0 + +- Type: `Object` ou `false` + +Cette option est utilisée par `nuxt generate` avec la [cible statique](/docs/2.x/features/deployment-targets#static-hosting) pour éviter de re-build lorsque les fichiers traqués n'ont pas été modifiés. + +Par défaut: + +```js +{ + ignore: [ + '.nuxt', // buildDir + 'static', // dir.static + 'dist', // generate.dir + 'node_modules', + '.**/*', + '.*', + 'README.md' + ] +} +``` + +Si on veut éviter de re-build lors d'un changement du fichier de configuration, il faut l'ajouter à la liste au travers de l'option `cache.ignore`: + +```js{}[nuxt.config.js] +export default { + generate: { + cache: { + ignore: ['renovate.json'] // ignore les changements appliqués à ce fichier + } + } +} +``` + +## concurrency + +- Type: `Number` +- Par défaut: `500` + +La génération des routes est concomitance, `generate.concurrency` spécifie le nombre de routes qui peuvent s'exécuter dans un seul thread. + +## crawler + +- Type: `boolean` +- Par défaut: true + +Depuis Nuxt.js v2.13, un crawler s'occupera de trouver et de générer toutes les routes dynamiques en passant en revue tous les liens relatifs. Si l'on veut désactiver cette fonctionnalité, il suffit de passer la valeur à `false`. + +```js +export default { + generate: { + crawler: false + } +} +``` + +## dir + +- Type: `String` +- Par défault: `'dist'` + +Le nom du répertoire créé lors du build de l'application web en mode statique avec `nuxt generate` ou en mode SPA avec `nuxt build`. + +## devtools + +- Type: `boolean` +- Par défault: `false` + +Permet de configurer si l'on est autorisé ou pas à inspecter les [vue-devtools](https://github.com/vuejs/vue-devtools). + +Si c'est déjà activé dans le fichier `nuxt.config.js` ou ailleurs, les devtools seront activés, peut importe le flag. + +## exclude + +- Type: `Array` + - Items: `String` ou `RegExp` + +`exclude` accepte un tableau de chaînes de caractères ou des expressions régulières et s'occupe d'éviter de générer les routes qui match. Les routes seront toujours accessibles lorsque `generate.fallback` est utilisé. + +En prenant cet exemple de structure: + +```bash +-| pages/ +---| index.vue +---| admin/ +-----| about.vue +-----| index.vue +``` + +Par défaut, lors de l'exécution de `nuxt generate`, un fichier sera créé pour chaque route. + +```bash +-| dist/ +---| index.html +---| admin/ +-----| about.html +-----| item.html +``` + +Losque dans `ignore`, on ajoute une expression régulière qui match toutes les routes, cela va empêcher la génération de ces routes. + +```js{}[nuxt.config.js] +export default { + generate: { + exclude: [ + /^\/admin/ // un chemin qui commence par /admin + ] + } +} +``` + +```bash +-| dist/ +---| index.html +``` + +On peut aussi exclure une route spécifique en passant une chaîne de caractères: + +```js{}[nuxt.config.js] +export default { + generate: { + exclude: ['/ma-page-secrete'] + } +} +``` + +## fallback + +- Type: `String` ou `Boolean` +- Par défault: `200.html` + +```js{}[nuxt.config.js] +export default { + generate: { + fallback: '404.html' + } +} +``` + +Fournit le chemin du fallback au fichier HTML. Cela devrait être définit en tant que page d'erreur, pour que toutes les routes inconnues soit render via Nuxt.js. Si la valeur n'est pas spécifiée ou est `falsy`, le fallback sera `200.html`. Si la valeur est à `true`, le fallback sera à `404.html`. Si l'on fournit une chaîne de caractères, elle sera utilisée à la place. + +Lorsque notre application est une SPA, il est plus idiomatique d'utiliser une `200.html` vu que ce sera le seul fichier nécessaire car aucune autre route ne sera générée. + +```js{}[nuxt.config.js] +fallback: false +``` + +Lorsque l'on travaille avec des pages générées de manière statique, il est recommandé d'utiliser une `404.html` en tant que page d'erreur et pour celles qui concordent avec les entrées dans [excludes](https://nuxtjs.org/api/configuration-generate#exclude) (autrement dit, les fichiers que l'on ne veut pas voir être générés en tant que pages statiques). + +```js{}[nuxt.config.js] +fallback: true +``` + +Cependant, Nuxt.js permet de configurer n'importe quelle page si vous ne souhaitez pas utiliser les classiques `200.html` ou `404.html`, il suffit d'ajouter la chaîne de caractères souhaitée et de penser à faire la redirection sur cette page. Ce n'est bien sûr pas nécessaire et le mieux reste encore de rediriger vers des pages `200.html`/`404.html`. + +```js{}[nuxt.config.js] +fallback: 'pageDeFallback.html' +``` + +_Note: De nombreux services (ex: Netlify) détectent une `404.html` automatiquement. Si on est en charge de la configuration de notre propre serveur web, il faudra consulter la documentation pour trouver comment définir une page d'erreur (et la passer à `404.html`)._ + +## interval + +- Type: `Number` +- Par défault: `0` + +L'intervalle entre 2 cycles de render, utile pour éviter de spam une API avec les appels de notre application web. + +## minify + +- **Déprécié !** +- Il faut utiliser [build.html.minify](/docs/2.x/configuration-glossary/configuration-build#htmlminify) à la place. + +## routes + +- Type: `Array` + +<base-alert type="info"> + +Depuis Nuxt.js v2.13, un crawler est installé. Ce dernier se charge de trouver tous les liens et de générer les routes correspondantes lors d'un `nuxt generate`. + +SI on a détaché des pages (comme des pages secrètes) mais que l'on veut que celles-ci soit aussi générées, on peut utiliser la propriété `generate.routes`. + +</base-alert> + +<base-alert> + +Les routes dynamiques seront ignorés par la commande `generate` lors de l'utilisation d'une version de Nuxt.js inférieure à `2.12`. + +</base-alert> + +Exemple: + +```bash +-| pages/ +---| index.vue +---| users/ +-----| _id.vue +``` + +Seule la route `/` sera générée par Nuxt.js. + +Si l'on souhaite que Nuxt.js génère des routes avec des paramètres dynamiques, on a besoin de définir la propriété `generate.routes` à un tableau de routes dynamiques. + +On ajoute les routes pour `/users/:id`: + +```js{}[nuxt.config.js] +export default { + generate: { + routes: ['/users/1', '/users/2', '/users/3'] + } +} +``` + +Ensuite on lance `nuxt generate`: + +```bash +[nuxt] Generating... +[...] +nuxt:render Rendering url / +154ms +nuxt:render Rendering url /users/1 +12ms +nuxt:render Rendering url /users/2 +33ms +nuxt:render Rendering url /users/3 +7ms +nuxt:generate Generate file: /index.html +21ms +nuxt:generate Generate file: /users/1/index.html +31ms +nuxt:generate Generate file: /users/2/index.html +15ms +nuxt:generate Generate file: /users/3/index.html +23ms +nuxt:generate HTML Files generated in 7.6s +6ms +[nuxt] Generate done +``` + +Bien, mais que se passe-t-il si on a des **paramètres dynamiques** ? + +1. On peut utiliser une `fonction` qui nous retournera une `Promesse`. +2. On peut utiliser une `fonction` avec un `callback(erreur, parametres)`. + +### Une fonction qui retourne une Promesse + +```js{}[nuxt.config.js] +import axios from 'axios' + +export default { + generate: { + routes() { + return axios.get('https://mon-api/users').then(res => { + return res.data.map(user => { + return '/users/' + user.id + }) + }) + } + } +} +``` + +### Fonction avec un callback + +```js{}[nuxt.config.js] +import axios from 'axios' + +export default { + generate: { + routes(callback) { + axios + .get('https://mon-api/users') + .then(res => { + const routes = res.data.map(user => { + return '/users/' + user.id + }) + callback(null, routes) + }) + .catch(callback) + } + } +} +``` + +### Accélérer la génération des routes dynamiques avec `payload` + +Dans l'exemple précédent, nous utilisons `user.id` à partir du serveur pour générer les routes mais on jette le reste de la data. En général, on aura besoin de le récupérer de nouveau à l'intérieur de `/users/_id.vue`. Même si on peut faire cela, on aura certainement besoin de passer la valeur de `generate.interval` à queqlue chose comme `100` pour éviter de spam le serveur avec nos appels. Parce que cela va augmenter le temps que prend le script de génération, il serait préférable de passer l'objet `user` en entier dans le contexte de `_id.vue`. Nous pouvons faire cela en modifiant le code au dessus par: + +```js{}[nuxt.config.js] +import axios from 'axios' + +export default { + generate: { + routes() { + return axios.get('https://mon-api/users').then(res => { + return res.data.map(user => { + return { + route: '/users/' + user.id, + payload: user + } + }) + }) + } + } +} +``` + +Nous pouvons maintenant accéder à `payload` à partir de `/users/_id.vue` commme ceci: + +```js +async asyncData ({ params, error, payload }) { + if (payload) return { user: payload } + else return { user: await backend.fetchUser(params.id) } +} +``` + +## subFolders + +- Type: `Boolean` +- Par défault: `true` + +Par défaut, lorsqu'on lance un `nuxt generate`, Nuxt.js va créer un répertoire pour chaque route et servir un fichier `index.html`. + +Exemple: + +```bash +-| dist/ +---| index.html +---| about/ +-----| index.html +---| products/ +-----| item/ +-------| index.html +``` + +Lorsque l'on passe la valeur à `false`, les fichiers HTML seront générés d'après le chemin de la route: + +```js{}[nuxt.config.js] +export default { + generate: { + subFolders: false + } +} +``` + +```bash +-| dist/ +---| index.html +---| about.html +---| products/ +-----| item.html +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/12.configuration-global-name.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/12.configuration-global-name.md new file mode 100644 index 000000000..4d1a98aa3 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/12.configuration-global-name.md @@ -0,0 +1,42 @@ +--- +title: La propriété globalName +description: Nuxt.js nous permet de personnaliser l'identifiant global utilisé dans le template HTML principal ainsi que le nom de l'instance de Vue et d'autres options encore. +menu: globalName +category: configuration-glossary +position: 11 +--- + +> Nuxt.js nous permet de personnaliser l'identifiant global utilisé dans le template HTML principal ainsi que le nom de l'instance de Vue et d'autres options encore. + +- Type: `String` +- Par défaut: `nuxt` + +```js{}[nuxt.config.js] +{ + globalName: 'monNomPersonnalisé' +} +``` + +<base-alert> + +Le `globalName` doit être un identifiant JavaScript valide, le changer pourrait casser le support pour certains plugins qui dépendent de certaines fonctions basées sur le nom de Nuxt. Si l'on cherche à changer seulement l'identifiant HTML visible `__nuxt`, alors on peut utiliser la propriété `globals`. + +</base-alert> + +## The globals property + +> Personnalise certains noms globaux spécifiques, basés sur `globalName` par défaut. + +- Type: `Object` +- Par défaut: + +```js{}[nuxt.config.js] +globals: { + id: globalName => `__${globalName}`, + nuxt: globalName => `$${globalName}`, + context: globalName => `__${globalName.toUpperCase()}__`, + pluginPrefix: globalName => globalName, + readyCallback: globalName => `on${_.capitalize(globalName)}Ready`, + loadedCallback: globalName => `_on${_.capitalize(globalName)}Loaded` +}, +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/13.configuration-head.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/13.configuration-head.md new file mode 100644 index 000000000..bcf3991d3 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/13.configuration-head.md @@ -0,0 +1,36 @@ +--- +title: 'La Propriété head' +description: Nuxt.js vous permet de définir toutes les métadonnées par défaut pour votre application dans le fichier nuxt.config.js. +menu: head +category: configuration-glossary +position: 12 +--- + +> Nuxt.js vous permet de définir toutes les métadonnées par défaut pour votre application dans le fichier nuxt.config.js. + +- Type: `Object` or `Function` + +```js{}[nuxt.config.js] +export default { + head: { + titleTemplate: '%s - Nuxt.js', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + + // hid is used as unique identifier. Do not use `vmid` for it as it will not work + { hid: 'description', name: 'description', content: 'Meta description' } + ] + } +} +``` + +Pour connaître la liste des options que vous pouvez donner à `head`, consultez la documentation [vue-meta](https://vue-meta.nuxtjs.org/api/#metainfo-properties). + +Vous pouvez également utiliser `head` comme fonction dans vos composants pour accéder aux données des composants avec `this` ([en savoir plus](/docs/2.x/components-glossary/pages-head)). + +<base-alert type="info"> + +<b>Info :</b> Pour éviter la duplication des métadonnées dans le composant enfant, configurez un identifiant unique avec la clé `hid` pour vos balises méta ([en savoir plus](https://vue-meta.nuxtjs.org/api/#tagidkeyname)). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/14.configuration-hooks.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/14.configuration-hooks.md new file mode 100644 index 000000000..3834cb7b7 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/14.configuration-hooks.md @@ -0,0 +1,147 @@ +--- +title: La propriété hooks +description: Les hooks sont des écouteurs aux évènements de Nuxt.js qui sont généralement utilisés dans les modules de Nuxt, mais aussi disponibles dans le fichier `nuxt.config.js`. +menu: hooks +category: configuration-glossary +position: 13 +--- + +- Type: `Object` + +> Les hooks sont des [écouteurs aux évènements de Nuxt.js](/docs/2.x/internals-glossary/internals) qui sont généralement utilisés dans les modules de Nuxt, mais aussi disponibles dans le fichier `nuxt.config.js`. + +```js{}[nuxt.config.js] +import fs from 'fs' +import path from 'path' + +export default { + hooks: { + build: { + done(builder) { + const extraFilePath = path.join( + builder.nuxt.options.buildDir, + 'fichier-supplementaire' + ) + fs.writeFileSync(extraFilePath, 'Quelque chose de spécial') + } + } + } +} +``` + +Le fonctionnement des hooks suit un modèle de nommage avec des `:` (ex: `build:done`). Pour des raisons de simplicité de configuration, on peut les structurer de manière hiérarchique pour ses propres hooks en utilisant un objet (cf. code juste au dessus). Se référencer au [fonctionnement interne de Nuxt.js](/docs/2.x/internals-glossary/internals) pour davantage d'informations. + +## Liste des hooks + +- [Nuxt hooks](/docs/2.x/internals-glossary/internals-nuxt#hooks) +- [Renderer hooks](/docs/2.x/internals-glossary/internals-renderer#hooks) +- [ModulesContainer hooks](/docs/2.x/internals-glossary/internals-module-container#hooks) +- [Builder hooks](/docs/2.x/internals-glossary/internals-builder#hooks) +- [Generator hooks](/docs/2.x/internals-glossary/internals-generator#hooks) + +## Exemples + +### Rediriger au `router.base` lorsque l'on n'est pas sur `root` + +Imaginons que l'on souhaite servir les pages sur `/portal` au lieu de `/`. + +C'est peut être un cas particulier, mais le but d'un `router.base` dans `nuxt.config.js` est de permettre à un serveur Web de servir une application Nuxt.js lorsque son point d'entrée n'est pas le domaine principal. + +Ceci dit, lorsque l'on est en développement, aller sur _localhost_, lorsque `router.base` n'est défini à `/` retournera une 404. Pour prévenir cela, on peut configurer un hook. + +La redirection n'est peut-être pas le meilleur cas d'usage pour une application Web en production, mais cela permettra de pratiquer les hooks. + +Pour commencer, on peut changer le [`router.base`](/docs/2.x/configuration-glossary/configuration-router#base) dans le fichier `nuxt.config.js`: + +```js{}[nuxt.config.js] +import hooks from './hooks' +export default { + router: { + base: '/portal' + } + hooks: hooks(this) +} +``` + +Ensuite, nous allons créer quelques nouveaux fichiers: + +1. `hooks/index.js`, module des hooks + + ```js{}[hooks/index.js] + import render from './render' + + export default nuxtConfig => ({ + render: render(nuxtConfig) + }) + ``` + +2. `hooks/render.js`, render du hook + + ```js{}[hooks/render.js] + import redirectRootToPortal from './route-redirect-portal' + + export default nuxtConfig => { + const router = Reflect.has(nuxtConfig, 'router') ? nuxtConfig.router : {} + const base = Reflect.has(router, 'base') ? router.base : '/portal' + + return { + /** + * 'render:setupMiddleware' + * {@link node_modules/nuxt/lib/core/renderer.js} + */ + setupMiddleware(app) { + app.use('/', redirectRootToPortal(base)) + } + } + } + ``` + +3. `hooks/route-redirect-portal.js`, le middleware en question + + ```js{}[hooks/route-redirect-portal.js] + /** + * Hook de middleware de Nuxt.js pour rediriger de `/` à `/portal` (ou toute autre valeur attribuée à `router.base` dans `nuxt.config.js`) + * + * Doit avoir la même version que `connect` + * {@link node_modules/connect/package.json} + */ + import parseurl from 'parseurl' + + /** + * On branche le middleware pour gérer les redirections au contexte principal de l'application Web. + * + * La documentation de Nuxt.js manque d'explications sur l'usage des hooks. + * Ceci est un exemple de router afin d'aider à l'expliquer. + * + * On peut regarder d'autres implémentations en tant qu'inspiration: + * - https://github.com/nuxt/nuxt.js/blob/dev/examples/with-cookies/plugins/cookies.js + * - https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js + * + * [http_class_http_clientrequest]: https://nodejs.org/api/http.html#http_class_http_clientrequest + * [http_class_http_serverresponse]: https://nodejs.org/api/http.html#http_class_http_serverresponse + * + * @param {http.ClientRequest} req objet de la requête du client interne de Node.js [http_class_http_clientrequest] + * @param {http.ServerResponse} res Réponse interne de Node.js [http_class_http_serverresponse] + * @param {Function} next callback du middleware + */ + export default desiredContextRoot => + function projectHooksRouteRedirectPortal(req, res, next) { + const desiredContextRootRegExp = new RegExp(`^${desiredContextRoot}`) + const _parsedUrl = Reflect.has(req, '_parsedUrl') ? req._parsedUrl : null + const url = _parsedUrl !== null ? _parsedUrl : parseurl(req) + const startsWithDesired = desiredContextRootRegExp.test(url.pathname) + const isNotProperContextRoot = desiredContextRoot !== url.pathname + if (isNotProperContextRoot && startsWithDesired === false) { + const pathname = url.pathname === null ? '' : url.pathname + const search = url.search === null ? '' : url.search + const Location = desiredContextRoot + pathname + search + res.writeHead(302, { + Location + }) + res.end() + } + next() + } + ``` + +Ainsi, lorsqu'un collègue accédera accidentellement à `/` en développement, Nuxt.js le redirigera automatiquement vers `/portal`. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/15.configuration-ignore.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/15.configuration-ignore.md new file mode 100644 index 000000000..76d705e08 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/15.configuration-ignore.md @@ -0,0 +1,64 @@ +--- +title: La propriété ignore +description: Définit les fichiers à ignorer pour l'application Nuxt.js +menu: ignore +category: configuration-glossary +position: 14 +--- + +## .nuxtignore + +On peut utiliser un fichier `.nuxtignore` pour dire à Nuxt.js d'ignorer des fichiers `layout`, `page`, `store` et `middleware` à la racine du projet (`rootDir`) durant la phase de build. Le fichier `.nuxtignore` est sujet à la même spécification que les fichiers `.gitignore` et `.eslintignore`, dans lesquels chaque ligne est un _glob pattern_ indiquant quels fichiers devraient être ignorés. + +Par exemple: + +``` +# ignore le layout foo.vue +layouts/foo.vue +# ignore les fichiers layout dont le nom finit par un `-ignore.vue` +layouts/*-ignore.vue + +# ignore la page bar.vue +pages/bar.vue +# ignore la page à l'intérieur du répertoire ignore +pages/ignore/*.vue + +# ignore le store baz.js +store/baz.js +# ignore les fichiers store qui match *.test.* +store/ignore/*.test.* + +# ignore les fichiers middleware dans le répertoire foo sauf foo/bar.js +middleware/foo/*.js +!middleware/foo/bar.js +``` + +> Plus de détails peuvent être trouvés dans la documentation du [gitignore](https://git-scm.com/docs/gitignore). + +## La propriété ignorePrefix + +- Type: `String` +- Par défaut: `'-'` + +> N'importe quel fichier dans `pages/`, `layouts/`, `middleware/` ou `store/` sera ignoré durant la phase de build si le nom du fichier commence par le préfixe spécifié par `ignorePrefix`. + +Par défaut, tous les fichiers qui commencent par un `-` seront ignorés, tels que `store/-foo.js` et `pages/-bar.vue`. Cela permet de pouvoir garder des tests, utilitaires et composants avec leur appelants sans qu'ils ne soient eux même convertis en routes, stores, etc... + +## La propriété ignore + +- Type: `Array` +- Par défaut: `['**/*.test.*']` + +> Encore plus personnalisable que `ignorePrefix`: tous les fichiers qui match les _glob patterns_ spécifiés dans `ignore` seront ignorés lors de la phase de build. + +## ignoreOptions + +`nuxtignore` utilise `node-ignore` de manière implicite, `ignoreOptions` peut donc être configuré comme les `options` dans `node-ignore`. + +```js{}[nuxt.config.js] +export default { + ignoreOptions: { + ignorecase: false + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/16.configuration-loading.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/16.configuration-loading.md new file mode 100644 index 000000000..7ab40f51b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/16.configuration-loading.md @@ -0,0 +1,117 @@ +--- +title: La propriété loading +description: Nuxt.js utilise son propre composant pour montrer une barre de progression lors de la navigation entre les routes. On peut le personnaliser, le désactiver ou même créer le notre. +menu: loading +category: configuration-glossary +position: 15 +--- + +- Type: `Boolean` ou `Object` ou `String` + +> Nuxt.js utilise son propre composant pour montrer une barre de progression lors de la navigation entre les routes. On peut le personnaliser, le désactiver ou même créer le notre. + +```javascript +export default { + mounted() { + this.$nextTick(() => { + this.$nuxt.$loading.start() + + setTimeout(() => this.$nuxt.$loading.finish(), 500) + }) + } +} +``` + +## Désactiver la barre de progression + +- Type: `Boolean` + +```js{}[nuxt.config.js] +export default { + loading: false +} +``` + +## Personnaliser la barre de progression + +- Type: `Object` + +```js +export default { + loading: { + color: 'blue', + height: '5px' + } +} +``` + +Voici la liste des propriétés que vous pouvez utiliser pour personnaliser la barre de progression. + +| Propriété | Type | Défaut | Description | +| ----------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- | +| color | String | 'black' | Couleur CSS de la barre de progression | +| failedColor | String | 'red' | Couleur CSS de la barre de progression lors d'une erreur lors du render d'une route (ex: de la data ou un fetch ont échoué). | +| height | String | '2px' | Hauteur de la barre de progression (utilisé dans la propriété `style` de la barre de progression) | +| throttle | Number | 200 | En millisecondes, le temps a attendre avant que la barre de navigation ne soit affichée. Utile pour éviter de créer des flashs. | +| duration | Number | 5000 | En millisecondes, la durée maximum de la barre de progression, Nuxt.js assume que la route sera render en moins de 5 secondes. | +| continuous | Boolean | false | Continuer d'animer la barre de progression lorsque le chargement prends plus de temps que la valeur de la propriété `duration`. | +| css | Boolean | true | Définir à `false` pour enlever tous les styles appliqués à la barre de progression (y compris les vôtres). | +| rtl | Boolean | false | Définit la direction de la barre de progression, de droite à gauche. | + +## Utiliser un composant de chargement personnalisé + +- Type: `String` + +**Votre composant devra fournir certaines des méthodes suivantes**: + +| Méthode | Requis | Description | +| ------------- | --------- | ----------------------------------------------------------------------------------------------------------------- | +| start() | Requis | Appelé lors d'un changement de route, c'est à ce moment là que vous affichez votre composant. | +| finish() | Requis | Appelé lorsqu'une route est chargée (et la data collectée), c'est à ce moment là que vous cachez votre composant. | +| fail(error) | Optionnel | Appelé lorsqu'une de vos routes n'a pas pu être chargée (ex: le chargement de la data a échoué) | +| increase(num) | Optionnel | Appelé durant le chargement du composant de la route, `num` est un `Integer` < 100. | + +```html{}[components/loading.vue] +<template lang="html"> + <div class="loading-page" v-if="loading"> + <p>Chargement...</p> + </div> +</template> + +<script> + export default { + data: () => ({ + loading: false + }), + methods: { + start() { + this.loading = true + }, + finish() { + this.loading = false + } + } + } +</script> + +<style scoped> + .loading-page { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + text-align: center; + padding-top: 200px; + font-size: 30px; + font-family: sans-serif; + } +</style> +``` + +```js{}[nuxt.config.js] +export default { + loading: '~/components/loading.vue' +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/17.configuration-loading-indicator.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/17.configuration-loading-indicator.md new file mode 100644 index 000000000..bafc23cb3 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/17.configuration-loading-indicator.md @@ -0,0 +1,47 @@ +--- +title: La propriété loading indicator +description: Affiche des indications de chargement originaux lorsque la page SPA est en train de charger ! +menu: loadingIndicator +category: configuration-glossary +position: 16 +--- + +> Affiche des indications de chargement originaux lorsque la page SPA est en train de charger ! + +Lorsque l'on exécute Nuxt.js en mode SPA, il n'y a pas de contenu du côté serveur lors du chargement initial de la page. Donc, au lieu d'afficher une page blanche lorsque l'application charge, on pourrait afficher un spinner. + +Cette propriété peut prendre 3 types différents: `string` ou `false` ou `object`. Si une chaîne de caractères est fournie, elle sera convertie en objet. + +La valeur par défaut est: + +```js +loadingIndicator: { + name: 'circle', + color: '#3B8070', + background: 'white' +} +``` + +## Indicateurs embarqués + +Ces indicateurs sont importés depuis le projet génial qu'est [Spinkit](http://tobiasahlin.com/spinkit). On peut se référer à sa page de démo pour prévisualiser les spinners. + +- circle +- cube-grid +- fading-circle +- folding-cube +- chasing-dots +- nuxt +- pulse +- rectangle-bounce +- rotating-plane +- three-bounce +- wandering-cubes + +Built-in indicators support `color` and `background` options. + +## Indicateurs personnalisés + +Si vous avez besoin de votre propre indicateur spécial, une chaîne de caractères ou un nom de clé peut aussi être le chemin vers le code source d'un template HTML. Toutes les options seront aussi passées au template. + +Le [code source](https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading) de celui de Nuxt.js est aussi disponible si l'on souhaite avoir une base ! diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/18.configuration-mode.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/18.configuration-mode.md new file mode 100644 index 000000000..437819936 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/18.configuration-mode.md @@ -0,0 +1,33 @@ +--- +title: La propriété mode +description: Change le mode par défaut de Nuxt.js +menu: mode +category: configuration-glossary +position: 17 +--- + +- Type: `string` + - Par défaut: `universal` + - Valeurs possibles: + - `'spa'`: Pas de rendu côté serveur (seulement de la navigation côté client) + - `'universal'`: Application isomorphique (rendu côté serveur + navigation côté client) + +> On peut utiliser cette option pour changer le mode par défaut de Nuxt.js en utilisant le fichier `nuxt.config.js` + +<base-alert type="warning"> + +Déprécié: il faut utiliser `ssr: false` au lieu de `mode: spa`. + +</base-alert> + +<base-alert type="next"> + +Pour en savoir davantage sur l'option `SSR`, il faut se référer à la [propriété ssr](/docs/2.x/configuration-glossary/configuration-ssr). + +</base-alert> + +<base-alert type="next"> + +Pour en savoir davantage sur l'option `mode`, il faut se référer à la section sur les [modes de render](/docs/2.x/features/rendering-modes). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/19.configuration-modern.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/19.configuration-modern.md new file mode 100644 index 000000000..4e0b573ac --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/19.configuration-modern.md @@ -0,0 +1,48 @@ +--- +title: La propriété modern +description: Build et sert un bundle moderne +menu: modern +category: configuration-glossary +position: 18 +--- + +> Cette fonctionnalité est inspirée du mode `modern` de [vue-cli](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode). + +- Type: `String` ou `Boolean` + - Par défaut: `false` + - Valeurs possibles: + - `'client'`: Sert les deux scripts, le bundle moderne `<script type="module">` et le bundle legacy `<script nomodule>`, fournit aussi un `<link rel="modulepreload">` pour le bundle moderne. Chaque navigateur qui comprend le type `module` chargera le bundle moderne pendant que les navigateurs plus anciens utiliseront le bundle legacy de secours (ce dernier sera transpilé). + - `'server'` ou `true`: Le serveur Node.js va vérifier la version du navigateur grâce au _user agent_ et servira le bundle moderne ou de secours en fonction. + - `false`: désactive le build moderne. + +Les deux bundles possibles sont: + +1. Bundle moderne: vise les navigateurs modernes qui supportent les _ES modules_ +2. Bundle legacy (de secours): vise les navigateurs plus anciens en fonction de la configuration de Babel (compatible IE9 par défaut). + +**Info**: + +- On peut utiliser la commande `[--modern | -m]=[mode]` pour build/démarrer les bundles modernes: + +```json{}[package.json] +{ + "scripts": { + "build:modern": "nuxt build --modern=server", + "start:modern": "nuxt start --modern=server" + } +} +``` + +**Information à propos de _nuxt generate_**: La propriété `modern` marche aussi avec la commande `nuxt generate`, mais dans ce cas là, seulement l'option `client` est honorée et sera sélectionnée lors de l'exécution de la commande `nuxt generate --modern` sans fournir d'autres valeurs. + +- Nuxt.js va automatiquement détecter le build `moderne` dans `nuxt start` lorsque `modern` n'est pas spécifié, le mode d'auto-détection est le suivant: + +| Mode | Modern Mode | +| --------- | :---------: | +| universal | server | +| spa | client | + +- Le mode `moderne` pour `nuxt generate` ne peut être que `client` +- Il faut utiliser [`render.crossorigin`](/docs/2.x/configuration-glossary/configuration-render#crossorigin) pour définir l'attribut `crossorigin` dans `<link>` et `<script>`. + +> Se réferer à l'excellent post de [Phillip Walton](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) sur les builds modernes. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/2.configuration-build.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/2.configuration-build.md new file mode 100644 index 000000000..1697d3c20 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/2.configuration-build.md @@ -0,0 +1,787 @@ +--- +title: La propriété build +description: Nuxt.js nous permet de personnaliser la configuration de webpack afin de build notre application Web comme on l'entend. +menu: build +category: configuration-glossary +position: 1 +--- + +> Nuxt.js nous permet de personnaliser la configuration de webpack afin de build notre application Web comme on l'entend. + +## analyze + +> Nuxt.js utilise [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) pour nous permettre de visualiser les bundles et trouver comment les optimiser. + +- Type: `Boolean` ou `Object` +- Par défaut: `false` + +Si c'est un objet, les propriétés disponibles sont visibles [ici](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin). + +```js{}[nuxt.config.js] +export default { + build: { + analyze: true, + // ou + analyze: { + analyzerMode: 'static' + } + } +} +``` + +<base-alert type="info"> + +**Info**: on peut utiliser la commande `yarn nuxt build --analyze` ou bien `yarn nuxt build -a` pour build notre application et lancer l'analyseur des bundles sur [http://localhost:8888](http://localhost:8888). Si on n'utilise pas `yarn`, on peut exécuter la commande avec `npx`. + +</base-alert> + +## corejs + +> Depuis [Nuxt@2.14](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0), Nuxt.js va automatiquement détecter la version actuelle de `core-js` dans notre projet. On peut bien sûr aussi lui spécifier la version que l'on veut utiliser. + +- Type: `number` | `string` (Les valeurs disponibles sont `'auto'`, `2` et `3`) +- Default: `'auto'` + +## babel + +> Permet de personnaliser la configuration Babel pour le JavaScript et les fichiers Vue. `.babelrc` est ignoré par défaut. + +- Type: `Object` +- Voir les [options](https://github.com/babel/babel-loader#options) de `babel-loader` et les [options](https://babeljs.io/docs/en/options) de `babel`. +- Par défaut: + + ```js + { + babelrc: false, + cacheDirectory: undefined, + presets: ['@nuxt/babel-preset-app'] + } + ``` + +Les cibles par défaut de [@nuxt/babel-preset-app](https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js) sont `ie: '9'` dans le build `client`, et `node: 'current'` dans le build `serveur`. + +### presets + +- Type: `Function` +- Argument: + 1. `Object`: { isServer: true | false } + 2. `Array`: + - nom du preset `@nuxt/babel-preset-app` + - [`options`](https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app#options) de `@nuxt/babel-preset-app` + +**Note**: Les presets configurés dans `build.babel.presets` seront appliqués tant au build du client que celui du serveur. La cible sera choisie par Nuxt.js en conséquence (client/serveur). Si on veut configurer le preset différemment, il faut utiliser `presets` en tant que fonction: + +> Nous recommandons **très chaudement** d'utiliser la configuration par défaut au lieu du code plus bas + +```js +export default { + build: { + babel: { + presets({ isServer }, [ preset, options ]) { + // on change directement les options + options.targets = isServer ? ... : ... + options.corejs = ... + // renvoie rien + } + } + } +} +``` + +On peut aussi écraser les valeurs par défaut en retournant la liste complète des presets: + +```js +export default { + build: { + babel: { + presets({ isServer }, [preset, options]) { + return [ + [ + preset, + { + buildTarget: isServer ? 'server' : 'client', + ...options + } + ], + [ + // d'autres presets + ] + ] + } + } + } +} +``` + +## cache + +- Type: `Boolean` +- Par défaut: `false` +- ⚠️ Expérimental + +> Active le cache de [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin#options) et de [cache-loader](https://github.com/webpack-contrib/cache-loader#cache-loader) + +## cssSourceMap + +- Type: `boolean` +- Par défaut: `true` pour le développement et `false` pour la production. + +> Active le support du CSS Source Map + +## devMiddleware + +- Type: `Object` + +Voir [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) pour les options disponibles. + +## devtools + +- Type: `boolean` +- Par défaut: `false` + +Définit le droit d'afficher l'inspection des [vue-devtools](https://github.com/vuejs/vue-devtools). + +Si cela a déjà été activé grâce au fichier `nuxt.config.js` ou autrement, les devtools seront activés, peu importe le flag. + +## extend + +> Permet de personnaliser manuellement la configuration de Webpack pour les bundles client et serveur. + +- Type: `Function` + +`extend` est appelé deux fois, une fois pour le bundle du serveur, et une fois pour celui du client. Les arguments de la méthode sont: + +1. L'objet de configuration Webpack +2. L'objet avec les clés suivantes (tous sont des booléens sauf `loaders`): `isDev`, `isClient`, `isServer` et `loaders`. + +<base-alert> + +**Attention**: Les clés `isClient` et `isServer` fournies n'ont rien à voir avec celles présentes dans le [`context`](/docs/2.x/internals-glossary/context). Elles ne sont **pas** dépréciées. Il ne faut en outre pas utiliser `process.client` et `process.server` ici car ils seront `undefined` à ce niveau. + +</base-alert> + +```js{}[nuxt.config.js] +export default { + build: { + extend(config, { isClient }) { + // personnalisotion de la configuration Webpack seulement pour le bundle client + if (isClient) { + config.devtool = 'source-map' + } + } + } +} +``` + +Si on souhaite en savoir davantage sur la configuration Webpack par défaut, il faut aller jeter un coup d'œil au [répertoire de Webpack](https://github.com/nuxt/nuxt.js/tree/dev/packages/webpack/src/config). + +### Les loaders dans extend + +Les `loaders` ont la même structure au niveau de l'objet que [build.loaders](#loaders), on peut donc changer les options des `loaders` à l'intérieur d'`extend`. + +```js{}[nuxt.config.js] +export default { + build: { + extend(config, { isClient, loaders: { vue } }) { + // personnalisotion de la configuration Webpack seulement pour le bundle client + if (isClient) { + vue.transformAssetUrls.video = ['src', 'poster'] + } + } + } +} +``` + +## extractCSS + +> Permet le `Common CSS Extraction` en utilisant les [directives](https://ssr.vuejs.org/en/css.html) du package `Vue Server Renderer`. + +- Type: `Boolean` ou `Object` +- Par défaut: `false` + +L'usage de [`extract-css-chunks-webpack-plugin`](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/) se fait de manière implicite, en séparant notre CSS dans des fichiers séparés, un par composant en général. Cela permet de mettre en cache notre CSS et notre JavaScript séparément et est sans doute quelque chose à essayer dans le cas où on possède beaucoup de CSS global ou partagé. + +Exemple (`nuxt.config.js`): + +```js +export default { + build: { + extractCSS: true, + // ou + extractCSS: { + ignoreOrder: true + } + } +} +``` + +<base-alert type="info"> + +**Note**: Il y avait un bug avant Vue 2.5.18 qui enlevait les imports critiques de CSS lors de l'usage de cette option. + +</base-alert> + +On pourrait souhaiter extraire tout notre CSS dans un seul fichier. Il y a une solution pour cela: + +<base-alert> + +Ce n'est pas recommandé de tout extraire dans un seul fichier. Extraire dans plusieurs fichiers CSS est meilleur pour la mise en cache et l'isolation dans le cas d'un préchargement. Cela peut aussi améliorer la performance de la page en ne téléchargeant que les ressources dont on a besoin. + +</base-alert> + +```js +export default { + build: { + extractCSS: true, + optimization: { + splitChunks: { + cacheGroups: { + styles: { + name: 'styles', + test: /\.(css|vue)$/, + chunks: 'all', + enforce: true + } + } + } + } + } +} +``` + +## filenames + +> Permet de personnaliser le nom des fichiers des bundles. + +- Type: `Object` +- Par défault: + + ```js + { + app: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[contenthash:7]${isModern ? '.modern' : ''}.js`, + chunk: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[contenthash:7]${isModern ? '.modern' : ''}.js`, + css: ({ isDev }) => isDev ? '[name].css' : 'css/[contenthash:7].css', + img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[contenthash:7].[ext]', + font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[contenthash:7].[ext]', + video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[name].[contenthash:7].[ext]' + } + ``` + +Cet exemple change les noms originaux des fragments en des identifiants numériques: + +```js{}[nuxt.config.js] +export default { + build: { + filenames: { + chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js') + } + } +} +``` + +Pour comprendre un peu mieux l'utilisation des `manifests`, il faut se référer à la [documentation de Webpack](https://webpack.js.org/guides/code-splitting/). + +<base-alert> + +Il faut bien faire attention lorsque l'on utilise des noms de fichiers non hashés en production car la plupart des navigateurs vont mettre en cache la ressource et ne détecteront pas les modifications lors du premier chargement. + +</base-alert> + +## friendlyErrors + +- Type: `Boolean` +- Par défaut: `true` (Affichage sympa activé) + +Active ou désactive les indications claires et précises fournies par [FriendlyErrorsWebpackPlugin](https://github.com/nuxt/friendly-errors-webpack-plugin). + +## hardSource + +- Type: `Boolean` +- Par défaut: `false` +- ⚠️ Expérimental + +Active le plugin [HardSourceWebpackPlugin](https://github.com/mzgoddard/hard-source-webpack-plugin) pour une mise en cache améliorée. + +## hotMiddleware + +- Type: `Object` + +Se référer à [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) pour les options disponibles. + +## html.minify + +- Type: `Object` +- Par défault: + +```js +{ + collapseBooleanAttributes: true, + decodeEntities: true, + minifyCSS: true, + minifyJS: true, + processConditionalComments: true, + removeEmptyAttributes: true, + removeRedundantAttributes: true, + trimCustomFragments: true, + useShortDoctype: true +} +``` + +**Attention**: si l'on fait des changements à `html.minify`, il ne seront pas fusionnés avec les valeurs par défaut ! + +La configuration pour le plugin [html-minifier](https://github.com/kangax/html-minifier) est là pour minifier les fichiers HTML créés durant le processus de build (la minification sera appliqueé pour _tous les modes_). + +## indicator + +> Affiche un indicateur de build pour le Hot Module Replacement (HMR) lors du développement. Disponible depuis la `v2.8.0`. + +- Type: `Boolean` +- Par défault: `true` + +![nuxt-build-indicator](https://user-images.githubusercontent.com/5158436/58500509-93ba0f80-8197-11e9-8524-e115c6d32571.gif) + +## loaders + +> Permet de personnaliser les options de Nuxt.js par rapport aux loaders intégrés. + +- Type: `Object` +- Par défault: + +```js +{ + file: {}, + fontUrl: { limit: 1000 }, + imgUrl: { limit: 1000 }, + pugPlain: {}, + vue: { + transformAssetUrls: { + video: 'src', + source: 'src', + object: 'src', + embed: 'src' + } + }, + css: {}, + cssModules: { + localIdentName: '[local]_[hash:base64:5]' + }, + less: {}, + sass: { + indentedSyntax: true + }, + scss: {}, + stylus: {}, + vueStyle: {} +} +``` + +> Note: en plus de spécifier la configuration d ans un fichier `nuxt.config.js`, cela peut aussi être modifié par [build.extend](#extend). + +### loaders.file + +> Davantage de détails dans les [options de file-loader](https://github.com/webpack-contrib/file-loader#options). + +### loaders.fontUrl and loaders.imgUrl + +> Davantage de détails dans les [options d'url-loader](https://github.com/webpack-contrib/url-loader#options). + +### loaders.pugPlain + +> Davantage de détails dans le [pug-plain-loader](https://github.com/yyx990803/pug-plain-loader) ou [les options du compilateur Pug](https://pugjs.org/api/reference.html#options). + +### loaders.vue + +> Davantage de détails dans les [options de vue-loader](https://vue-loader.vuejs.org/options.html). + +### loaders.css and loaders.cssModules + +> Davantage de détails dans les [options du css-loader](https://github.com/webpack-contrib/css-loader#options). + +Note: les [CSS modules](https://vue-loader.vuejs.org/guide/css-modules.html#css-modules) sont des options pour le loader. + +### loaders.less + +> On peut passer des options spécifique à Less au `less-loader` via `loaders.less`. Se référer à la documentation de [Less](http://lesscss.org/usage/#command-line-usage-options) pour toutes les options disponibles. + +### loaders.sass et loaders.scss + +> Se référer à la documentation de [Node Sass](https://github.com/sass/node-sass/blob/master/README.md#options) pour toutes les options disponibles de Sass. + +> Note: `loaders.sass` est utilisé pour la [Syntaxe Indentée de Sass](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html). + +### loaders.vueStyle + +> Davantage de détails dans les options de [vue-style-loader](https://github.com/vuejs/vue-style-loader#options). + +## optimization + +- Type: `Object` +- Par défault: + + ```js + { + minimize: true, + minimizer: [ + // terser-webpack-plugin + // optimize-css-assets-webpack-plugin + ], + splitChunks: { + chunks: 'all', + automaticNameDelimiter: '.', + name: undefined, + cacheGroups: {} + } + } + ``` + +La valeur par défaut de `splitChunks.name` est `true` dans le mode `dev` ou bien `analyze`. + +On peut définir `minimizer` à un tableau personnalisé de plugins ou définir `minimize` à `false` pour désactiver tous les minimiseurs. (`minimize` est désactivé lors du développement par défaut) + +Se référer à la documentation sur [l'optimisation de Webpack](https://webpack.js.org/configuration/optimization). + +## optimizeCSS + +- Type: `Object` ou `Boolean` +- Par défault: + - `false` + - `{}` lorsque extractCSS est activé + +Les options du plugin OptimizeCSSAssets. + +Se référer à [NMFR/optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). + +## parallel + +- Type: `Boolean` +- Par défaut: `false` +- ⚠️ Expérimental + +> Active le [thread-loader](https://github.com/webpack-contrib/thread-loader#thread-loader) lors du build de Webpack. + +## plugins + +> Ajoute des plugins Webpack + +- Type: `Array` +- Par défault: `[]` + +```js{}[nuxt.config.js] +import webpack from 'webpack' +import { version } from './package.json' +export default { + build: { + plugins: [ + new webpack.DefinePlugin({ + 'process.VERSION': version + }) + ] + } +} +``` + +## postcss + +> Permet de personnaliser les plugins du [PostCSS Loader](https://github.com/postcss/postcss-loader#usage). + +- Type: `Array` (legacy, écrasera les valeurs par défaut), `Object` (recommandé), `Function` ou `Boolean` + +**Note**: Nuxt.js a appliqué [PostCSS Preset Env](https://github.com/csstools/postcss-preset-env). Par défaut, cela active les [fonctionnalités du niveau 2](https://cssdb.org/) et l'[Autoprefixer](https://github.com/postcss/autoprefixer), on peut utiliser `build.postcss.preset` pour le configurer. + +- Par défault: + + ```js{}[nuxt.config.js] + { + plugins: { + 'postcss-import': {}, + 'postcss-url': {}, + 'postcss-preset-env': this.preset, + 'cssnano': { preset: 'default' } // désactivé lors du développement + }, + order: 'presetEnvAndCssnanoLast', + preset: { + stage: 2 + } + } + ``` + +Les paramètres personnalisés du plugin seront fusionnés avec les valeurs par défaut des plugins (à moins qu'on n'utilise un `Array` au lieu d'un `Object`). + +```js{}[nuxt.config.js] +export default { + build: { + postcss: { + plugins: { + // désactive `postcss-url` + 'postcss-url': false, + // ajouter quelques plugins + 'postcss-nested': {}, + 'postcss-responsive-type': {}, + 'postcss-hexrgba': {} + }, + preset: { + autoprefixer: { + grid: true + } + } + } + } +} +``` + +Si la configuration postCSS est un `Object`, `order` peut être utilisé pour définir l'ordre du plugin: + +- Type: `Array` (nom des plugins rangés), `String` (rangé selon le nom du preset), `Function` +- Par défaut: `cssnanoLast` (`cssnano` est en dernier) + +```js{}[nuxt.config.js] +export default { + build: { + postcss: { + // nom du preset + order: 'cssnanoLast', + // nom des plugins rangés + order: ['postcss-import', 'postcss-preset-env', 'cssnano'] + // fonction pour déterminer l'ordre du plugin + order: (names, presets) => presets.cssnanoLast(names) + } + } +} +``` + +### plugins postcss et nuxt-tailwindcss + +Si l'on souhaite appliquer un plugin postCSS (ex: `postcss-pxtorem`) sur une configuration de `nuxt-tailwindcss`, on doit changer l'ordre et charger `tailwindcss` en premier. + +**Cette configuration n'a pas d'impact sur `nuxt-purgecss`.** + +```js{}[nuxt.config.js] +import { join } from 'path' + +export default { + // ... + build: { + postcss: { + plugins: { + tailwindcss: join(__dirname, 'tailwind.config.js'), + 'postcss-pxtorem': { + propList: ['*', '!border*'] + } + } + } + } +} +``` + +## profile + +- Type: `Boolean` +- Par défault: activé avec l'argument `--profile` dans la ligne de commande + +> Active le profiler dans [WebpackBar](https://github.com/nuxt/webpackbar#profile) + +## publicPath + +> Nuxt.js nous permet de téléverser les fichiers présents dans notre répertoire `dist` jusqu'à notre CDN pour des performances maximales, il suffit de définir l'URL de notre CDN dans `publicPath`. + +- Type: `String` +- Default: `'/_nuxt/'` + +```js{}[nuxt.config.js] +export default { + build: { + publicPath: 'https://cdn.nuxtjs.org' + } +} +``` + +Ensuite, lorsque on lance `nuxt build`, il suffit de téléverser le contenu du répertoire `.nuxt/dist/client` dans notre CDN et voilà ! + +## quiet + +> Supprime la majeure partie de la journalisation des builds + +- Type: `Boolean` +- Par défault: Activé lorsque l'environment détecté par [std-env](https://github.com/blindmedia/std-env) est égal à `CI` ou `test`. + +## splitChunks + +- Type: `Object` +- Par défault: + + ```js{}[nuxt.config.js] + export default { + build: { + splitChunks: { + layouts: false, + pages: true, + commons: true + } + } + } + ``` + +<!-- If split codes for `layout`, `pages` and `commons` (common libs: vue|vue-loader|vue-router|vuex...). --> + +## ssr + +> Crée un bundle Webpack spécial pour le rendu côté serveur. + +- Type: `Boolean` +- Par défault: `true` pour le mode universel et `false` pour notre soirée SPA + +Cette option est automatiquement définie en se basant sur la valeur de `mode` si rien n'est fourni. + +## styleResources + +- Type: `Object` +- Par défault: `{}` + +<base-alert> + +**Attention**: cette propriété est dépréciée. Il faudrait utiliser le module [style-resources-module](https://github.com/nuxt-community/style-resources-module/) à la place, pour avoir des performances accrues et une meilleure DX ! + +</base-alert> + +Ceci est utile lorsque on a besoin d'injecter certains variables ou mixins à l'intérieur de nos pages sans avoir besoin de les importer à chaque fois. + +Nuxt.js utilise https://github.com/yenshih/style-resources-loader pour réussir ce comportement. + +Il y a besoin de spécifier un schéma/un chemin si on veut la partager pour les pre-processors nuls et ajoute des: `less`, `sass`, `scss` ou `stylus`. + +On ne peut pas utiliser d'alias de chemin (`~` ou `@`), on aura besoin d'utiliser des chemins relatifs ou absolus. + +```js{}[nuxt.config.js] +{ + build: { + styleResources: { + scss: './assets/variables.scss', + less: './assets/*.less', + // sass: ..., + // scss: ... + options: { + // See https://github.com/yenshih/style-resources-loader#options + // Sauf la propriété `patterns` + } + } + } +} +``` + +## templates + +> Nuxt.js nous permet d'utiliser nos propres templates qui seront render basés sur les [modules](/docs/2.x/directory-structure/modules). + +- Type: `Array` + +```js{}[nuxt.config.js] +export default { + build: { + templates: [ + { + src: '~/modules/support/plugin.js', // `src` peut être relatif ou absolu + dst: 'support.js', // `dst` est relative au project `.nuxt` dir + options: { + // les options sont passés aux templates grâce à la clé `options` + live_chat: false + } + } + ] + } +} +``` + +Les templates sont render en utilisant [`lodash.template`](https://lodash.com/docs/#template), cela permet d'en savoir plus sur les otages et leur mentalité/adresse psk c'est sincère. + +## terser + +- Type: `Object` ou `Boolean` +- Par défault: + +```js{}[nuxt.config.js] +{ + parallel: true, + cache: false, + sourceMap: false, + extractComments: { + filename: 'LICENSES' + }, + terserOptions: { + output: { + comments: /^\**!|@preserve|@license|@cc_on/ + } + } +} +``` + +Options du plugin Terser. Il suffit de mettre un `false` pour désactiver le plugin. + +L'activation de `sourceMap` laissera le commentaire de liaison `//# sourceMappingURL` à la fin de chaque fichier de sortie si webpack `config.devtool` est défini sur `source-map`. + +Voir [webpack-contrib/terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin). + +## transpile + +- Type: `Array<String | RegExp | Function>` +- Par défault: `[]` + +Si on veut transpiler certaines dépendances spécifiques avec Babel, on peut les ajouter dans `build.transpile`. Chaque item transpilé peut être un nom de package, une chaîne de caractères ou un objet regex pour matcher le nom du fichier avec la dépendance que l'on souhaite. + +Depuis `v2.9.0`, on peut aussi utiliser une fonction pour rendre la transpilation conditionnelle, la fonction recevra un objet (`{ isDev, isServer, isClient, isModern, isLegacy }`): + +```js{}[nuxt.config.js] +{ + build: { + transpile: [({ isLegacy }) => isLegacy && 'ky'] + } +} +``` + +## vueLoader + +> Note: Cette configuration a été enlevée depuis Nuxt 2.0, il faut maintenant utiliser [`build.loaders.vue`](#loaders) à la place. + +- Type: `Object` +- Par défault: + + ```js{}[nuxt.config.js] + { + productionMode: !this.options.dev, + transformAssetUrls: { + video: 'src', + source: 'src', + object: 'src', + embed: 'src' + } + } + ``` + +> Pour spécifier les options [Vue Loader Options](https://vue-loader.vuejs.org/options.html). + +## watch + +> On peut fournir nos propres fichiers personnalisés à surveiller avant de régénérer après des modifications. Cette fonctionnalité est surtout utile à utiliser avec [modules](/docs/2.x/directory-structure/modules). + +- Type: `Array<String>` + +```js{}[nuxt.config.js] +export default { + build: { + watch: ['~/.nuxt/support.js'] + } +} +``` + +## followSymlinks + +> Par défaut, le build process ne scan pas les fichiers avec des liens symboliques. Ce booléen les inclut, et nous permet donc d'avoir des liens symboliques à l'intérieur des répertoires tels que `pages` par exemple. + +- Type: `Boolean` + +```js{}[nuxt.config.js] +export default { + build: { + followSymlinks: true + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/20.configuration-modules.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/20.configuration-modules.md new file mode 100644 index 000000000..c0bada739 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/20.configuration-modules.md @@ -0,0 +1,54 @@ +--- +title: La propriété modules +description: Les modules sont des extensions Nuxt.js qui peuvent personnaliser les fonctionnalités principales et ajouter des intégrations sans fin. +menu: modules +category: configuration-glossary +position: 19 +--- + +- Type: `Array` + +> Les modules sont des extensions Nuxt.js qui peuvent personnaliser les fonctionnalités principales et ajouter des intégrations sans fin. [En apprendre davantage](/docs/2.x/directory-structure/modules) + +Exemple (`nuxt.config.js`): + +```js +export default { + modules: [ + // en utilisant le nom du package + '@nuxtjs/axios', + + // de manière relative par rapport au répertoire source du projet (srcDir) + '~/modules/awesome.js', + + // on peut lui passer des options + ['@nuxtjs/google-analytics', { ua: 'X1234567' }], + + // ou le définir directement + function () {} + ] +} +``` + +Les développeurs fournissent la plupart du temps des étapes et détails additionnels pour l'utilisation des modules. + +Nuxt.js essaie de résoudre chaque élément qui est présent dans le tableau des modules en utilisant `require path` de Node (dans les `node_modules`) et résout ensuite en partant du `srcDir` du projet si un alias `~` est utilisé. Les modules sont exécutés de manière séquentielle, l'ordre est donc important. + +Les modules doivent exporter une fonction pour permettre d'améliorer le build/runtime et peuvent (optionnel) aussi retourner une promesse en attendant que leur job ne soit terminé. À noter qu'ils seront importés au runtime, donc ils doivent déjà être transpilés s'ils utilisent des fonctionnalités modernes (ex: ES6). + +Se référer au [guide des modules](/docs/2.x/directory-structure/modules) pour des informations détaillées sur leur fonctionnement ou si l'on souhaite développer son propre module. En outre, nous avons une section officielle des [modules](https://github.com/nuxt-community/awesome-nuxt#modules), listant des douzaines de modules prêts à l'emploi et faits par la communauté de Nuxt.js. + +## `buildModules` + +<div class="Alert Alert--info"> + +Cette fonctionnalité est disponible depuis Nuxt v2.9 + +</div> + +Certains modules sont importés seulement lors du développement et du build. Utiliser `buildModules` permet de démarrer un projet en production plus rapidement et réduit aussi significativement la taille des `node_modules` pour les déploiements en production. Se référer à la documentation de chaque module pour voir s'il est recommandé d'utiliser `modules` ou `buildModules`. + +La différence à l'utilisation est la suivante: + +- Au lieu d'ajouter aux `modules` à l'intérieur du fichier `nuxt.config.js`, il faut utiliser `buildModules` +- Au lieu d'ajouter aux `dependencies` à l'intérieur du fichier `package.json`, il faut utiliser `devDependencies` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/21.configuration-modulesdir.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/21.configuration-modulesdir.md new file mode 100644 index 000000000..b017da2b1 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/21.configuration-modulesdir.md @@ -0,0 +1,20 @@ +--- +title: La propriété modulesDir +description: Définit le répertoires des modules pour l'application Nuxt.js +menu: modulesDir +category: configuration-glossary +position: 20 +--- + +- Type: `Array` +- Par défaut: `['node_modules']` + +Cette propriété est utilisée pour définir les répertoires des modules afin de déterminer le chemin de résolution. Par ex: le `resolveLoading`, ` nodeExternals` et `postcss` de Webpack. Le chemin de la configuration est relatif par rapport à `options.rootDir` (par défaut: process.cwd()). + +```js{}[nuxt.config.js] +export default { + modulesDir: ['../../node_modules'] +} +``` + +Adapter cet emplacement peut être nécessaire si le projet est organisé en tant que workspace Yarn avec un mono-repo. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/22.configuration-plugins.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/22.configuration-plugins.md new file mode 100644 index 000000000..db388236c --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/22.configuration-plugins.md @@ -0,0 +1,57 @@ +--- +title: 'API: La propriété plugins' +description: 'Use vue.js plugins with the plugins option of Nuxt.js.' +menu: plugins +category: configuration-glossary +position: 21 +--- + +**Note**: Depuis Nuxt.js v2.4, `mode` est disponible en tant qu'option pour les `plugins` afin de spécifier leur type, les valeurs possibles sont: `client` ou `server`. `ssr: false` sera transformé en `mode: 'client'` et déprécié dans la prochaine mise à jour majeure. + +- Type: `Array` + - Items: `String` ou `Object` + +Si l'élément est un objet, les propriétés sont: + +- src: `String` (le chemin du fichier) +- mode: `String` (`client` ou `server`) _Si défini, le fichier sera inclus seulement du côté (client ou serveur)._ + +**Note**: Ancienne version + +- Type: `Array` + - Items: `String` ou `Object` + +Si l'élément est un objet, les propriétés sont: + +- src: `String` (le chemin du fichier) +- ssr: `Boolean` (par défaut à `true`) _Si faux, le fichier sera inclus seulement du côté client._ + +> La propriété `plugins` nous permet d'ajouter des plugins Vue.js à notre application principale. + +```js{}[nuxt.config.js] +export default { + plugins: [ + { src: '~/plugins/both-sides.js' }, + { src: '~/plugins/client-only.js', mode: 'client' }, + { src: '~/plugins/server-only.js', mode: 'server' } + ] +} +``` + +```js{}[nuxt.config.js] +export default { + plugins: ['@/plugins/ant-design-vue'] +} +``` + +```js{}[plugins/ant-design-vue.js] +import Vue from 'vue' +import Antd from 'ant-design-vue' +import 'ant-design-vue/dist/antd.css' // comme indiqué dans la documentation d'Ant Design + +Vue.use(Antd) +``` + +À noter que le CSS a été importé selon la documentation de [Ant Design](https://www.antdv.com/docs/vue/getting-started/#3.-Use-antd's-Components). + +Tous les chemins définis dans la propriété `plugins` seront **importés** avant l'initialisation de l'application principale. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/23.configuration-render.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/23.configuration-render.md new file mode 100644 index 000000000..a2009a419 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/23.configuration-render.md @@ -0,0 +1,266 @@ +--- +title: La propriété render +description: Nuxt.js permet de personnaliser les options au runtime pour le render des pages +menu: render +category: configuration-glossary +position: 22 +--- + +> Nuxt.js permet de personnaliser les options au runtime pour le render des pages + +## bundleRenderer + +- Type: `Object` + +> On peut utiliser cette option pour personnaliser le render pour le bundle de `Vue SSR`. Cette option est ignorée lorsque l'on est en mode SPA. + +```js{}[nuxt.config.js] +export default { + render: { + bundleRenderer: { + directives: { + personnalise1(el, dir) { + // quelque chose ... + } + } + } + } +} +``` + +Pour en savoir davantage sur les options disponibles, on peut consulter l'API de [Vue SSR](https://ssr.vuejs.org/en/api.html#renderer-options). Il est recommandé de ne pas utiliser cette option car Nuxt.js s'occupe déjà de fournir les meilleures valeurs par défaut pour le rendu côté serveur et, une mauvaise configuration pourrait mener à des problèmes de SSR. + +## etag + +- Type: `Object` + - Par défaut: `{ weak: true }` + +Pour désactiver `etag` pour les pages, il faut définir `etag: false`. + +Se référer à la documentation de [etag](https://www.npmjs.com/package/etag) pour voir les options disponibles. + +On peut utiliser notre propre fonction de hash en définissant `etag.hash`: + +```js{}[nuxt.config.js] +import { murmurHash128 } from 'murmurhash-native' + +export default { + render: { + etag: { + hash: html => murmurHash128(html) + } + } +} +``` + +Dans ce cas, nous utilisons [murmurhash-native](https://github.com/royaltm/node-murmurhash-native), qui est plus rapide pour des body HTML plus larges. À noter que l'option `weak` est ignorée lorsque l'on spécifie notre propre fonction de hachage. + +## compressor + +- Type `Object` + - Par défaut: `{ threshold: 0 }` + +Lorsque l'on fournit un objet, le middleware de [compression](https://www.npmjs.com/package/compression) sera utilisé (avec les options adéquates). + +Si l'on souhaite utiliser notre propre middleware de compression, on peut le désigner directement (ex: `otherComp({ myOptions: 'exemple' })`). + +Pour désactiver la compression, on utilise `compressor: false`. + +## fallback + +- Type `Object` + - Par défaut: `{ dist: {}, static: { skipUnknown: true } }` + +> Options pour le middleware de [serve-placeholder](https://github.com/nuxt/serve-placeholder). + +Si on souhaite désactiver un des deux voire les deux, il suffit de passer une valeur `falsy`. + +## http2 + +- Type `Object` + - Par défaut: `{ push: false, pushAssets: null }` + +> Active les headers push en HTTP2. + +On peut surveiller les liens que l'on pousse en utilisant la fonction `pushAssets`. + +Exemple: + +```js +pushAssets: (req, res, publicPath, preloadFiles) => + preloadFiles + .filter(f => f.asType === 'script' && f.file === 'runtime.js') + .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`) +``` + +On peut aussi ajouter nos propres ressources au tableau. En utilisant `req` et `res` on peut décider quels liens seront poussés en fonction des entêtes de la requête, par exemple en utilisant le cookie contenant le numéro de version de notre application. + +Les ressources seront reliées entre elles par un `,` et passées en tant qu'un seul entête `Link`. + +## injectScripts + +- Type: `Boolean` + - Par défaut: `true` + +> Ajoute le `<script>` pour les bundles de Nuxt.js, il faut le définir à `false` pour render du HTML pur, sans JS (disponible depuis la version `2.8.0`). + +## resourceHints + +- Type: `Boolean` + - Par défaut: `true` + +> Ajoute des liens `prefetch` et `preload` pour un chargement de page initial plus rapide. + +On pourrait souhaiter désactiver cette option seulement si l'on possède beaucoup de pages et de routes. + +## ssr + +- Type: `Boolean` + - Par défaut: `true` en mode universel et `false` en mode SPA + +> Active le render SSR + +Si non fournie, cette option est automatiquement définie en fonction de la valeur de `mode`. Elle peut être utile pour dynamiquement activer/désactiver le SSR lors du runtime après que les builds des images soient finis (avec Docker par exemple). + +## crossorigin + +- Type: `String` +- Par défaut: `undefined` + +> Permet de personnaliser l'attribut `crossorigin` dans les balises `<link rel="stylesheet">` et `<script>` générées dans le HTML. + +Plus d'informations: [attributs des paramètres CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes). + +## ssrLog + +- Type: `Boolean` | `String` + - Par défaut: `true` en mode développement et `false` en production + +> Transmet les logs du serveur au navigateur pour un meilleur débogage (disponible uniquement en développement). + +Pour réduire (rendu visuel) les logs, on peut utiliser la valeur `'collapsed'`. + +## static + +- Type: `Object` + - Par défaut: `{}` + +> Permet de personnaliser le comportement du répertoire `static/` + +Se référer à la documentation de [serve-static](https://www.npmjs.com/package/serve-static) pour voir les options disponibles. + +En plus de celles-ci, nous avons introduit une option `prefix` qui est à `true` par défaut. Cela a pour but d'ajouter la base du routeur à nos ressources statiques. + +**Exemple:** + +- Ressource: `favicon.ico` +- Base du routeur: `/t` +- Avec `prefix: true` (par défaut): `/t/favicon.ico` +- Avec `prefix: false`: `/favicon.ico` + +**Mise en garde**: + +Certaines ré-écritures d'URL peuvent ne pas respecter le préfixe. + +## dist + +- Type: `Object` + - Par défaut: `{ maxAge: '1y', index: false }` + +> Options utilisées pour les fichiers distribués. Applicable seulement en production. + +Se référer à la documentation de [serve-static](https://www.npmjs.com/package/serve-static) pour voir les options disponibles. + +## csp + +- Type: `Boolean` ou `Object` + - Par défaut: `false` + +> On peut utiliser ceci pour configurer le Content-Security-Policy afin de charger des ressources externes. + +**Pré-requis**: + +Ces paramètres CSP sont effectifs seulement quand on utilise Nuxt.js avec `target: 'server'` pour servir notre application SSR. Les `Policies` définies dans `csp.policies` sont ajoutées à la réponse de l'entête HTTP `Content-Security-Policy`. + +**Mise à jour des paramètres**: + +Ces paramètres sont lus directement par le serveur Nuxt.js à partir du fichier `nuxt.config.js`. Cela veut dire que des changements à ces paramètres prendront effet lorsque le serveur sera relancé. Il n'y a pas besoin de re-build l'application pour mettre à jour les paramètres CSP. + +**Méta-balises HTML**: + +Dans l'objectif d'ajouter [`<meta http-equiv="Content-Security-Policy"/>`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) au `head`, on aura besoin de passer `csp.addMeta` à `true`. À noter que cette fonctionnalité est indépendante de la configuration des `csp.policies`: + +- cela ajoute seulement un `script-src` type policy +- le `script-src` policy contient seulement les hashs des balises `<script>` qui ont été inline. + +Lorsque `csp.addMeta` est à `true`, la liste complète des policies définies est toujours ajoutée à l'entête de réponse HTTP. + +À noter que les hashs CSP ne seront pas ajoutés en tant que `<meta>` si la policy `script-src` contient `'unsafe-inline'`. Cela est dû au fait que le navigateur ignore `'unsafe-inline'` si des hashs sont présents. Il faut passer l'option `unsafeInlineCompatibility` à `true` si on veut que les hashs et `'unsafe-inline'` soient compatibles avec CSPv1. Dans ce cas, la balise `<meta>` ne contiendra toujours que les hashs des des balises `<script>` inline, et les policies définies dans `csp.policies` seront utilisées dans l'entête de réponse HTTP. + +```js{}[nuxt.config.js] +export default { + render: { + csp: true + } +} + +// OU + +export default { + render: { + csp: { + hashAlgorithm: 'sha256', + policies: { + 'script-src': [ + 'https://www.google-analytics.com', + 'https://name.example.com' + ], + 'report-uri': ['https://report.example.com/report-csp-violations'] + }, + addMeta: true + } + } +} + +// OU +/* + L'exemple suivant permet à Google Analytics, LogRocket.io, et Sentry.io + de permettre des logs ainsi qu'un tracking analytique. + + Plus d'informations sont disponibles sur cet article de Sentry.io + afin de comprendre quel lien de tracking nous devrions utiliser. + https://blog.sentry.io/2018/09/04/how-sentry-captures-csp-violations +*/ +const PRIMARY_HOSTS = `loc.example-website.com` +export default { + render: { + csp: { + reportOnly: true, + hashAlgorithm: 'sha256', + policies: { + 'default-src': ["'self'"], + 'img-src': ['https:', '*.google-analytics.com'], + 'worker-src': ["'self'", `blob:`, PRIMARY_HOSTS, '*.logrocket.io'], + 'style-src': ["'self'", "'unsafe-inline'", PRIMARY_HOSTS], + 'script-src': [ + "'self'", + "'unsafe-inline'", + PRIMARY_HOSTS, + 'sentry.io', + '*.sentry-cdn.com', + '*.google-analytics.com', + '*.logrocket.io' + ], + 'connect-src': [PRIMARY_HOSTS, 'sentry.io', '*.google-analytics.com'], + 'form-action': ["'self'"], + 'frame-ancestors': ["'none'"], + 'object-src': ["'none'"], + 'base-uri': [PRIMARY_HOSTS], + 'report-uri': [ + `https://sentry.io/api/<project>/security/?sentry_key=<key>` + ] + } + } + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/24.configuration-rootdir.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/24.configuration-rootdir.md new file mode 100644 index 000000000..45672174b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/24.configuration-rootdir.md @@ -0,0 +1,24 @@ +--- +title: La propriété rootDir +description: Définit le répertoire de travail de l'application Nuxt.js +menu: rootDir +category: configuration-glossary +position: 23 +--- + +- Type: `String` +- Par défaut: `process.cwd()` + +> Définit le répertoire de travail de l'application Nuxt.js + +Cette propriété sera écrasée par les commandes Nuxt (`nuxt start`, `nuxt build`, etc...) si un argument leur est passé. + +Exemple: lancer `nuxt ./my-app/` va définir `rootDir` au chemin absolu `./my-app/` à partir du répertoire courant. + +À cause de cela, il n'est normalement pas nécessaire de configurer cette option à moins que l'on souhaite utiliser [Nuxt.js de manière programmatique](/docs/2.x/internals-glossary/nuxt). + +<base-alert type="info"> + +`rootDir` doit être au même niveau que le répertoire `node_modules` afin de pouvoir [résoudre les dépendances](https://nodejs.org/api/modules.html#modules_all_together). Se référer à l'[option `srcDir`](/docs/2.x/configuration-glossary/configuration-srcdir) pour des exemples de structure de répertoire lorsque ce n'est pas le cas. + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/25.configuration-router.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/25.configuration-router.md new file mode 100644 index 000000000..e54060d08 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/25.configuration-router.md @@ -0,0 +1,339 @@ +--- +title: La propriété router +description: La propriété router permet de personnaliser le routeur de Nuxt.js +menu: router +category: configuration-glossary +position: 24 +--- + +> La propriété router permet de personnaliser le routeur de Nuxt.js ([vue-router](https://router.vuejs.org/en/)). + +## base + +- Type: `String` +- Par défaut: `'/'` + +L'URL de base de l'application. Par exemple, si l'intégralité de la SPA se situe sous `/app/` alors la valeur de `base` doit être définie sur `'/app/'`. + +Ceci peut être utile si l'on a besoin de servir du Nuxt.js dans un autre contexte, tel qu'une partie d'un plus gros site par exemple. Il sera à vous de juger si vous pensez qu'un reverse proxy pour le front sera nécessaire ou pas. + +Si on veut une redirection sur le `router.base`, on peut y parvenir en utilisant un hook, se référer à la documentation sur la [redirection sur router.base lorsque non à la racine](/docs/2.x/configuration-glossary/configuration-hooks#redirect-to-routerbase-when-not-on-root). + +```js{}[nuxt.config.js] +export default { + router: { + base: '/app/' + } +} +``` + +<div class="Alert Alert-blue"> + +Lorsque `base` est défini, Nuxt.js va aussi ajouter `<base href="{{ router.base }}"/>` dans l'entête du document. + +</div> + +> Cette option est donnée directement à [base](https://router.vuejs.org/api/#base) dans `vue-router`. + +## routeNameSplitter + +- Type: `String` +- Par défaut: `'-'` + +On pourrait vouloir changer le séparateur entre le nom des routes que Nuxt.js utilise. On peut y parvenir grâce à l'option `routeNameSplitter` dans notre fichier de configuration. Imaginons que nous ayons le fichier page `pages/posts/_id.vue`. Nuxt.js va générer le nom de la route de manière programmatique, dans le cas présent: `posts-id`. Passer le `routeNameSplitter` à `/` nous donnerait `posts/id`. + +```js{}[nuxt.config.js] +export default { + router: { + routeNameSplitter: '/' + } +} +``` + +## extendRoutes + +- Type: `Function` + +On pourrait vouloir personnaliser les routes créées par Nuxt.js. L'option qui nous permet d'y arriver est `extendRoutes`. + +```js{}[nuxt.config.js] +export default { + router: { + extendRoutes(routes, resolve) { + routes.push({ + name: 'custom', + path: '*', + component: resolve(__dirname, 'pages/404.vue') + }) + } + } +} +``` + +Si on veut trier nos routes, on peut utiliser la fonction `sortRoutes(routes)` depuis `@nuxt/utils`: + +```js{}[nuxt.config.js] +import { sortRoutes } from '@nuxt/utils' +export default { + router: { + extendRoutes(routes, resolve) { + // on ajoute des routes ici... + + // ensuite on les trie + sortRoutes(routes) + } + } +} +``` + +Le schéma de la route doit respecter le schéma de [vue-router](https://router.vuejs.org/en/). + +<base-alert> + +Lorsque l'on ajoute des routes qui utilisent des Vues Nommées, il ne faut pas oublier d'ajouter les `chunkNames` qui correspondent aux `composants`. + +</base-alert> + +```js{}[nuxt.config.js] +export default { + router: { + extendRoutes(routes, resolve) { + routes.push({ + path: '/users/:id', + components: { + default: resolve(__dirname, 'pages/users'), // ou routes[index].component + modal: resolve(__dirname, 'components/modal.vue') + }, + chunkNames: { + modal: 'components/modal' + } + }) + } + } +} +``` + +## fallback + +- Type: `boolean` +- Par défaut: `false` + +Gère le comportement du router quand le navigateur ne supporte pas `history.pushState` alors que ce mode est défini. Lorsque défini à `true`, le router fallback sur le `hash` mode. + +Si on le passe à `false`, le router va faire un rafraîchissement à chaque navigation de `router-link` dans IE9. Ceci est essentiel quand l'application est render côté serveur et a besoin de marcher dans IE9 car le `hash` ne marche pas avec du rendu côté serveur (SSR). + +> Cette option est donnée directement à [fallback](https://router.vuejs.org/api/#fallback) dans `vue-router`. + +## linkActiveClass + +- Type: `String` +- Par défaut: `'nuxt-link-active'` + +Permet de personnaliser globalement la classe active par défaut de [`<nuxt-link>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component). + +```js{}[nuxt.config.js] +export default { + router: { + linkActiveClass: 'active-link' + } +} +``` + +> Cette option est donnée directement à [linkactiveclass](https://router.vuejs.org/api/#linkactiveclass) dans `vue-router`. + +## linkExactActiveClass + +- Type: `String` +- Par défaut: `'nuxt-link-exact-active'` + +Permet de personnaliser globalement la classe active exacte par défaut de [`<nuxt-link>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component). + +```js{}[nuxt.config.js] +export default { + router: { + linkExactActiveClass: 'exact-active-link' + } +} +``` + +> Cette option est donnée directement à [linkexactactiveclass](https://router.vuejs.org/api/#linkexactactiveclass) dans `vue-router`. + +## linkPrefetchedClass + +- Type: `String` +- Par défaut: `false` + +Permet de personnaliser globalement la classe prefetch par défaut de [`<nuxt-link>`](/docs/2.x/features/nuxt-components#the-nuxtlink-component) (cette option est désactivée par défaut). + +```js{}[nuxt.config.js] +export default { + router: { + linkPrefetchedClass: 'nuxt-link-prefetched' + } +} +``` + +## middleware + +- Type: `String` ou `Array` + - Items: `String` + +Définit le(s) middleware par défaut pour chaque page de l'application. + +```js{}[nuxt.config.js] +export default { + router: { + // exécute le middleware/user-agent.js sur chaque page + middleware: 'user-agent' + } +} +``` + +```js{}[middleware/user-agent.js] +export default function (context) { + // ajoute la propriété userAgent au contexte (disponible dans `asyncData` et `fetch`) + context.userAgent = process.server + ? context.req.headers['user-agent'] + : navigator.userAgent +} +``` + +Pour en apprendre davantage, se référer au [guide du middleware](/docs/2.x/directory-structure/middleware#router-middleware). + +## mode + +- Type: `String` +- Par défaut: `'history'` + +Personnalise le mode du routeur, ce n'est pas une option qu'il est recommandé de changer en raison du render côté serveur (SSR). + +```js{}[nuxt.config.js] +export default { + router: { + mode: 'hash' + } +} +``` + +> Cette option est donnée directement à [mode](https://router.vuejs.org/api/#mode) dans `vue-router`. + +## parseQuery / stringifyQuery + +- Type: `Function` + +Fournit des fonctions de query string parse / stringify personnalisées. Écrase les valeurs par défaut. + +> Cette option est donnée directement aux [parseQuery / stringifyQuery](https://router.vuejs.org/api/#parsequery-stringifyquery) dans `vue-router`. + +## prefetchLinks + +> Ajouté dans Nuxt.js v2.4.0 + +- Type: `Boolean` +- Par défaut: `true` + +Paramètre le `<nuxt-link>` afin qu'il prefetch la page _code-splitée_ lorsqu'elle apparaît dans le viewport. Requiert le support de l'[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), à vérifier sur [CanIUse](https://caniuse.com/#feat=intersectionobserver). + +Si nécessaire, nous recommandons de polyfill cette fonctionnalité avec un service tel que [Polyfill.io](https://polyfill.io): + +```js{}[nuxt.config.js] +export default { + head: { + script: [ + { + src: + 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver', + body: true + } + ] + } +} +``` + +Pour désactiver le prefecthing sur un lien spécifique, on peut utiliser la prop `no-prefetch`. Depuis Nuxt.js v2.10.0, on peut aussi passer la prop `prefetch` à `false`: + +```html +<nuxt-link to="/about" no-prefetch>Page à propos non pré-fetchée</nuxt-link> +<nuxt-link to="/about" :prefetch="false" + >Page à propos non pré-fetchée</nuxt-link +> +``` + +Pour désactiver le prefetching sur tous les liens, il faut passer `prefetchLinks` à `false`: + +```js{}[nuxt.config.js] +export default { + router: { + prefetchLinks: false + } +} +``` + +Depuis Nuxt.js v2.10.0, si nous avons défini `prefetchLinks` à `false` mais souhaitons tout de même prefetch un lien spécifique, on peut utiliser la propriété `prefetch`: + +```html +<nuxt-link to="/about" prefetch>APage à propos non pré-fetchée</nuxt-link> +``` + +## prefetchPayloads + +> Ajouté avec la v2.13.0, disponible seulement pour une [cible statique](/docs/2.x/features/deployment-targets#static-hosting). + +- Type: `Boolean` +- Par défaut: `true` + +Lorsqu'on utilise `nuxt generate` avec `target: 'static'`, Nuxt.js va générer un `payload.js` pour chaque page. + +Lorsque cette cette option est activée, Nuxt.js va automatiquement prefetch le payload de la page liée lorsque le `<nuxt-link>` est visible dans le viewport, créant une **navigation instantanée**. + +<base-alert type="info"> + +Pour cela, nous avons besoin que l'option [prefetchLinks](#prefetchlinks) soit activée. + +</base-alert> + +On peut désactiver ce comportement en passant `prefetchPaylods` à `false`: + +```js{}[nuxt.config.js] +export default { + router: { + prefetchPayloads: false + } +} +``` + +## scrollBehavior + +- Type: `Function` + +L'option `scrollBehavior` permet de définir un comportement personnalisé pour la position du défilement de la page entre les routes. Cette méthode est appelée à chaque fois qu'une page est render. + +Pour en apprendre davantage, se référer à la documentation sur le [vue-router scrollBehavior](https://router.vuejs.org/guide/advanced/scroll-behavior.html). + +<div class="Alert Alert-blue"> + +À partir de la v2.9.0, on peut utiliser un fichier pour écraser le comportement du `router scrollBehavior`, ce fichier doit être placé dans `~/app/router.scrollBehavior.js` (note: ce nom de fichier est sensible à la casse si exécuté sur Windows). + +</div> + +On peut voir le fichier `router.scrollBehavior.js` par défaut de Nuxt.js ici: [packages/vue-app/template/router.scrollBehavior.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/router.scrollBehavior.js). + +Un exemple de comment forcer la position du défilement à se retrouver tout en haut pour chaque route: + +`app/router.scrollBehavior.js` + +```js{}[app/router.scrollBehavior.js] +export default function (to, from, savedPosition) { + return { x: 0, y: 0 } +} +``` + +## trailingSlash + +- Type: `Boolean` ou `undefined` +- Par défaut: `undefined` +- Disponible depuis: v2.10 + +Si cette option est passée à `true`, des slashs traînants seront suffixés pour chaque route. Sinon, ils seront enlevés. + +**Attention**: Cette option doit être changée avec une certaine préparation et une sequence de tests conséquents. Lorsque l'on définit `router.trailingSlash` a quelque chose d'autre que la valeur par défaut (`undefined`), la route opposée cessera de fonctionner. Il doit donc y avoir des redirections 301 et vos _liens internes_ doivent s'adapter eux aussi. Si vous passez `trailingSlash` à `true`, alors seulement `example.com/abc/` vont marcher mais pas `example.com/abc`. Dans le cas d'un `false`, c'est l'inverse. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/26.configuration-runtime-config.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/26.configuration-runtime-config.md new file mode 100644 index 000000000..01edf38e6 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/26.configuration-runtime-config.md @@ -0,0 +1,21 @@ +--- +title: Propriétés RuntimeConfig +description: RuntimeConfig permet de passer des variables d'environnement et de la configuration dynamique au contexte de Nuxt.js. +menu: runtimeConfig +category: configuration-glossary +position: 25 +--- + +RuntimeConfig permet de passer des variables d'environnement et de la configuration dynamique au contexte de Nuxt.js. Pour plus d'informations sur l'utilisation, se référer au guide du [runtime config](/docs/2.x/runtime-config). + +## `publicRuntimeConfig` + +- Type: `Object` + +La valeur de cet objet est **accessible du côté client et du côté serveur** en utilisant `$config`. + +## `privateRuntimeConfig` + +- Type: `Object` + +La valeur de cet objet est accessible du **côté serveur seulement** en utilisant `$config`. Cela écrase `publicRuntimeConfig` pour le serveur. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/27.configuration-server.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/27.configuration-server.md new file mode 100644 index 000000000..ba1a834dc --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/27.configuration-server.md @@ -0,0 +1,105 @@ +--- +title: 'La propriété server' +description: Nuxt.js vous permet de définir les variables de connexion au serveur pour votre application dans `nuxt.config.js`. +menu: server +category: configuration-glossary +position: 26 +--- + +- Type: `Object` + +> Nuxt.js vous permet de définir les variables de connexion au serveur pour votre application dans `nuxt.config.js`. + +## Exemple de base : + +```js{}[nuxt.config.js] +export default { + server: { + port: 8000, // par défaut : 3000 + host: '0.0.0.0', // par défaut : localhost, + timing: false + } +} +``` + +Cela vous permet de spécifier l'[hôte et le port](/docs/2.x/features/configuration#edit-host-and-port) pour votre instance de serveur Nuxt.js. + +## Exemple utilisant la configuration HTTPS + +```js{}[nuxt.config.js] +import path from 'path' +import fs from 'fs' + +export default { + server: { + https: { + key: fs.readFileSync(path.resolve(__dirname, 'server.key')), + cert: fs.readFileSync(path.resolve(__dirname, 'server.crt')) + } + } +} +``` + +Vous pouvez trouver des informations supplémentaires sur la création de clés de serveur et de certificats sur l'article `localhost` de [certificats pour localhost](https://letsencrypt.org/docs/certificates-for-localhost/). + +## Exemple d'utilisation de la configuration des sockets + +```js{}[nuxt.config.js] +export default { + server: { + socket: '/tmp/nuxt.socket' + } +} +``` + +## timing + +- Type : `Object` ou `Boolean` +- Par défaut : `false` + +L'activation de l'option `server.timing` ajoute un middleware pour mesurer le temps écoulé lors du rendu côté serveur et l'ajoute aux en-têtes sous le nom de `Server-Timing`. + +### Exemple d'utilisation de la configuration timing + +`server.timing` peut être un objet pour fournir des options. Actuellement, seul `total` est supporté (qui enregistre le temps passé sur le rendu côté serveur) + +```js{}[nuxt.config.js] +export default { + server: { + timing: { + total: true + } + } +} +``` + +### Utilisation de l'api timing + +L'api `timing` est également injectée dans la `response` côté serveur lorsque `server.time` est activé. + +#### Syntaxe + +```js +res.timing.start(name, description) +res.timing.end(name) +``` + +#### Exemple d'utilisation de timing dans le servermiddleware + +```js +export default function (req, res, next) { + res.timing.start('midd', 'Middleware timing description') + // fonctionnement côté serveur.. + // ... + res.timing.end('midd') + next() +} +``` + +Ensuite, `server-timing` sera inclus dans l'en-tête de la réponse comme : + +```bash +Server-Timing: midd;desc="Middleware timing description";dur=2.4 +``` + +Veuillez consulter [Server-Timing MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing) pour plus de détails. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/28.configuration-servermiddleware.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/28.configuration-servermiddleware.md new file mode 100644 index 000000000..149eea46e --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/28.configuration-servermiddleware.md @@ -0,0 +1,125 @@ +--- +title: 'La propriété serverMiddleware' +description: Défini le middleware côté serveur. +menu: serverMiddleware +category: configuration-glossary +position: 27 +--- + +- Type: `Array` + - Items: `String` ou `Object` ou `Function` + +Nuxt crée en interne une instance [connect](https://github.com/senchalabs/connect) à laquelle vous pouvez ajouter votre propre middleware personnalisé. Cela nous permet d'enregistrer des routes supplémentaires (généralement des routes `/api`) **sans avoir besoin d'un serveur externe**. + +Parce que Connect itself est un middleware, les middleware enregistrés fonctionneront avec `nuxt start` et aussi lorsqu'il est utilisé comme un middleware avec des usages programmatiques comme [express-template](https://github.com/nuxt-community/express-template). Les [Modules](/docs/2.x/modules) nuxt peuvent également fournir `serverMiddleware` en utilisant [this.addServerMiddleware()](/docs/2.x/internals-glossary/internals-module-container#addservermiddleware-middleware) + +En plus, nous avons introduit une option `prefix` dont la valeur par défaut est `true`. Elle ajoutera la base du routeur aux middlewares de votre serveur. + +**Exemple:** + +- Chemin d'accès au middleware du serveur : `/server-middleware` +- Base du routeur : `/admin` +- Avec `prefix: true` (par défaut): `/admin/server-middleware` +- Avec `prefix: false`: `/server-middleware` + +## serverMiddleware vs middleware! + +Ne le confondez pas avec [routes middleware](/docs/2.x/routing#middleware) qui sont appelés avant chaque route par Vue pour les rendu monopage ou SSR. Les Middleware listés dans la propriété `serverMiddleware` s'exécutent côté serveur **avant** `vue-server-renderer` et peuvent être utilisés pour des tâches spécifiques au serveur comme le traitement des requêtes API ou pour le chargement des ressources. + +## Utilisation + +Si le middleware est une chaîne de caractères, alors Nuxt.js essaiera de le résoudre automatiquement et le rendra requis. + +```js{}[nuxt.config.js] +import serveStatic from 'serve-static' + +export default { + serverMiddleware: [ + // Inscrira redirect-ssl dans les package npm + 'redirect-ssl', + + // Inscrira le fichier index du répertoire server-middleware pour gérer /server-middleware/* + { path: '/server-middleware', handler: '~/server-middleware/index.js' }, + + // Nous pouvons également créer des instances personnalisées + { path: '/static2', handler: serveStatic(__dirname + '/static2') } + ] +} +``` + +<base-alert type="warn"> + +Si vous ne voulez pas que le middleware s'enregistre pour toutes les routes, vous devez l'utiliser sous la forme d'un Object avec un chemin d'accès spécifique, sinon le gestionnaire par défaut nuxt ne fonctionnera pas ! + +</base-alert> + +## Middleware de serveur personnalisé + +Il est également possible d'écrire des Middleware personnalisés. Pour plus d'informations, voir [Connect Docs](https://github.com/senchalabs/connect#appusefn). + +Middleware (`server-middleware/logger.js`): + +```js{}[server-middleware/logger.js] +export default function (req, res, next) { + // req est l'objet de la requête http de Node.js + console.log(req.url) + + // res est l'objet de réponse http de Node.js + + // next est une fonction à appeler pour invoquer le prochain middleware + // N'oubliez pas d'appeler le suivant à la fin si votre middleware n'est pas un endpoint ! + next() +} +``` + +```js{}[nuxt.config.js] +serverMiddleware: [server-middleware] +``` + +## API endpoint personnalisé + +Un middleware de serveur peut également étendre Express. Cela permet la création d'endpoint REST. + +```js{}[server-middleware/rest.js] +const bodyParser = require('body-parser') +const app = require('express')() + +app.use(bodyParser.json()) +app.all('/getJSON', (req, res) => { + res.json({ data: 'data' }) +}) + +module.exports = app +``` + +```js{}[nuxt.config.js] +serverMiddleware: [ + { path: "/server-middleware", handler: "~/server-middleware/rest.js" }, +], +``` + +## Syntaxe de l'objet + +Si le middleware de votre serveur est constitué d'une liste de fonctions mises en correspondance avec des chemins d'accès : + +```js +export default { + serverMiddleware: [ + { path: '/a', handler: '~/server-middleware/a.js' }, + { path: '/b', handler: '~/server-middleware/b.js' }, + { path: '/c', handler: '~/server-middleware/c.js' } + ] +} +``` + +Vous pouvez aussi passer un objet pour les définir, comme suit : + +```js +export default { + serverMiddleware: { + '/a': '~/server-middleware/a.js', + '/b': '~/server-middleware/b.js', + '/c': '~/server-middleware/c.js' + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/29.configuration-srcdir.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/29.configuration-srcdir.md new file mode 100644 index 000000000..f6bcc21af --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/29.configuration-srcdir.md @@ -0,0 +1,82 @@ +--- +title: 'La propriété srcDir' +description: Défini le répertoire source de votre application Nuxt.js +menu: srcDir +category: configuration-glossary +position: 28 +--- + +- Type: `String` +- Par défaut : [rootDir value](/docs/2.x/configuration-glossary/configuration-rootdir) + +> Défini le répertoire source de votre application Nuxt.js + +Si un chemin relatif est spécifié, il sera relatif au `rootDir`. + +Exemple 1 : Prérequis : + +```js{}[nuxt.config.js] +export default { + srcDir: 'client/' +} +``` + +```js{}[package.json] + "script": { + "dev": "yarn nuxt" + } +``` + +fonctionne avec la structure de répertoires suivante (notez que nuxt.config est listé dans le répertoire app) + +```bash +-| app/ +---| node_modules/ +---| nuxt.config.js +---| package.json +---| client/ +------| assets/ +------| components/ +------| layouts/ +------| middleware/ +------| pages/ +------| plugins/ +------| static/ +------| store/ +``` + +Exemple 2: + +Au lieu de l'exemple 1, vous pouvez également déplacer le fichier nuxt.config dans notre répertoire `src`. Dans ce cas, il vous suffit de spécifier le client comme `rootDir` et vous pouvez laisser `srcDir` vide : + +Prérequis: + +```js{}[nuxt.config.js] +export default { + srcDir: '' // ou simplement la supprimer +} +``` + +```js{}[package.json] + "script": { + "dev": "yarn nuxt client" // cela définit le client comme le rootDir + } +``` + +fonctionne avec la structure de répertoires suivante (notez que `nuxt.config.js` est listé dans le répertoire client) + +```bash +-| app/ +---| node_modules/ +---| package.json +---| client/ +------| nuxt.config.js +------| assets/ +------| components/ +------| layouts/ +------| middleware/ +------| pages/ +------| plugins/ +------| static/ +------| store/ +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/3.configuration-builddir.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/3.configuration-builddir.md new file mode 100644 index 000000000..e738e6071 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/3.configuration-builddir.md @@ -0,0 +1,20 @@ +--- +title: 'La Propriété buildDir' +description: Définie le répertoire dist pour notre application Nuxt.js +menu: buildDir +category: configuration-glossary +position: 2 +--- + +- Type : `String` +- Par défaut : `.nuxt` + +> Définie le répertoire dist pour notre application Nuxt.js + +```js{}[nuxt.config.js] +export default { + buildDir: 'nuxt-dist' +} +``` + +Par défaut, de nombreux outils supposent que `.nuxt` est un répertoire caché, car son nom commence par un point. Vous pouvez utiliser cette option pour éviter cela. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/30.configuration-ssr.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/30.configuration-ssr.md new file mode 100644 index 000000000..ccd6ba3a6 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/30.configuration-ssr.md @@ -0,0 +1,26 @@ +--- +title: 'La propriété ssr' +description: Modifier la valeur par défaut `ssr` de nuxt +menu: ssr +category: configuration-glossary +position: 28.1 +--- + +- Type: `boolean` + - Par défaut : `true` + - Valeurs possibles : + - `false`: Pas de rendu côté serveur (seulement rendu côté client) + +> Vous devez définir cette option lorsque vous travaillez avec une application web monopage + +```js{}[nuxt.config.js] +export default { + ssr: false // for SPA's +} +``` + +<base-alert type="next"> + +Auparavant, le `mode` était utilisé pour désactiver ou activer le rendu côté serveur. Voici la [documentation de `mode'](/docs/2.x/configuration-glossary/configuration-mode). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/31.configuration-target.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/31.configuration-target.md new file mode 100644 index 000000000..1b375a425 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/31.configuration-target.md @@ -0,0 +1,19 @@ +--- +title: 'La propriété target' +description: Change la cible par défaut nuxt de votre projet +menu: target +category: configuration-glossary +position: 29 +--- + +Cibles de déploiement pour Nuxt >= v2.13 : + +- Type : `string` + - Par défaut : `server` + - Valeurs possibles : + - `'server'`: Pour le rendu côté serveur (SSR) + - `'static'`: Pour les sites statiques + +> Vous pouvez utiliser cette option pour changer la cible de déploiement par défaut pour votre projet nuxt en utilisant `nuxt.config.js` + +Pour en savoir plus sur l'option `target`, consultez la [section sur les cibles de déploiement](/docs/2.x/features/deployment-targets). diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/32.configuration-telemetry.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/32.configuration-telemetry.md new file mode 100644 index 000000000..e8118cc39 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/32.configuration-telemetry.md @@ -0,0 +1,54 @@ +--- +title: La propriété telemetry +description: Nuxt.js collecte de la télémétrie anonyme à propos de l'usage général. Cela aide l'équipe à gauger précisément l'usage des fonctionnalités de Nuxt.js et la personnalisation répartie sur tous les utilisateurs. +menu: telemetry +category: configuration-glossary +position: 30 +--- + +> Depuis la version 2.13.0, Nuxt.js collecte de la télémétrie **anonyme** à propos de l'usage général. Cela aide l'équipe à gauger précisément l'usage des fonctionnalités de Nuxt.js et la personnalisation répartie sur tous les utilisateurs. + +- Type: `Boolean` +- Par défaut: basé sur les préférences de l'utilisateur + +## Pourquoi collecter de la télémétrie ? + +Nuxt.js a beaucoup grandi depuis sa [publication initiale](https://github.com/nuxt/nuxt.js/releases/tag/v0.2.0) (7 Nov 2016) et l'équipe fait toujours attention au [feedback de la communauté](https://github.com/nuxt/nuxt.js/issues) pour améliorer le framework. + +Ce processus manuel récupère le feedback de seulement certains utilisateurs: ceux qui prennent le temps de remplir l'issue template et qui ont des besoins ou des utilisations différents des nôtres. + +Plusieurs events sont intéressants: + +- commandes invoquées (`nuxt dev`, `nuxt build`, etc) +- versions de Nuxt.js et de Node.js +- informations générales sur la machine (MacOs/Linux/Windows et le nom de la CI si la commande est executé dans ce contexte là) +- durée du build Webpack ainsi que taille moyenne de l'application, ainsi que les statistiques de la génération (lors d'un `nuxt generate`) +- quelles sont les dépendances publiques du projet (Nuxt modules) + +Le code est open source et disponible ici: https://github.com/nuxt/telemetry. + +## Opt out + +On peut désactiver la [télémétrie](https://github.com/nuxt/telemetry) pour notre projet de plusieurs façons: + +1. En utilisant `npx nuxt telemetry disable` + +```bash +npx nuxt telemetry [status|enable|disable] [-g,--global] [dir] +``` + +2. En utilisant une variable d'environnement + +```bash +NUXT_TELEMETRY_DISABLED=1 +``` + +3. En définissant `telemetry: false` dans notre fichier `nuxt.config.js`: + +```js{}[nuxt.config.js] +export default { + telemetry: false +} +``` + +Pour plus d'informations sur la télémétrie de Nuxt.js et les events envoyés, voir [Nuxt Telemetry](https://github.com/nuxt/telemetry). diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/33.configuration-transition.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/33.configuration-transition.md new file mode 100644 index 000000000..6ccf798af --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/33.configuration-transition.md @@ -0,0 +1,77 @@ +--- +title: 'Les propriétés de transition' +description: Définissez les propriétés par défaut de la page et des transitions de mise en page. +menu: transition +category: configuration-glossary +position: 31 +--- + +## La propriété pageTransition + +> Nuxt v2.7.0 introduit la clé "pageTransition" en faveur de la clé "transition" pour consolider le nommage avec les clés de transition de mise en page. + +- Type: `String` ou `Object` + +> Utilisé pour définir les propriétés par défaut des transitions de page. + +Par défaut : + +```js +{ + name: 'page', + mode: 'out-in' +} +``` + +```js{}[nuxt.config.js] +export default { + pageTransition: 'page' + // ou + pageTransition: { + name: 'page', + mode: 'out-in', + beforeEnter (el) { + console.log('Before enter...'); + } + } +} +``` + +La clé de transition dans `nuxt.config.js` est utilisée pour définir les propriétés par défaut des transitions de page. Pour en savoir plus sur les clés disponibles, voir la [propriété de transition des pages](/docs/2.x/features/transitions). + +## La propriété layoutTransition + +- Type: `String` ou `Object` + +> Utilisé pour définir les propriétés par défaut des transitions de la mise en page. La valeur fournie dans l'option `name` est configurée pour fonctionner avec le nom fourni dans `layout` de notre répertoire `layouts`. + +Par défaut : + +```js +{ + name: 'layout', + mode: 'out-in' +} +``` + +```js{}[nuxt.config.js] +export default { + layoutTransition: 'layout' + // ou + layoutTransition: { + name: 'layout', + mode: 'out-in' + } +} +``` + +```css{}[assets/main.css] +.layout-enter-active, +.layout-leave-active { + transition: opacity 0.5s; +} +.layout-enter, +.layout-leave-active { + opacity: 0; +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/34.configuration-vue-config.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/34.configuration-vue-config.md new file mode 100644 index 000000000..d7ee0896b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/34.configuration-vue-config.md @@ -0,0 +1,36 @@ +--- +title: 'La propriété vue.config' +description: Un objet de configuration pour Vue.config +menu: vue.config +category: configuration-glossary +position: 32 +--- + +- Type : `Object` +- Par défaut : `{ silent: !isDev, performance: isDev }` + +> La propriété vue.config fournit un pont de configuration direct pour le `Vue.config` + +**Exemple** + +```js{}[nuxt.config.js] +export default { + vue: { + config: { + productionTip: true, + devtools: false + } + } +} +``` + +Cette configuration conduira au fichier Vue.config suivant : + +```js +Vue.config.productionTip // true +Vue.config.devtools // false +Vue.config.silent // !isDev [default value] +Vue.config.performance // isDev [default value] +``` + +Pour en savoir plus sur l'API `Vue.config`, consultez la [documentation officielle de Vue](https://vuejs.org/v2/api/#Global-Config) diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/35.configuration-watch.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/35.configuration-watch.md new file mode 100644 index 000000000..4dc7533cc --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/35.configuration-watch.md @@ -0,0 +1,18 @@ +--- +title: 'La propriété watch' +description: La propriété watch vous permet de surveiller des fichiers personnalisés pour le redémarrage du serveur. +menu: watch +category: configuration-glossary +position: 33 +--- + +- Type : `Object` +- Par défaut : `[]` + +> La propriété watch vous permet de surveiller des fichiers personnalisés pour le redémarrage du serveur. + +```js +watch: ['~/custom/*.js'] +``` + +[chokidar](https://github.com/paulmillr/chokidar) est utilisée pour mettre en place les surveillants. Pour en savoir plus sur les options de chokidar, voir l'[API chokidar](https://github.com/paulmillr/chokidar#api). diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/36.configuration-watchers.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/36.configuration-watchers.md new file mode 100644 index 000000000..5fc0bb1b6 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/36.configuration-watchers.md @@ -0,0 +1,43 @@ +--- +title: 'La propriété watchers' +description: La propriété watchers vous permet d'écraser la configuration de watchers. +menu: watchers +category: configuration-glossary +position: 34 +--- + +- Type : `Object` +- Par défaut : `{}` + +> La propriété `watchers` permet d'écraser la configuration des watchers dans le fichier nuxt.config.js. + +## chokidar + +- Type : `Object` +- Par défaut : `{}` + +Pour en savoir plus sur les options de chokidar, voir l'[API chokidar](https://github.com/paulmillr/chokidar#api). + +## webpack + +- Type : `Object` +- Par défaut : + +```js +watchers: { + webpack: { + aggregateTimeout: 300, + poll: 1000 + } +} +``` + +Pour en savoir plus sur les options webpack de surveillance, voir la [documentation webpack](https://webpack.js.org/configuration/watch/#watchoptions). + +### Prochaine étape + +<base-alert type="next"> + +Consultez le [Glossaire interne](/docs/2.x/internals-glossary/$nuxt) + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/4.configuration-cli.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/4.configuration-cli.md new file mode 100644 index 000000000..fad93b659 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/4.configuration-cli.md @@ -0,0 +1,28 @@ +--- +title: 'La Propriété cli' +description: Nuxt.js vous permet de personnaliser la configuration du CLI. +menu: cli +category: configuration-glossary +position: 3 +--- + +> Nuxt.js vous permet de personnaliser la configuration du CLI. + +## bannerColor + +- Type: `String` + - Default: `'green'` + +Change la couleur du titre 'Nuxt.js' dans la bannière du CLI. + +**Couleurs disponibles :** + +`black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `gray`, `redBright`, `greenBright`, `yellowBright`, `blueBright`, `magentaBright`, `cyanBright`, `whiteBright` + +```js{}[nuxt.config.js] +export default { + cli: { + bannerColor: 'yellow' + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/5.configuration-css.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/5.configuration-css.md new file mode 100644 index 000000000..bd2a547d4 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/5.configuration-css.md @@ -0,0 +1,51 @@ +--- +title: La propriété css +description: Nuxt.js permet aux fichiers/modules/librairies que l'on veut d'être définis de manière globale (inclus dans chaque page). +menu: css +category: configuration-glossary +position: 4 +--- + +> Nuxt.js permet aux fichiers/modules/librairies que l'on veut d'être définis de manière globale (inclus dans chaque page). + +Si on veut utiliser `SASS`, il faut bien faire attention à avoir les packages `node-sass` et `sass-loader` d'installés. Si ce n'est pas encore le cas, on peut faire: + +```sh +npm install --save-dev node-sass sass-loader +``` + +- Type: `Array` + - Items: `string` + +```js{}[nuxt.config.js] +export default { + css: [ + // charge un module Node.js directement (ici c'est un fichier SASS) + 'bulma', + // fichier CSS dans le projet + '@/assets/css/main.css', + // fichier SCSS dans le projet + '@/assets/css/main.scss' + ] +} +``` + +Nuxt.js va automatiquement deviner le type de fichier par son extension et utiliser le loader du pré-processeur adéquat pour Webpack. Nous aurons cependant besoin d'installer le loader requis si nous avons besoin de l'utiliser. + +### Extensions de style + +On peut omettre l'extension de nos fichiers CSS/SCSS/Postcss/Less/Stylus/... listés dans le tableau `css` du fichier `nuxt.config.js`. + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/css/main', '~/assets/css/animations'] +} +``` + +<base-alert> + +Si nous avons deux fichiers du même nom, par ex `main.scss` et `main.css` et si on ne spécifie par l'extension dans le tableau `css` par ex `css: ['~/assets/css/main']` alors seulement un fichier sera chargé en fonction de l'ordre défini par `styleExtensions`. Dans ce cas, le fichier `css` sera chargé et le `scss` sera ignoré parce que l'extension `css` arrive en premier dans le tableau `styleExtension`. + +</base-alert> + +Ordre par défaut: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/6.configuration-components.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/6.configuration-components.md new file mode 100644 index 000000000..f5e9e2cb1 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/6.configuration-components.md @@ -0,0 +1,20 @@ +--- +title: 'La Propriété Composants' +description: 'Nuxt.js 2.13+ peut scanner et importer automatiquement vos composants en utilisant le module @nuxt/components' +menu: components +category: configuration-glossary +position: 5 +--- + +> Nuxt.js 2.13+ peut scanner et importer automatiquement vos composants. + +- Type: `Boolean` or `Object` +- Default: `false` + +Lorsqu'il est défini à `true` ou qu'il utilise un objet, il inclura les dépendances du [composant](https://github.com/nuxt/components) et importera automatiquement vos composants (définis dans `~/components`) lorsque vous les utilisez dans vos modèles. + +<base-alert type="info"> + +Veuillez vous référer au dépôt du [composant](https://github.com/nuxt/components) pour l'utilisation et les options. + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/7.configuration-dev.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/7.configuration-dev.md new file mode 100644 index 000000000..8685f7e3a --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/7.configuration-dev.md @@ -0,0 +1,56 @@ +--- +title: La propriété dev +description: Définit le mode, développement ou production. +menu: dev +category: configuration-glossary +position: 6 +--- + +- Type: `Boolean` +- Par défaut: `true` + +> Définit le mode, développement ou production. + +Cette propriété est écrasée par les commandes `nuxt`: + +- `dev` est forcé à `true` avec `nuxt` +- `dev` est forcé à `false` avec `nuxt build`, `nuxt start` et `nuxt generate` + +Cette propriété devrait être utilisée lorsque l'on utilise Nuxt de [manière programmatique](/docs/2.x/internals-glossary/nuxt): + +```js{}[nuxt.config.js] +export default { + dev: process.env.NODE_ENV !== 'production' +} +``` + +```js{}[server.js] +const { Nuxt, Builder } = require('nuxt') +const app = require('express')() +const port = process.env.PORT || 3000 + +// on instancie Nuxt.js avec les options +const config = require('./nuxt.config.js') +const nuxt = new Nuxt(config) +app.use(nuxt.render) + +// on ne build qu'en mode développement +if (config.dev) { + new Builder(nuxt).build() +} + +// on écoute le serveur +app.listen(port, '0.0.0.0').then(() => { + console.log(`Le serveur écoute sur le port: ${port}`) +}) +``` + +```json{}[package.json] +{ + "scripts": { + "dev": "node server.js", + "build": "nuxt build", + "start": "NODE_ENV=production node server.js" + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/8.configuration-dir.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/8.configuration-dir.md new file mode 100644 index 000000000..6e893be38 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/8.configuration-dir.md @@ -0,0 +1,38 @@ +--- +title: 'La Propriété dir' +description: Définie les répertoires personnalisés pour notre application Nuxt.js +menu: dir +category: configuration-glossary +position: 7 +--- + +- Type : `Object` +- Par défaut : + +```js +{ + assets: 'assets', + app: 'app', + layouts: 'layouts', + middleware: 'middleware', + pages: 'pages', + static: 'static', + store: 'store' +} +``` + +> Définie les répertoires personnalisés pour notre application Nuxt.js + +```js{}[nuxt.config.js] +export default { + dir: { + assets: 'custom-assets', + app: 'custom-app', + layouts: 'custom-layouts', + middleware: 'custom-middleware', + pages: 'custom-pages', + static: 'custom-static', + store: 'custom-store' + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/9.configuration-env.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/9.configuration-env.md new file mode 100644 index 000000000..14c6681bb --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/9.configuration-env.md @@ -0,0 +1,72 @@ +--- +title: La propriété env +description: Permet de partager des variables d'environnement entre le client et le serveur. +menu: env +category: configuration-glossary +position: 8 +--- + +- Type: `Object` + +> Nuxt.js nous permet de créer des variables d'environnement côté client et de les partager aussi côté serveur. + +La propriété `env` définit les variables d'environnement qui devraient être disponibles côté client. Elles peuvent être assignées en utilisant les variables d'environnement côté serveur. Pour plus d'informations, voir le [module dotenv](https://github.com/nuxt-community/dotenv-module). + +**Faites attention de lire à propos de `process.env` et `process.env == {}` ci-dessous pour un meilleur débogage.** + +```js{}[nuxt.config.js] +export default { + env: { + baseUrl: process.env.BASE_URL || 'http://localhost:3000' + } +} +``` + +Cela nous permet de créer une propriété `baseUrl` qui sera égale à la variable d'environment côté serveur nommée `BASE_URL` si disponible/définie. Sinon, `baseUrl` côté client sera égale à `'http://localhost:3000'`. La variable `BASE_URL` côté serveur sera ainsi copiée côté client via la propriété `env` du fichier `nuxt.config.js`. En dernier recours, la valeur sera égale à `'http://localhost:3000'`. + +Ensuite, on peut avoir accès à la variable `baseUrl` de 2 façons: + +1. Via `process.env.baseUrl`. +2. Via `context.env.baseUrl`, voir l'[API context](/docs/2.x/internals-glossary/context). + +On peut par exemple, utiliser la propriété `env` pour donner un token public. + +Pour l'exemple au dessus, on peut l'utiliser pour configurer [axios](https://github.com/mzabriskie/axios). + +```js{}[plugins/axios.js] +import axios from 'axios' + +export default axios.create({ + baseURL: process.env.baseUrl +}) +``` + +Ensuite, dans nos pages, on peut import axios ainsi: `import axios from '~/plugins/axios'`. + +## Injection automatique de variables d'environnement + +Si on définit des variables d'environnement commençant par un `NUXT_ENV_` lors de la phase de build (ex: `NUXT_ENV_COOL_WORD=freezing nuxt build`), elles seront automatiquement injectées dans le processus de l'environnement. Attention cependant à ne pas oublier que ces variables peuvent écraser des variables du même nom précédemment définies dans le fichier `nuxt.config.js`. + +## process.env == {} + +Il faut savoir que Nuxt.js utilise `definePlugin` de Webpack pour définir les variables d'environnement. Cela veut dire que les `process` ou `process.env` de Node.js ne sont ni disponibles ni définis. Chaque propriété d'`env` définie dans `nuxt.config.js` est individuellement mappée à un `process.env.xxxx` et convertie durant la compilation. + +Cela veut dire que `console.log(process.env)` va renvoyer `{}` mais que `console.log(process.env.notre_variable)` va tout de même renvoyer notre valeur. Lorsque Webpack compile notre code, il remplace toutes les instances de `process.env.your_variable` par la valeur qui lui est attribuée. + +Exemple: `env.test = 'testing123'`. Si on utilise `process.env.test` quelque part dans notre code, cela sera traduit en `'testing123'`. + +avant + +```js +if (process.env.test == 'testing123') +``` + +après + +```js +if ('testing123' == 'testing123') +``` + +## serverMiddleware + +Comme le [serverMiddleware](/docs/2.x/configuration-glossary/configuration-servermiddleware) est découplé du build principal de Nuxt.js, les variables `env` définies dans le fichier `nuxt.config.js` n'y seront pas disponibles. diff --git a/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/index.md b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/index.md new file mode 100644 index 000000000..afcd30bfa --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/5.configuration-glossary/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/configuration-glossary/configuration-alias +--- diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/1.context.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/1.context.md new file mode 100644 index 000000000..9d0a32edb --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/1.context.md @@ -0,0 +1,146 @@ +--- +title: Le Contexte +description: Le `context` fournit des objets/paramètres en plus aux composants Vue et est disponible dans des lifecycles Nuxt spéciaux comme par exemple `asyncData`, `fetch`, `plugins`, `middleware` et `nuxtServerInit`. +menu: Contexte +category: internals-glossary +position: 1 +--- + +Le `context` fournit des objets/paramètres en plus aux composants Vue et est disponible dans des lifecycles Nuxt spéciaux comme par exemple [`asyncData`](/api), [`fetch`](/docs/2.x/features/data-fetching), [`plugins`](/docs/2.x/directory-structure/plugins), [`middleware`](/docs/2.x/directory-structure/middleware#router-middleware) et [`nuxtServerInit`](/docs/2.x/directory-structure/store#the-nuxtserverinit-action). + +> _Note: Le "context" auquel on fait référence ici ne doit pas être confondu avec l'objet `context` disponible dans les [`actions Vuex`](https://vuex.vuejs.org/guide/actions.html). Les deux n'ont rien à voir._ + +```js +function (context) { + // Paramètres universels + const { + app, + store, + route, + params, + query, + env, + isDev, + isHMR, + redirect, + error, + $config + } = context + // Côté serveur + if (process.server) { + const { req, res, beforeNuxtRender } = context + } + // Côté client + if (process.client) { + const { from, nuxtState } = context + } +} +``` + +## Paramètres universels + +Ce sont les paramètres qui sont disponibles côté client et côté serveur. + +### app + +`app` (_NuxtAppOptions_) + +L'instance principale de Vue avec les options qui incluent tous vos plugins. Par exemple, lorsque l'on utilise `i18n`, on peut avoir accès à `$i18n` grâce à `context.app.i18n`. + +### store + +`store` ([_Store Vuex_](https://vuex.vuejs.org/api/#vuex-store-instance-properties)) + +L'instance du Store Vuex. **Disponible uniquement si le [store vuex](/docs/2.x/directory-structure/store) a été défini**. + +### route + +`route` ([_Vue Router Route_](https://router.vuejs.org/api/#the-route-object)) + +L'instance du Routeur de Vue. + +### params + +`params` (_Objet_) + +Un alias de `route.params`. + +### query + +`query` (_Objet_) + +Un alias de `route.query`. + +### env + +`env` (_Objet_) + +Variables d'environnement définies dans le fichier `nuxt.config.js`, se référer à l'[API env](/docs/2.x/configuration-glossary/configuration-env). + +### IsDev + +`isDev` (_Booléen_) + +Un booléen qui permet de savoir si l'on est en mode développement, cela peut être utile pour mettre en cache de la data en production. + +### isHMR + +`isHMR` (_Booléen_) + +Un booléen qui permet de savoir si la méthode/middleware est appellé depuis le module de remplacement à chaud de webpack (_vrai seulement du côté client et en mode développement_). + +### redirect + +`redirect` (_Fonction_) + +Utilisez cette méthode pour rediriger l'utilisateur vers une autre route, le status code est utilisé du côté serveur, prend la valeur `302` par défaut. `redirect([status,] path [, query])`. + +### error + +`error` (_Fonction_) + +Utilisez cette méthode pour afficher la page d'erreur: `error(paramètres)`. Les `paramètres` doivent avoir les propriétés `statusCode` et `message`. + +### \$config + +`$config` (_Objet_) + +La [configuration de l'exécution](/docs/2.x/runtime-config) même. + +## Paramètres côté serveur + +Ces paramètres ne sont disponibles que du côté serveur. + +### req + +`req` ([_http.Request_](https://nodejs.org/api/http.html#http_class_http_incomingmessage)) + +Requête provenant du serveur Node.js. Si Nuxt.js est utilisé en tant que middleware, l'objet de la requête risque d'être différent en fonction du framework que l'on utilise.<br>**Non disponible lors d'un `nuxt generate`**. + +### Res + +`res` ([_http.Response_](https://nodejs.org/api/http.html#http_class_http_serverresponse)) + +Réponse du serveur Node.js. Si Nuxt.js est utilisé en tant que middleware, l'objet de la réponse peut être différent en fonction du framework que l'on utilise.<br>**Non disponible lors d'un `nuxt generate`**. + +### beforeNuxtRender + +`beforeNuxtRender(fn)` (_Fonction_) + +Utilisez cette méthode pour mettre à jour la variable `__NUXT__` render du côté client, `fn` (peut être asynchrone) est appelé avec `{ Components, nuxtState }`, voir cet [exemple](https://github.com/nuxt/nuxt.js/blob/cf6b0df45f678c5ac35535d49710c606ab34787d/test/fixtures/basic/pages/special-state.vue). + +## Paramètres côté client + +Ces paramètres ne sont disponibles que du côté client. + +### from + +`from` ([_Vue Router Route_](https://router.vuejs.org/api/#the-route-object)) + +La route d'où l'on vient. + +### nuxtState + +`nuxtState` _(Objet)_ + +Le state de Nuxt.js, utile pour les plugins qui utilisent `beforeNuxtRender` pour avoir le state de Nuxt.js avant l'hydratation. **Disponible uniquement dans le mode `universal`**. diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/10.nuxt-render.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/10.nuxt-render.md new file mode 100644 index 000000000..a9b893bb5 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/10.nuxt-render.md @@ -0,0 +1,49 @@ +--- +title: 'nuxt.render(req, res)' +description: Vous pouvez utiliser Nuxt.js comme middleware pour votre serveur Node.js. +menu: nuxt.render +category: internals-glossary +position: 10 +--- + +- Type: `Function` +- Arguments: + 1. [Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) + 2. [Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) +- Returns: `Promise` + +> Vous pouvez utiliser Nuxt.js avec `nuxt.render` comme middleware pour votre serveur Node.js. + +Exemple avec [Express](https://github.com/expressjs/express): + +```js +const { loadNuxt, build } = require('nuxt') + +const app = require('express')() +const isDev = process.env.NODE_ENV !== 'production' +const port = process.env.PORT || 3000 + +async function start() { + // Nous obtenons l'instance Nuxt + const nuxt = await loadNuxt(isDev ? 'dev' : 'start') + + // On fournit chaque route avec Nuxt.js + app.use(nuxt.render) + + // Construit uniquement en mode développement avec rechargement à chaud + if (isDev) { + build(nuxt) + } + // Écoute le serveur + app.listen(port, '0.0.0.0') + console.log('Server listening on `localhost:' + port + '`.') +} + +start() +``` + +<div class="Alert"> + +Il est recommandé d'appeler `nuxt.render` à la fin de vos middlewares car il s'occupera du rendu de votre application web et n'appellera pas `next()`. + +</div> diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/11.nuxt-render-route.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/11.nuxt-render-route.md new file mode 100644 index 000000000..abd05406e --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/11.nuxt-render-route.md @@ -0,0 +1,56 @@ +--- +title: 'nuxt.renderRoute(route, context)' +description: Rendu d'une route spécifique avec un contexte donné. +menu: nuxt.renderRoute +category: internals-glossary +position: 11 +--- + +- Type: `Function` +- Arguments: + 1. `String` : route to render + 2. _Optional_, `Object`, context given, available keys: `req` & `res` +- Returns: `Promise` + - `html`: `String` + - `error`: `null` or `Object` + - `redirected`: `false` or `Object` + +> Rendu d'une route spécifique avec un contexte donné. + +Cette méthode doit être utilisée principalement à des fins d'essai ainsi qu'avec [`nuxt.renderAndGetWindow`](/docs/2.x/internals-glossary/nuxt-render-and-get-window). + +<base-alert> + +`nuxt.renderRoute` doit être exécuté après le processus de construction en mode production. + +</base-alert> + +```js +const { loadNuxt, build } = require('nuxt') + +async function start() { + // Récupè une instance Nuxt pour commencer (en mode production) + // Assurez-vous d'avoir exécuté `nuxt build` avant de lancer ce script + const nuxt = await loadNuxt({ for: 'start' }) + + const { html, error, redirected } = await nuxt.renderRoute('/') + + // `html` sera toujours une chaîne de caractères + + // `error` ne sera pas nulle lorsque la mise en page de l'erreur est affichée, le format de l'erreur l'est : + // { statusCode: 500, message: 'Mon message d\'erreur' } + + // `redirected` n'est pas `false` lorsque `redirect()` a été utilisé dans `asyncData()` ou `fetch()`. + // { path: '/other-path', query: {}, status: 302 } +} + +start() +``` + +### Prochaine étape + +<base-alert type="next"> + +Consultez le [Glossaire des composants](/docs/2.x/components-glossary/pages-fetch) + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/12.nuxt-render-and-get-window.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/12.nuxt-render-and-get-window.md new file mode 100644 index 000000000..5394470d2 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/12.nuxt-render-and-get-window.md @@ -0,0 +1,47 @@ +--- +title: 'nuxt.renderAndGetWindow(url, options)' +description: Récupère la `window` d'une URL donnée de l'application Nuxt.js. +menu: nuxt.renderAndGetWindow +category: internals-glossary +position: 12 +--- + +- Type : `Function` +- Argument : `String` + 1. `String` : URL à afficher + 2. _Optional_, `Object` : options + - virtualConsole: `Boolean` (par défaut : `true`) +- Renvois : `Promise` + - Renvois : `window` + +> Récupère la `window` d'une URL donnée de l'application Nuxt.js. + +<base-alert> + +Cette méthode est faite à des fins de test. + +</base-alert> + +Pour utiliser cette fonction, vous devez installer `jsdom` : + +```bash +npm install --save-dev jsdom +``` + +Exemple : + +```js +const { loadNuxt } = require('nuxt') + +async function init() { + // Assuming you've already built your project + const nuxt = await loadNuxt({ for: 'start' }) + await nuxt.listen(3000) + const window = await nuxt.renderAndGetWindow('http://localhost:3000') + // Display the head `<title>` + console.log(window.document.title) + nuxt.close() +} + +init() +``` diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/2.$nuxt.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/2.$nuxt.md new file mode 100644 index 000000000..1feeaa76b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/2.$nuxt.md @@ -0,0 +1,70 @@ +--- +title: '$nuxt: Le helper Nuxt.js' +description: $nuxt est un helper conçu pour améliorer l'expérience de l'utilisateur. +category: internals-glossary +position: 2 +--- + +`$nuxt` est un helper conçu pour améliorer l'expérience de l'utilisateur. +Pour plus d'informations sur les helpers Nuxt.js, consultez le [chapitre sur le contexte et les aides dans le livre des concepts](https://nuxtjs.org/guides/concepts/context-helpers#nuxt-the-nuxtjs-helper) + +## Contrôle de connexion + +- `isOffline` + - Type: `Boolean` + - Description: `true` lorsque la connexion internet de l'utilisateur est hors ligne +- `isOnline` + - Type: `Boolean` + - Description: L'opposé de `isOffline` + +```html{}[layouts/default.vue] +<template> + <div> + <div v-if="$nuxt.isOffline">Vous êtes hors ligne</div> + <nuxt /> + </div> +</template> +``` + +## Rafraîchissement des données de la page + +- `refresh()` + - Lorsque vous souhaitez rafraîchir les données fournies par `asyncData` ou `fetch` + +```html{}[example.vue] +<template> + <div> + <div>{{ content }}</div> + <button @click="refresh">Rafraîchir</button> + </div> +</template> + +<script> + export default { + asyncData() { + return { content: 'Créé à : ' + new Date() } + }, + methods: { + refresh() { + this.$nuxt.refresh() + } + } + } +</script> +``` + +## Contrôle de la barre de chargement + +- `$loading` + - Lorsque vous voulez contrôler la barre de chargement de Nuxt + +```js{}[] +export default { + mounted() { + this.$nextTick(() => { + this.$nuxt.$loading.start() + setTimeout(() => this.$nuxt.$loading.finish(), 500) + }) + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/3.internals.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/3.internals.md new file mode 100644 index 000000000..dccedcc57 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/3.internals.md @@ -0,0 +1,104 @@ +--- +title: Introduction aux modules Nuxt +description: Mieux comprendre les modules internes de Nuxt +menu: Modules Nuxt +category: internals-glossary +position: 3 +--- + +Nuxt.js a une architecture entièrement modulaire qui permet aux développeurs d'étendre n'importe quelle partie de Nuxt Core en utilisant une API flexible. + +Pour plus d'informations détaillées, veuillez consulter le [Guide des modules](/docs/2.x/directory-structure/modules) si vous souhaitez développer votre propre module. + +Cette section aide à se familiariser avec les modules internes de Nuxt et peut être utilisée comme référence pour mieux comprendre et écrire vos propres modules. + +### Noyau + +Ces classes sont le cœur de Nuxt et doivent exister à la fois sur le runtime et le build time. + +#### Nuxt + +- [Classe `Nuxt`](/docs/2.x/internals-glossary/internals-nuxt) +- Source: [core/nuxt.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/core/src/nuxt.js) + +#### Renderer + +- [Classe `Renderer`](/docs/2.x/internals-glossary/internals-renderer) +- Source: [vue-renderer/renderer.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-renderer/src/renderer.js) + +#### ModuleContainer + +- [Classe `ModuleContainer`](/docs/2.x/internals-glossary/internals-module-container) +- Source: [core/module.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/core/src/module.js) + +### Build + +Ces classes sont nécessaires que pour le mode build ou dev. + +#### Builder + +- [Classe `Builder`](/docs/2.x/internals-glossary/internals-builder) +- Source: [builder/builder.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/builder/src/builder.js) + +#### Generator + +- [Classe `Generator`](/docs/2.x/internals-glossary/internals-generator) +- Source: [generator/generator.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/generator/src/generator.js) + +### Générale + +#### Utils + +- Source: [utils/src](https://github.com/nuxt/nuxt.js/blob/dev/packages/utils/src) + +#### Options + +- Source: [config/options.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/config/src/options.js) + +## Packaging & Usage + +Par défaut, Nuxt exporte toutes les classes. Pour les importer : + +```js +import { Nuxt, Builder, Utils } from 'nuxt' +``` + +## Patterns courant + +Toutes les classes Nuxt font référence à l'instance `nuxt` et aux options, de cette façon nous avons toujours une API cohérente entre les classes pour accéder aux `options` et `nuxt`. + +```js +class SomeClass { + constructor(nuxt) { + super() + this.nuxt = nuxt + this.options = nuxt.options + } + + someFunction() { + // Nous avons accès à `this.nuxt` et `this.options` + } +} +``` + +Les classes sont _plugables_ donc elles doivent être enregistré en tant que plugin sur le conteneur principal `nuxt` pour avoir plus de hooks. + +```js +class FooClass { + constructor(nuxt) { + super() + this.nuxt = nuxt + this.options = nuxt.options + + this.nuxt.callHook('foo', this) + } +} +``` + +On peut avoir un hook au module `foo` comme cela : + +```js +nuxt.hook('foo', foo => { + // ... +}) +``` diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/4.internals-nuxt.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/4.internals-nuxt.md new file mode 100644 index 000000000..0db6ea934 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/4.internals-nuxt.md @@ -0,0 +1,28 @@ +--- +title: La classe Nuxt +description: Nuxt Core Class +menu: La classe Nuxt +category: internals-glossary +position: 4 +--- + +- Source: **[core/nuxt.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/core/src/nuxt.js)** + +C'est le conteneur central qui permet à tous les modules et à toutes les classes de communiquer entre eux. Tous les modules ont accès à l'instance Nuxt en utilisant `this.nuxt`. + +## Hooks + +Nous pouvons enregistrer des hooks sur certains événements du cycle de vie. + +```js +nuxt.hook('ready', async nuxt => { + // Votre code personnalisé ici +}) +``` + +| Plugin | Arguments | Quand | +| -------- | ---------------------- | -------------------------------------------------------------------------------------- | +| `ready` | (nuxt) | Nuxt est prêt à travailler (`ModuleContainer` et `Renderer` prêt). | +| `error` | (error) | Une erreur non gérée lors de l'appel de hooks. | +| `close` | (nuxt) | La dernière instance se termine en douceur. | +| `listen` | (server, {host, port}) | Le serveur Nuxt **interne** commence à écouter. (Utilisez `nuxt start` ou `nuxt dev`). | diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/5.internals-renderer.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/5.internals-renderer.md new file mode 100644 index 000000000..51b1d2850 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/5.internals-renderer.md @@ -0,0 +1,26 @@ +--- +title: La classe `Renderer` +description: Classe Renderer Nuxt +menu: Rendu +category: internals-glossary +position: 5 +--- + +- Source: **[vue-renderer/renderer.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-renderer/src/renderer.js)** + +Cette classe exporte un middleware de connexion qui traite et sert toutes les reqûetes des ressources et SSR. + +## Hooks + +Nous pouvons enregistrer des hooks sur certains événements du cycle de vie. + +| Hook | Arguments | Quand | +| ------------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `render:before` | (renderer, options) | Avant de mettre en place un middleware et des ressources pour la classe Renderer, utile pour surcharger certaines méthodes ou options. | +| `render:setupMiddleware` | (app) _connect instance_ | Avant que Nuxt n'ajoute sa pile de middleware. Nous pouvons l'utiliser pour enregistrer le rendu personnalisés côté serveur (SSR). | +| `render:errorMiddleware` | (app) _connect instance_ | Avant d'ajouter le middleware d'erreur de Nuxt, utile pour ajouter votre propre middleware avant d'utiliser celui de Nuxt. Voir le [module Sentry](https://github.com/nuxt-community/sentry-module/blob/v4.0.3/lib/module.js#L151) pour plus d'informations. | +| `render:resourcesLoaded` | (resources) | Appelé après le chargement des ressources pour le moteur de rendu (client manifest, server bundle, etc). | +| `render:done` | (renderer) | SSR Middleware et toutes les ressources sont prêtes (Renderer ready). | +| `render:routeContext` | (context.nuxt) | _Chaque fois qu'une route est rendue par le serveur et avant le hook `render:route`_. Appelé avant la sérialisation du contexte Nuxt dans `window.__NUXT__`, utile pour ajouter des données que vous pouvez récupérer côté client. | +| `render:route` | (url, result, context) | _Chaque fois qu'une route est rendue par le serveur_. Appelé avant de renvoyer la requête au navigateur. | +| `render:routeDone` | (url, result, context) | _Chaque fois qu'une route est rendue par le serveur_. Appelé après que la réponse a été envoyée au navigateur. | diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/6.internals-module-container.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/6.internals-module-container.md new file mode 100644 index 000000000..cba340308 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/6.internals-module-container.md @@ -0,0 +1,97 @@ +--- +title: Conteneur de module +description: Conteneur de module Nuxt +menu: Conteneur de module +category: internals-glossary +position: 6 +--- + +- Source: **[core/module.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/core/src/module.js)** + +Tous les [modules](/docs/2.x/directory-structure/modules) seront appelés dans le contexte de l'instance `ModuleContainer`. + +## Plugins à usage unique + +Nous pouvons enregistrer des hooks sur certains événements du cycle de vie. + +```js +nuxt.moduleContainer.plugin('ready', async moduleContainer => { + // Faites-le après que tous les modules soient prêts +}) +``` + +Dans le contexte des [modules](/docs/2.x/directory-structure/modules), nous pouvons utiliser cette méthode à la place : + +```js +this.plugin('ready', async moduleContainer => { + // Faites-le après que tous les modules soient prêts +}) +``` + +| Plugin | Arguments | Quand | +| ------- | --------------- | ---------------------------------------------------------- | +| `ready` | moduleContainer | Tous les modules dans `nuxt.config.js` ont été initialisés | + +## Méthodes + +### addVendor (vendor) + +**Déprécié car le terme `vendor` n'est plus utilisé** + +Ajoute à `options.build.vendor` et applique un filtre unique. + +### addTemplate (template) + +- **template**: `String` or `Object` + - `src` + - `options` + - `fileName` + +Affiche le modèle en utilisant [lodash template](https://lodash.com/docs/4.17.4#template) pendant l'intégration au projet `buildDir` (`.nuxt`). + +Si `fileName` n'est pas fourni ou si `template` est une chaîne de caractères, le nom du fichier cible est par défaut `[dirName].[fileName].[pathHash].[ext]`. + +Cette méthode renvoie l'objet final `{ dst, src, options }`. + +### addPlugin (template) + +Enregistre un plugin en utilisant `addTemplate` et l'ajoute à la première ligne des options `plugins[]`. + +Vous pouvez utiliser `template.ssr : false` pour désactiver le plugin y compris dans le bundle SSR. + +### addServerMiddleware (middleware) + +Pousse le middleware dans [options.serverMiddleware](/docs/2.x/configuration-glossary/configuration-servermiddleware). + +### extendBuild (fn) + +Permet d'étendre facilement la configuration du webpack par chaînage dans la fonction [options.build.extend](/docs/2.x/configuration-glossary/configuration-build#extend). + +### extendRoutes (fn) + +Permet d'étendre facilement les routes dans la fonction [options.build.extendRoutes](/docs/2.x/configuration-glossary/configuration-router#extendroutes). + +### extendPlugins (fn) + +Permet d'étendre facilement les plugins dans la fonction [options.extendPlugins](/docs/2.x/configuration-glossary/configuration-extend-plugins). + +### addModule (moduleOpts, requireOnce) + +_Async function_ + +Enregistre un module. Les `moduleOpts` peuvent être une chaîne de caractères ou un tableau (`[src, options]`). Si `requireOnce` est `true` et que le module est résolu dans les `meta`, cela empêchera d'enregistrer deux fois le même module. + +### requireModule (moduleOpts) + +_Async function_ + +Est un raccourci pour `addModule(moduleOpts, true)` + +## Hooks + +Nous pouvons enregistrer des hooks sur certains événements du cycle de vie. + +| Hook | Arguments | Quand | +| ---------------- | -------------------------- | --------------------------------------------------------------------------------------------------------- | +| `modules:before` | (moduleContainer, options) | Appelé avant la création de la classe ModuleContainer, utile pour surcharger les méthodes et les options. | +| `modules:done` | (moduleContainer) | Appelé lorsque tous les modules ont été chargés. | diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/7.internals-builder.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/7.internals-builder.md new file mode 100644 index 000000000..269137f5b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/7.internals-builder.md @@ -0,0 +1,32 @@ +--- +title: La classe Builder +description: La classe `Builder` de Nuxt +menu: Constructeur +category: internals-glossary +position: 7 +--- + +- Source: **[builder/builder.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/builder/src/builder.js)** + +## Hooks + +Nous pouvons enregistrer des hooks sur certains événements du cycle de vie. + +```js +// Ajout d'hook pour le build +this.nuxt.hook('build:done', (builder) => { + ... +}) +``` + +| Hook | Arguments | Quand | +| ----------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `build:before` | (nuxt, buildOptions) | Avant que le build de Nuxt commence | +| `builder:prepared` | (nuxt, buildOptions) | Les répertoires de build ont été créés | +| `builder:extendPlugins` | (plugins) | Génération de plugins | +| `build:templates` | ({ templatesFiles, templateVars, resolve }) | Génération de fichiers modèles `.nuxt` | +| `build:extendRoutes` | (routes, resolve) | Génération des routes | +| `webpack:config` | (webpackConfigs) | Avant la configuration des compilateurs | +| `build:compile` | ({ name, compiler }) | Avant que webpack compile (le compilateur est une instance du webpack `Compiler`), si mode universel, appelé deux fois avec le nom `'client'` et `'server'` | +| `build:compiled` | ({ name, compiler, stats }) | Le build webpack est terminée | +| `build:done` | (nuxt) | Le build de Nuxt est terminé | diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/8.internals-generator.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/8.internals-generator.md new file mode 100644 index 000000000..6ce7959d3 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/8.internals-generator.md @@ -0,0 +1,25 @@ +--- +title: La classe Generator +description: La classe Generator de Nuxt +menu: Générateur +category: internals-glossary +position: 8 +--- + +- Source: **[generator/generator.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/generator/src/generator.js)** + +## Hooks + +`generate:` hooks: + +| Hook | Arguments | Quand | +| ----------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `generate:before` | (generator, generateOptions) | Hook avant la génération de la page | +| `generate:distRemoved` | (generator) | Hook sur le répertoire de destination nettoyé | +| `generate:distCopied` | (generator) | Hook sur la copie des fichiers statiques et du build | +| `generate:route` | ({ route, setPayload }) | Hook avant de générer la page, utile pour la charge utile dynamique, voir [#7422](https://github.com/nuxt/nuxt.js/pull/7422), disponible pour Nuxt 2.13+ | +| `generate:page` | ({ route, path, html }) | Hook pour permettre à l'utilisateur de mettre à jour le chemin et l'html après la génération | +| `generate:routeCreated` | ({ route, path, errors }) | Hook sur la sauvegarde du succès des pages générées | +| `generate:extendRoutes` | (routes) | Hook pour permettre à l'utilisateur de mettre à jour les routes à générer | +| `generate:routeFailed` | ({ route, errors }) | Hook sur l'enregistrement de l'échec de la page générée | +| `generate:done` | (generator, errors) | Hook sur la génération terminée | diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/9.nuxt.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/9.nuxt.md new file mode 100644 index 000000000..fe3f5f31b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/9.nuxt.md @@ -0,0 +1,40 @@ +--- +title: Utiliser Nuxt.js programmatiquement +description: Vous pouvez utiliser Nuxt.js par programmation pour l'utiliser comme un middleware vous donnant la liberté de créer votre propre serveur pour le rendu de vos applications web. +menu: Utiliser Nuxt.js programmatiquement +category: internals-glossary +position: 9 +--- + +Vous pouvez utiliser votre propre serveur avec votre middleware et votre API. C'est pourquoi vous pouvez utiliser Nuxt.js par programmation. + +## Le constructeur Nuxt + +Pour voir la liste des options à donner à Nuxt.js, voir la section configuration. + +```js +const { loadNuxt, build } = require('nuxt') + +// Vérifie si Nuxt fonctionne en mode développement +const isDev = process.env.NODE_ENV !== 'production' + +// Obtiens une instance Nuxt prête à l'emploi +const nuxt = await loadNuxt(isDev ? 'dev' : 'start') + +// Permet la construction en direct et le rechargement en mode développement +if (isDev) { + build(nuxt) +} + +// Nous pouvons utiliser `nuxt.render(req, res)` ou `nuxt.renderRoute(route, contexte)`. +``` + +Vous pouvez consulter les sites [nuxt-express](https://github.com/nuxt/express) et [adonuxt](https://github.com/nuxt/adonuxt) pour démarrer rapidement. + +### Journaux de debug + +Si vous souhaitez afficher les logs de Nuxt.js, vous pouvez ajouter ce qui suit en haut de votre fichier : + +```js +process.env.DEBUG = 'nuxt:*' +``` diff --git a/nuxtjs.org/content/fr/0.docs/6.internals-glossary/index.md b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/index.md new file mode 100644 index 000000000..d24c384f8 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/6.internals-glossary/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/internals-glossary/context +--- diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/1.fetch.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/1.fetch.md new file mode 100644 index 000000000..17ad47574 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/1.fetch.md @@ -0,0 +1,77 @@ +--- +title: La méthode fetch +description: La méthode fetch est utilisé pour remplir le store avant de render la page, c'est similaire à `asyncData` sauf que cela ne remplit pas le `data` du composant. +menu: La méthode fetch +category: components-glossary +position: 1 +--- + +## Nuxt >= 2.12 + +Avec l'arrivée de la `v2.12` de Nuxt.js, nous avons droit à un nouveau hook disponible dans **tous les composants Vue**: `fetch`. + +<base-alert> + +`fetch(context)` a été déprécié, à la place on peut utiliser un [middleware anonyme](/docs/2.x/components-glossary/pages-middleware#anonymous-middleware) dans la page: `middleware(context)` + +</base-alert> + +### Quand utiliser fetch? + +À chaque fois que l'on a besoin d'avoir de la data **asynchrone**. `fetch` est appelé côté serveur pour render les routes et côté client lors de la navigation. + +Il expose `$fetchState` au niveau du composant: + +- `$fetchState.pending`: `Boolean`, permet d'afficher un placeholder pendant que fetch est appelé (côté client). +- `$fetchState.error`: `null` ou `Error`, vous permet d'afficher un message d'erreur +- `$fetchState.timestamp`: `Integer`, l'horodatage du dernier fetch, utile en combinaison avec `keep-alive` pour de la mise en cache. + +Si vous souhaitez appeler le hook `fetch` depuis votre template, utilisez: + +```html +<button @click="$fetch">Rafraîchir</button> +``` + +ou la méthode dans le composant: + +```javascript +// méthode dans la section script +export default { + methods: { + refresh() { + this.$fetch() + } + } +} +``` + +On peut accéder au [context](/docs/2.x/internals-glossary/context) de Nuxt.js à l'intérieur du hook `fetch` en utilisant `this.$nuxt.context`. + +### Options + +- `fetchOnServer`: `Boolean` ou `Function` (par défaut: `true`), appelle `fetch()` lors d'un render de page côté serveur +- `fetchDelay`: `Integer` (défaut: `200`), définit un temps d'exécution minimal en millisecondes (pour éviter les flashs) + +<div class="Alert Alert--green"> + +Quand `fetchOnServer` est falsy (`false` ou retourne `false`), `fetch` sera appelé uniquement côté client et `$fetchState.pending` retournera `true` lors d'un render côté serveur du composant. + +</div> + +```html +<script> + export default { + data() { + return { + posts: [] + } + }, + async fetch() { + this.posts = await this.$http.$get( + 'https://jsonplaceholder.typicode.com/posts' + ) + }, + fetchOnServer: false + } +</script> +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/10.watchquery.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/10.watchquery.md new file mode 100644 index 000000000..9d19471ee --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/10.watchquery.md @@ -0,0 +1,39 @@ +--- +title: La propriété watchQuery +description: Surveille les query strings et exécute des méthodes de composant lors d'un changement (asyncData, fetch(context), validate, layout, ...) +menu: La propriété watchQuery +category: components-glossary +position: 10 +--- + +> Surveille les query strings et exécute des méthodes de composant lors d'un changement (asyncData, fetch(context), validate, layout, ...). + +- **Type:** `Boolean` ou `Array` ou `Function` (par défaut: `[]`) + +Utilisez la propriété `watchQuery` pour surveiller les query strings. Si les strings changent, toutes les méthodes du composant (asyncData, fetch(context), validate, layout, ...) seront appelées. La surveillance est désactivée par défaut pour des raisons de performance. + +Si l'on souhaite surveiller toutes les query strings, il faut définir `watchQuery: true`. + +```js +export default { + watchQuery: ['page'] +} +``` + +On peut aussi utiliser la fonction `watchQuery(nouvelleRequete, ancienneRequete)` pour avoir une surveillance plus précise. + +```js +export default { + watchQuery(nouvelleRequete, ancienneRequete) { + // Exécute seulement les méthodes du composant dans le cas où l'ancienne query string + // contenait la chaîne de caractères `bar` et la nouvelle `foo` + return nouvelleRequete.foo && ancienneRequete.bar + } +} +``` + +<base-alert> + +**Warning**: Le nouveau hook `fetch` (disponible depuis la version 2.12) n'est pas affecté par `watchQuery`. Pour plus d'informations, se référer aux [changements sur la surveillance des query strings](/docs/2.x/features/data-fetching#the-fetch-hook). + +</base-alert> diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/2.head.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/2.head.md new file mode 100644 index 000000000..6b32eebad --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/2.head.md @@ -0,0 +1,42 @@ +--- +title: La méthode head +description: Nuxt.js utilise vue-meta pour mettre à jour les entêtes et attributs HTML de votre application. +menu: La méthode head +category: components-glossary +position: 2 +--- + +> Nuxt.js utilise [vue-meta](https://github.com/nuxt/vue-meta) pour mettre à jour les `entêtes` et `attributs HTML` de votre application. + +- **Type:** `Object` ou `Function` + +Utilisez la méthode `head` pour définir les balises d'entête HTML de votre page actuelle. + +```html +<template> + <h1>{{ titre }}</h1> +</template> + +<script> + export default { + data() { + return { + titre: 'Salut le monde !' + } + }, + head() { + return { + title: this.titre, + meta: [ + // `hid` est un identifiant unique. N'utilisez pas `vmid` pour cela car cela ne marchera pas. + { + hid: 'description', + name: 'description', + content: 'Ma description personnalisée' + } + ] + } + } + } +</script> +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/3.key.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/3.key.md new file mode 100644 index 000000000..5d57dfd13 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/3.key.md @@ -0,0 +1,23 @@ +--- +title: La propriété key +description: Définit la propriété `key` pour un composant `<router-view>` interne +menu: La propriété key +category: components-glossary +position: 3 +--- + +> Définit la propriété `key` pour un composant `<router-view>` interne + +- **Type:** `String` ou `Function` + +La propriété `key` est propagée dans le `<router-view>`, ce qui est utile pour faire des transitions dans une route dynamique et avec une route différente. Des clés différentes résulteront en un re-render des composants de la page. + +Il y a plusieurs façons de définir la clé. Pour plus de détails, veuillez vous référer à la propriété `nuxtChildKey` dans le [composant nuxt](/docs/2.x/features/nuxt-components). + +```js +export default { + key(route) { + return route.fullPath + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/4.layout.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/4.layout.md new file mode 100644 index 000000000..01e11e5fd --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/4.layout.md @@ -0,0 +1,23 @@ +--- +title: La propriété layout +description: Chaque fichier (du premier niveau) dans le répertoire des `layouts` créera un layout customisé accessible depuis la propriété `layout` dans le composant page. +menu: La propriété layout +category: components-glossary +position: 4 +--- + +> Chaque fichier (du premier niveau) dans le répertoire des `layouts` créera un layout customisé accessible depuis la propriété `layout` dans le composant page. + +- **Type:** `String` ou `Function` (par défaut: `'default'`) + +Utilisez la clé `layout` dans vos composants pages pour définir un layout à utiliser: + +```js +export default { + layout: 'blog', + // OU + layout(context) { + return 'blog' + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/5.loading.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/5.loading.md new file mode 100644 index 000000000..8b88baed8 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/5.loading.md @@ -0,0 +1,27 @@ +--- +title: La propriété loading +description: La propriété loading vous donne la possibilité de désactiver la barre de progression par défaut sur une page spécifique. +menu: La propriété loading +category: components-glossary +position: 5 +--- + +> La propriété loading vous donne la possibilité de désactiver la barre de progression par défaut sur une page spécifique. + +- **Type:** `Boolean` (par défaut: `true`) + +Par défaut, Nuxt.js utilise son propre composant pour afficher une barre de progression entre les routes. + +Vous pouvez la désactiver ou la personnaliser à travers les [options de configuration du chargement](/docs/2.x/configuration-glossary/configuration-loading), mais aussi la désactiver seulement sur des pages spécifiques en passant la propriété `loading` à false: + +```html +<template> + <h1>Ma page</h1> +</template> + +<script> + export default { + loading: false + } +</script> +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/6.middleware.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/6.middleware.md new file mode 100644 index 000000000..f2a12572c --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/6.middleware.md @@ -0,0 +1,58 @@ +--- +title: La propriété middleware +description: Définit le middleware pour une page spécifique de l'application. +menu: La propriété middleware +category: components-glossary +position: 6 +--- + +- Type: `String` or `Array` or `Function` + - Items: `String` or `Function` + +Définit le middleware pour une page spécifique de l'application. + +## Middleware nommé + +Vous pouvez nommer votre middleware en créant un fichier à l'intérieur du répertoire `middleware/`, le nom du fichier sera le nom du middleware. + +```js{[middleware/authenticated.js]} +export default function ({ store, redirect }) { + // Si l'utilisateur n'est pas authentifié + if (!store.state.authenticated) { + return redirect('/login') + } +} +``` + +```html{}[pages/secret.vue] +<template> + <h1>Page secrète</h1> +</template> + +<script> + export default { + middleware: 'authenticated' + } +</script> +``` + +## Middleware anonyme + +Si l'on ressent le besoin d'utiliser un middleware seulement pour une page spécifique, on peut directement utiliser une fonction pour cela (voire même un tableau de fonctions): + +```html{[pages/secret.vue]} +<template> + <h1>Page secrète</h1> +</template> + +<script> + export default { + middleware({ store, redirect }) { + // Si l'utilisateur n'est pas authentifié + if (!store.state.authenticated) { + return redirect('/login') + } + } + } +</script> +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/7.scrolltotop.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/7.scrolltotop.md new file mode 100644 index 000000000..e06f01758 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/7.scrolltotop.md @@ -0,0 +1,29 @@ +--- +title: La propriété scrollToTop +description: La propriété scrollToTop indique à Nuxt.js qu'il faut défiler tout en haut de la page avant de la render. +menu: La propriété scrollToTop +category: components-glossary +position: 8 +--- + +> La propriété scrollToTop indique à Nuxt.js qu'il faut défiler tout en haut de la page avant de la render. + +- **Type:** `Boolean` (par défaut: `false`) + +Par défaut, Nuxt.js défile tout en haut lorsque l'on va sur une autre page, mais avec les routes imbriquées, Nuxt.js garde la position du défilement. Si l'on souhaite que Nuxt.js défile tout en haut lors du render des routes imbriquées, il faut passer `scrollToTop` à `true`: + +```html +<template> + <h1>Mon composant enfant</h1> +</template> + +<script> + export default { + scrollToTop: true + } +</script> +``` + +Inversement, on peut passer `scrollToTop` à `false` sur les routes parent. + +Si l'on souhaite écraser le comportement du défilement par défaut de Nuxt, veuillez vous référer à l'[option scrollBehavior](/docs/2.x/configuration-glossary/configuration-router#scrollbehavior). diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/8.transition.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/8.transition.md new file mode 100644 index 000000000..40d8a4e9b --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/8.transition.md @@ -0,0 +1,134 @@ +--- +title: La propriété `transition` de la page +description: Nuxt.js utilise le composant `<transition>` pour nous permettre de créer et appliquer de superbes transitions/animations lors de la navigation entre les pages. +menu: La propriété transition +category: components-glossary +position: 7 +--- + +> Nuxt.js utilise le composant [`<transition>`](https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) pour nous permettre de créer et appliquer de superbes transitions/animations lors de la navigation entre les pages. + +- **Type:** `String` ou `Object` ou `Function` + +Pour définir une transition personnalisée pour une route spécifique, il suffit d'ajouter la propriété `transition` au composant page. + +```js +export default { + // Peut être une chaîne de caractères + transition: '' + // Ou un Objet + transition: {} + // Ou une fonction + transition (to, from) {} +} +``` + +## Chaîne de caractères + +Si le paramètre `transition` est défini en tant que chaîne de caractères, il sera utilisé sous la forme `transition.name`. + +```js +export default { + transition: 'test' +} +``` + +Nuxt.js va utiliser ces paramètres pour définir le composant comme suit: + +```html +<transition name="test"></transition> +``` + +## Objet + +Si la propriété `transition` est définie en tant qu'objet: + +```js +export default { + transition: { + name: 'test', + mode: 'out-in' + } +} +``` + +Nuxt.js va utiliser ces paramètres pour définir le composant comme suit: + +```html +<transition name="test" mode="out-in"></transition> +``` + +L'objet `transition` peut avoir les propriétés suivantes: + +<!-- The ToC below seems so wrong, in the english version too.. --> + +| Propriété | Type | Par défaut | Définition | +| ------------------ | --------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `String` | `"page"` | Le nom de la transition appliquée à toutes les transitions de routes. | +| `mode` | `String` | `"out-in"` | Le mode qui s'applique aux transitions sur toutes les routes, se référer à la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Transition-Modes). | +| `css` | `Boolean` | `true` | Définit l'application ou non des classes CSS sur les transitions. Si définit à `false`, seulement les hooks JavaScript définis par des évènements seront exécutés. | +| `duration` | `Integer` | non défini | La durée (en millisecondes) appliquée à la transition, voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations). | +| `type` | `String` | non défini | Spécifie le type des évènements de transition à attendre pour déterminer la fin d'une transition. Les valeurs disponibles sont `"transition"` et `"animation"`. Par défaut, le type qui a la plus longue durée sera choisi. | +| `enterClass` | `String` | non défini | Le state du départ d'une classe de transition. Voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes). | +| `enterToClass` | `String` | non défini | Le state de fin d'une classe de transition. Voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes). | +| `enterActiveClass` | `String` | non défini | La classe appliquée pendant l'intégralité de la durée de la transition. Voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes). | +| `leaveClass` | `String` | non défini | Le state du départ d'une classe de transition. Voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes). | +| `leaveToClass` | `String` | non défini | Le state de fin d'une classe de transition. Voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes). | +| `leaveActiveClass` | `String` | non défini | La classe appliquée pendant l'intégralité de la durée de la transition. Voir la [documentation de Vue.js](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes). | + +On peut aussi définir des méthodes dans la propriété `transition` de la page, celles-ci sont pour des [hooks JavaScript](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks): + +- `beforeEnter(élément)` +- `enter(élément, terminé)` +- `afterEnter(élément)` +- `enterCancelled(élément)` +- `beforeLeave(élément)` +- `leave(élément, terminé)` +- `afterLeave(élément)` +- `leaveCancelled(élément)` + +```js +export default { + transition: { + afterLeave(élément) { + console.log('afterLeave', élément) + } + } +} +``` + +_Note: une bonne pratique serait d'explicitement déclarer `css:false` pour des transitions uniquement en JavaScript, ainsi Vue pourra ignorer la détection du CSS. Cela prévient de plus de potentiels conflits accidentels avec des règles CSS._ + +### Mode de transition + +**Le mode de transition par défaut pour les pages est différent de celui de Vue.js**. Il est défini à `out-in`. Si l'on souhaite exécuter les transitions entrantes et sortantes simultanément, il faut passer le mode à une chaîne de caractères vide `mode: ''`. + +```js +export default { + transition: { + name: 'test', + mode: '' + } +} +``` + +## Fonction + +Si la propriété `transition` est définie en tant que fonction: + +```js +export default { + transition(to, from) { + if (!from) { + return 'slide-left' + } + return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left' + } +} +``` + +Voici ce que cela va générer comme transitions lors de la navigation: + +- `/` to `/posts` => `slide-left` +- `/posts` to `/posts?page=3` => `slide-left` +- `/posts?page=3` to `/posts?page=2` => `slide-right` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/9.validate.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/9.validate.md new file mode 100644 index 000000000..40ffd40c4 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/9.validate.md @@ -0,0 +1,71 @@ +--- +title: La méthode validate +description: Nuxt.js vous permet de définir une méthode de validation à l'intérieur de votre composant de routes dynamiques. +menu: La méthode validate +category: components-glossary +position: 9 +--- + +> Nuxt.js vous permet de définir une méthode de validation à l'intérieur de votre composant de routes dynamiques. + +- **Type:** `Function` ou `Async Function` + +`validate` est appelé avant chaque navigation sur une nouvelle route. Il sera appelé une fois côté serveur: lors de la première requête à l'application Nuxt et côté client: lors de la navigation sur d'autres routes . Cette méthode prend l'objet [`context`](/docs/2.x/internals-glossary/context) en tant qu'argument. + +```js +validate({ params, query, store }) { + return true // si les paramètres sont valides + return false // ceci va arrêter Nuxt.js dans son render de la route et afficher la page d'erreur +} +``` + +```js +async validate({ params, query, store }) { + // opérations asynchrone à attendre + return true // si les paramètres sont valides + return false // ceci va arrêter Nuxt.js dans son render de la route et afficher la page d'erreur +} +``` + +On peut aussi renvoyer des promesses: + +```js +validate({ params, query, store }) { + return new Promise((resolve) => setTimeout(() => resolve())) +} +``` + +Nuxt.js vous permet de définir une méthode de validation à l'intérieur de votre composant de routes dynamiques (dans notre exemple: `pages/users/_id.vue`). + +Si la méthode de validation ne retourne pas `true`, Nuxt.js va automatiquement charger la page d'erreur 404. + +```js +export default { + validate({ params }) { + // Doit être un nombre + return /^\d+$/.test(params.id) + } +} +``` + +On peut aussi vérifier de la data dans notre [store](/docs/2.x/directory-structure/store) (remplie par exemple par [`nuxtServerInit`](/docs/2.x/directory-structure/store#the-nuxtserverinit-action) avant l'action): + +```js +export default { + validate({ params, store }) { + // On vérifie si `params.id` est une catégorie existante + return store.state.categories.some(category => category.id === params.id) + } +} +``` + +On peut aussi renvoyer des erreurs attendues (ou pas) durant l'exécution de la fonction de validation: + +```js +export default { + async validate({ params, store }) { + // Renvoie une erreur interne serveur 500 avec un message personnalisé + throw new Error('En cours de construction !') + } +} +``` diff --git a/nuxtjs.org/content/fr/0.docs/7.components-glossary/index.md b/nuxtjs.org/content/fr/0.docs/7.components-glossary/index.md new file mode 100644 index 000000000..0fce0a045 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/7.components-glossary/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/components-glossary/fetch +--- diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/1.21yunbox.md b/nuxtjs.org/content/fr/0.docs/8.deployment/1.21yunbox.md new file mode 100644 index 000000000..a3a937209 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/1.21yunbox.md @@ -0,0 +1,54 @@ +--- +title: Deploy Nuxt on 21YunBox +description: How to deploy Nuxt.js on 21YunBox? +menu: 21YunBox +target: Static +category: deployment +position: 100 +--- + +[21YunBox](https://www.21yunbox.com) provides blazing fast Chinese CDN, continuous deployment, one-click HTTPS and [other services like managed databases and backend web services](https://www.21yunbox.com/docs/), providing an avenue to launch web projects in China. + +21YunBox includes the following features: + +- Continuous, automatic builds & deploys from GitHub and Gitee +- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org) +- Instant cache invalidation with a blazing fast, Chinese CDN +- Unlimited [custom domains](https://www.21yunbox.com/docs/#/custom-domains) +- Automatic [Brotli compression](https://en.wikipedia.org/wiki/Brotli) for faster sites +- Native HTTP/2 support +- Automatic HTTP → HTTPS redirects +- Custom URL redirects and rewrites + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started or fork 21YunBox's [Nuxt Example](https://gitee.com/eryiyunbox-examples/nuxtjs) before continuing. + +## Setup + +You can set up a Nuxt site on 21YunBox in two quick steps: + +1. Create a new web service on 21YunBox, and give 21YunBox permission to access your GitHub or Gitee repo. +2. Use the following values during creation: + + | | | + | --------------------- | --------------------------------------------------- | + | **Environment** | `Static Site` | + | **Build Command** | `yarn && yarn generate` (or your own build command) | + | **Publish Directory** | `./dist` (or your own output directory) | + +That's it! Your site will be live on your 21YunBox URL (which looks like `yoursite.21yunbox.com`) as soon as the build is done. + +## Continuous deploys + +Now that 21YunBox is connected to your repo, it will automatically build and publish your site any time you push to GitHub. + +## 21YunBox CDN and cache invalidation + +21YunBox hosts your site on a Chinese, blazing fast CDN which ensures the fastest possible download times for all your users across China. + +Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site. + +## Custom domains + +Add your own domains to your site easily using 21YunBox's [custom domains](https://www.21yunbox.com/docs/#/custom-domains) guide. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/10.google-appengine.md b/nuxtjs.org/content/fr/0.docs/8.deployment/10.google-appengine.md new file mode 100644 index 000000000..b24861834 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/10.google-appengine.md @@ -0,0 +1,69 @@ +--- +title: Deploy Nuxt on Google App Engine +description: How to deploy Nuxt.js on Google App Engine? +menu: Google App Engine +target: Server +category: deployment +position: 107 +--- + +Deploying to [Google App Engine](https://cloud.google.com/appengine/) is a fast and easy solution for hosting your universal Nuxt application on Google's Cloud Services. + +In this guide, we build the application locally and then simply upload the entire project folder to Google App Engine. After the upload, Google App Engine will automatically start the `start` script in our package.json and your app will be available immediately. + +## Getting Started + +Make sure you have a Google Cloud Account, a project and an empty Google App Engine app set up on [Google App Engine](https://cloud.google.com/appengine/). Furthermore, make sure to download and install the Cloud SDK (CLI) from Google as explained [here](https://cloud.google.com/sdk/) and log into your Google Cloud Account. + +## Configure your application + +All you need to add to your universal Nuxt app for deploying it to the App Engine is a file called `app.yaml`. Create a new file with that name in your root project directory and add the following content: + +```yaml +runtime: nodejs10 + +instance_class: F2 + +handlers: + - url: /_nuxt + static_dir: .nuxt/dist/client + secure: always + + - url: /(.*\.(gif|png|jpg|ico|txt))$ + static_files: static/\1 + upload: static/.*\.(gif|png|jpg|ico|txt)$ + secure: always + + - url: /.* + script: auto + secure: always + +env_variables: + HOST: '0.0.0.0' +``` + +or for flexible environment the minimal configuration is: + +```yaml +runtime: nodejs +env: flex +``` + +## Build and deploy the app + +Now build your app with `npm run build`. + +At this point, your app is ready to be uploaded to Google App Engine. Now just run the following command: + +``` +gcloud app deploy app.yaml --project [project-id] +``` + +Voilà! Your Nuxt.js application is now hosted on Google App Engine! + +## Further Information + +- The `instance_class` attribute in your app.yaml file sets the class of your app instance. Instance F2 is not completely free, but has the minimum memory needed to run a Nuxt application. +- Make sure `start` in package.json is the command that you want to run after deployment. If you usually run by `start:prod` or some other command, your app will not work as expected. + +Make sure to put the `project-id` and not the `project-name` in the deploy command. These are two different things but easy to mix up. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/11.google-cloud-run.md b/nuxtjs.org/content/fr/0.docs/8.deployment/11.google-cloud-run.md new file mode 100644 index 000000000..51972556e --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/11.google-cloud-run.md @@ -0,0 +1,148 @@ +--- +title: Deploy Nuxt on Google Cloud Run +description: How to deploy Nuxt on Google Cloud Run? +menu: Google Cloud Run +target: Server +category: deployment +position: 108 +--- + +[Google Cloud Run](https://cloud.google.com/run) is a fully managed compute platform for deploying and scaling containerized applications quickly and securely. + +In this guide, we simply upload the entire project folder to Google Cloud Build with a Dockerfile. After the upload, Cloud Build will automatically generate a container. Then we will deploy this container to Google Cloud Run which will start it with the `start` script in our package.json. + +## Getting Started + +Make sure you have a Google Cloud Account, a project and the accesses as editor on Cloud Build and Cloud Run. Furthermore, make sure to download and install the Cloud SDK (CLI) from Google as explained [here](https://cloud.google.com/sdk/) and log into your Google Cloud Account. If you do not want to download the Cloud SDK, be aware that you can use gcloud CLI from the Google Cloud Console. + +Now, let's do few checks! + +If the Cloud Build API and the Cloud Run API are not enabled, enable them: + +```bash +# Enabling Cloud Build +$ gcloud services enable cloudbuild.googleapis.com + +# Enabling Cloud Run +$ gcloud services enable run.googleapis.com +``` + +Go in your application directory and install dependencies: + +```bash +# For yarn users +$ yarn + +# For npm users +$ npm install +``` + +Start the application locally: + +```bash +# For yarn users +$ yarn dev + +# For npm users +$ npm run dev +``` + +Check that everything works. + +## Application configuration + +!Attention: from now and on, the port is set to `3000`, change all occurrences if needed. + +The host should not be set to localhost, but to 0.0.0.0. You can update the server configuration in `nuxt.config.js`: + +```javascript +export default { + server: { + port: 3000, // default: 3000 + host: '0.0.0.0', // default: localhost, + timing: false + } +} +``` + +More information [here](/docs/2.x/configuration-glossary/configuration-server). + +Or, add this to your package.json file: + +```json +{ + "config": { + "nuxt": { + "host": "0.0.0.0", + "port": "3000", + "timing": false + } + } +} +``` + +## Containerize your application + +Now, we will create a container with Cloud Build. + +You need to add to your Nuxt app a `Dockerfile`. Create a new file named `Dockerfile` in your root project directory and add the following content: + +For yarn users: + +```Dockerfile +FROM node:14 + +WORKDIR /usr/src/app + +COPY package.json ./ +RUN yarn + +COPY . . +EXPOSE 3000 + +RUN yarn build + +CMD [ "yarn", "start" ] +``` + +For npm users: + +```Dockerfile +FROM node:14 + +WORKDIR /usr/src/app + +COPY package.json ./ +RUN npm install + +COPY . . +EXPOSE 3000 + +RUN npm run build + +CMD [ "npm", "run", "start" ] +``` + +Run the following command to start the build process: + +`gcloud builds submit --tag gcr.io/<YOUR_GOOGLE_CLOUD_PROJECT_ID>/my-nuxt-app-name:1.0.0 .` + +!Attention: if you want to implement continuous delivery or .env files configurations, you will have to use a [Cloud Build configuration file](https://cloud.google.com/cloud-build/docs/build-config). + +## Deploying your application on Cloud Run + +Run the following command to deploy your application: + +`gcloud run deploy --image=gcr.io/<YOUR_GOOGLE_CLOUD_PROJECT_ID>/my-nuxt-app-name:1.0.0 --platform managed --port 3000` + +Allow unauthenticated invocations if you want to set up a public access. + +Be aware that Cloud Run applications will have a default concurrency value of 80 (each container instance will handle up to 80 requests at a time). You can specify the concurrency value this way: + +`gcloud run deploy --image=gcr.io/<YOUR_GOOGLE_CLOUD_PROJECT_ID>/my-nuxt-app-name:1.0.0 --platform managed --port 3000 --concurrency <YOUR_CONCURRENCY_VALUE>` + +Run the following command to check if the deployment was created successfully: + +`gcloud run services list --platform managed` + +A list of Cloud Run services is displayed. Click on the URL of your deployment and enjoy the result! diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/12.heroku.md b/nuxtjs.org/content/fr/0.docs/8.deployment/12.heroku.md new file mode 100644 index 000000000..e0074a92d --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/12.heroku.md @@ -0,0 +1,53 @@ +--- +title: Deploy Nuxt on Heroku +description: How to deploy Nuxt.js on Heroku? +menu: Heroku +target: Server +category: deployment +position: 109 +--- + +We recommend you read the [Heroku documentation for Node.js](https://devcenter.heroku.com/articles/nodejs-support). + +<div class="Promo__Video"> + <a href="https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-heroku?friend=nuxt" target="_blank"> + <p class="Promo__Video__Icon"> + Watch a free lesson on <strong>How to deploy Nuxt.js to Heroku</strong> on Vue School + </p> + </a> +</div> + +First, we want our application to listen on the host `0.0.0.0` and run in production mode: + +```bash +heroku config:set HOST=0.0.0.0 +heroku config:set NODE_ENV=production +``` + +You should see this in your Heroku dashboard (Settings section): + +![nuxt config vars Heroku](https://i.imgur.com/EEKl6aS.png) + +Heroku uses a [Procfile](https://devcenter.heroku.com/articles/procfile) (name the file `Procfile` with no file extension) that specifies the commands that are executed by the apps dynos. To start the Procfile will be very simple, and needs to contain the following line: + +``` +web: nuxt start +``` + +This will instruct run the `nuxt start` command and tell Heroku to direct external HTTP traffic to it. + +Finally, we can push the app on Heroku with: + +```bash +git push heroku master +``` + +To deploy a non-master branch to Heroku use: + +```bash +git push heroku develop:master +``` + +where `develop` is the name of your branch. + +Voilà! Your Nuxt.js application is now hosted on Heroku! diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/15.layer0.md b/nuxtjs.org/content/fr/0.docs/8.deployment/15.layer0.md new file mode 100644 index 000000000..66777dc82 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/15.layer0.md @@ -0,0 +1,75 @@ +--- +title: Deploy Nuxt on Layer0 +description: How to deploy Nuxt.js app on Layer0? +menu: Layer0 +target: Server +category: deployment +position: 110 +--- + +Layer0 supports universal (SSR) Nuxt.js applications. + +[Layer0](https://www.layer0.co) is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic websites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring. Layer0 offers a free tier. + +For detailed instructions consult the [Layer0 Nuxt.js documentation](https://docs.layer0.co/guides/nuxt). + +## Getting Started + +1. Sign up for a free account on [Layer0's signup page](https://app.layer0.co/signup). + +2. Install the [Layer0 CLI](https://docs.layer0.co/guides/cli) + +<code-group> + <code-block label="Yarn" active> + +```bash +yarn global add @layer0/cli +``` + + </code-block> + <code-block label="npm"> + +```bash +npm i -g @layer0/cli +``` + + </code-block> + +</code-group> + +## Configure your project + +3. Make sure [server side rendering is enabled](/docs/2.x/configuration-glossary/configuration-ssr) and in your `nuxt.config.js` add the `@layer0/nuxt` module: + +```js +// nuxt.config.js + +module.exports = { + modules: ['@layer0/nuxt/module'] +} +``` + +4. Run `layer0 init` which will configure your project for Layer0. + +## Running and deploying your project + +5. To test your app locally, run the following in your project directory: + +```js +layer0 run +``` + +6. To deploy your app, run the following in your project directory: + +```js +layer0 deploy +``` + +## Optimize your project's performance + +- (Optional) To optimize the performance of server side rendering in Nuxt.js, Layer0 recommends moving most your modules into `buildModules` as described in the [modules vs buildModules section](https://docs.layer0.co/guides/nuxt#section_modules_vs_buildmodules) of the Layer0 Nuxt.js guide. +- (Optional) Layer0 automatically supports Nuxt.js's built-in routing scheme. However you can and should optimize the performance by customizing the routing, caching, and prefetching via EdgeJS as shown in the [Routing section](https://docs.layer0.co/guides/nuxt#section_routing) of the Layer0 Nuxt.js guide. + +## Get help + +If you have issues please check the [Troubleshooting section](https://docs.layer0.co/guides/nuxt#section_troubleshooting) of the guide or create a ticket in the [forums](https://forum.layer0.co). \ No newline at end of file diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/16.netlify.md b/nuxtjs.org/content/fr/0.docs/8.deployment/16.netlify.md new file mode 100644 index 000000000..f93995c39 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/16.netlify.md @@ -0,0 +1,72 @@ +--- +title: Déployer Nuxt sur Netlify +description: Comment déployer Nuxt.js sur Netlify ? +menu: Netlify +target: Static +category: deployment +position: 112 +--- + +Le déploiement sur [Netlify](https://www.netlify.com) est une option simple et rapide afin de mettre en ligne un site **généré statiquement** avec Nuxt.js. + +Le cœur du processus utilise la commande `nuxt generate`(<= v2.12) pendant le déploiement pour créer une version statique de votre application Nuxt.js dans un répertoire `dist`. Le contenu de ce répertoire est ensuite déployé sur une URL de production. + +<div class="Promo__Video"> + <a href="https://explorers.netlify.com/learn/get-started-with-nuxt/nuxt-generate-and-deploy" target="_blank"> + <p class="Promo__Video__Icon"> + Watch a free lesson on <strong>How to deploy Nuxt.js to Netlify</strong> on Jamstack Explorers + </p> + </a> +</div> + +## Commencer + +Appuyez sur le bouton _"New site from Git"_ du tableau de bord Netlify. + +Authentifiez-vous auprès de votre hébergeur Git puis sélectionnez un repository à déployer et continuez. + +Vous devriez atterrir à l'étape 3: _"Build options, and deploy!"_ + +## Configurer + +### Pour un site généré statiquement + +Assurez-vous que vous avez `target: 'static'` dans votre `nuxt.config`. + +1. **Branche à déployer:** `main`, ou la branche que vous préférez +1. **Commande de construction:** `npm run generate` +1. **Répertoire de publication:** `dist` + +### Pour le rendu côté client uniquement + +Assurez-vous que vous avez `target: 'static'` et `ssr: false` dans votre `nuxt.config`. + +1. **Branche à déployer:** `main`, ou la branche que vous préférez +1. **Commande de construction:** `npm run generate` +1. **Répertoire de publication:** `dist` + +Pour le rendu côté client, il y a un problème d'actualisation car par défaut sur Netlify le site redirige vers _"404 not found"_. Pour toutes les pages qui ne sont pas générées, elles reviendront en mode SPA, puis si vous actualisez ou partagez ce lien, vous obtiendrez la page 404 de Netlify. C'est parce que les pages qui ne sont pas générées n'existent pas réellement. En redirigeant vers le 404.html, Nuxt rechargera correctement votre page dans SPA fallback. + +Le moyen le plus simple de résoudre ce problème est d'ajouter une [propriété generate](/docs/2.x/configuration-glossary/configuration-generate#fallback) dans votre `nuxt.config` et en définissant `fallback: true`. Ainsi, il reviendra au 404.html généré en mode SPA au lieu de la page 404 de Netlify. + +```js +export default { + generate: { + fallback: true + } +} +``` + +Si toutefois vous souhaitez appliquer automatiquement les en-têtes et les redirections de l'application, il existe un module pour cela, particulièrement utile pour les headers/redirects custom (dans un \_headers ou \_redirects): + +[netlify-files-module](https://github.com/nuxt-community/netlify-files-module) + +> Pour plus d'informations sur les redirections Netlify, consultez la [documentation Netlify](https://www.netlify.com/docs/redirects/#rewrites-and-proxying). + +> Pour une référence simple sur les redirections Netlify, lisez cet [article de blog](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site) by Divya Sasidharan + +> En option, vous pouvez ajouter des variables ENV supplémentaires via le bouton _"Advanced"_. Celles-ci peuvent être utiles pour échanger des informations d'identification d'API alternatives, etc. Netlify fournit également des [variables ENV par défaut](https://www.netlify.com/docs/build-settings/#build-environment-variables) qui peuvent être lues par votre application Nuxt.js au moment de la construction. + +Cliquez sur _"Deploy site"_ pour déclencher immédiatement un déploiement. Votre site Netlify recevra une URL aléatoire et sera déployé à l'aide de la commande `nuxt generate`. + +Voilà ! Votre application Nuxt.js est désormais hébergée sur Netlify ! diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/17.nginx.md b/nuxtjs.org/content/fr/0.docs/8.deployment/17.nginx.md new file mode 100644 index 000000000..11cc46ea9 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/17.nginx.md @@ -0,0 +1,245 @@ +--- +title: Using NGINX as a reverse proxy +description: How to use nginx as a reverse proxy +menu: NGINX +target: Static & Server +category: deployment +position: 113 +--- + +```nginx +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 80; # the port nginx is listening on + server_name your-domain; # setup your domain here + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + location / { + expires $expires; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here + } +} +``` + +## Using nginx with generated pages and a caching proxy as fallback: + +If you have a high volume website with regularly changing content, you might want to benefit from Nuxt generate capabilities and [nginx caching](https://www.nginx.com/blog/nginx-caching-guide). + +Below is an example configuration. Keep in mind that: + +- root folder should be the same as set by [configuration generate.dir](/docs/2.x/configuration-glossary/configuration-generate#dir) +- expire headers set by Nuxt are stripped (due to the cache) +- both Nuxt as nginx can set additional headers, it's advised to choose one (if in doubt, choose nginx) +- if your site is mostly static, increase the `proxy_cache_path inactive` and `proxy_cache_valid` numbers + +If you don't generate your routes but still wish to benefit from nginx cache: + +- remove the `root` entry +- change `location @proxy {` to `location / {` +- remove the other 2 `location` entries + +```nginx +proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off; + +map $sent_http_content_type $expires { + "text/html" 1h; # set this to your needs + "text/html; charset=utf-8" 1h; # set this to your needs + default 7d; # set this to your needs +} + +server { + listen 80; # the port nginx is listening on + server_name your-domain; # setup your domain here + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + charset utf-8; + + root /var/www/NUXT_PROJECT_PATH/dist; + + location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ { + expires $expires; + add_header Pragma public; + add_header Cache-Control "public"; + + try_files $uri $uri/ @proxy; + } + + location / { + expires $expires; + add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';"; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; + add_header X-Frame-Options "SAMEORIGIN"; + + try_files $uri $uri/index.html @proxy; # for generate.subFolders: true + # try_files $uri $uri.html @proxy; # for generate.subFolders: false + } + + location @proxy { + expires $expires; + add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';"; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-Cache-Status $upstream_cache_status; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_ignore_headers Cache-Control; + proxy_http_version 1.1; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here + proxy_cache nuxt-cache; + proxy_cache_bypass $arg_nocache; # probably better to change this + proxy_cache_valid 200 302 60m; # set this to your needs + proxy_cache_valid 404 1m; # set this to your needs + proxy_cache_lock on; + proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504; + proxy_cache_key $uri$is_args$args; + } +} +``` + +## nginx configuration for Laravel Forge: + +Change `YOUR_WEBSITE_FOLDER` to your website folder and `YOUR_WEBSITE_DOMAIN` to your website URL. Laravel Forge will have filled out these values for you but be sure to double check. + +```nginx +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/before/*; + +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 80; + listen [::]:80; + server_name YOUR_WEBSITE_DOMAIN; + + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Content-Type-Options "nosniff"; + + charset utf-8; + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + # FORGE CONFIG (DOT NOT REMOVE!) + include forge-conf/YOUR_WEBSITE_FOLDER/server/*; + + location / { + expires $expires; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js + } + + access_log off; + error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error; + + location ~ /\.(?!well-known).* { + deny all; + } +} + +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/after/*; +``` + +## Secure Laravel Forge with TLS: + +It's best to let Laravel Forge do the editing of the `nginx.conf` for you, by clicking on Sites -> YOUR_WEBSITE_DOMAIN (SERVER_NAME) and then click on SSL and install a certificate from one of the providers. Remember to activate the certificate. Your `nginx.conf` should now look something like this: + +```nginx +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/before/*; + +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + server_name YOUR_WEBSITE_DOMAIN; + + # FORGE SSL (DO NOT REMOVE!) + ssl_certificate /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.crt; + ssl_certificate_key /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.key; + + ssl_protocols TLSv1 TLSv1.1 TLSv1.2; + ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES'; + ssl_prefer_server_ciphers on; + ssl_dhparam /etc/nginx/dhparams.pem; + + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Content-Type-Options "nosniff"; + + charset utf-8; + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + # FORGE CONFIG (DOT NOT REMOVE!) + include forge-conf/YOUR_WEBSITE_FOLDER/server/*; + + location / { + expires $expires; + + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_redirect off; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js + } + + access_log off; + error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error; + + location ~ /\.(?!well-known).* { + deny all; + } +} + +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/after/*; +``` diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/18.platformsh.md b/nuxtjs.org/content/fr/0.docs/8.deployment/18.platformsh.md new file mode 100644 index 000000000..8df1ebcab --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/18.platformsh.md @@ -0,0 +1,32 @@ +--- +title: Deploy Nuxt on Platform.sh +description: How to deploy Nuxt.js on Platform.sh? +menu: Platform.sh +target: Static & Server +category: deployment +position: 113.5 +--- + +[Platform.sh](https://platform.sh/) is a full-featured end-to-end continuous deployment cloud hosting system for both staging and production environments. It is capable of hosting both static and dynamic applications in a variety of languages. + +Platform.sh includes the following features: + +- Build, deploy, manage, and scale applications. +- Any branch can be a staging environment; create and delete environments with ease. +- Support for almost any Node.js, PHP, Python, Ruby, Go, or Java application, in your choice of version, or mix and match. +- Automatic TLS certificates. +- Integrated build pipeline to customize your application's build process however you need. +- Infrastructure-as-code: define three YAML files and your entire cluster is created on demand. Add and remove services with ease. +- Deploy code directly from your GitHub and GitLab repositories. + +## Setup + +Platform.sh has a pre-made template for Nuxt.js available. The link below will create a new Platform.sh project and pre-populate it with a sample Nuxt.js application that you can then customize. + +<p align="center"> +<a href="https://console.platform.sh/projects/create-project?template=https://raw.githubusercontent.com/platformsh/template-builder/master/templates/nuxtjs/.platform.template.yaml&utm_content=nuxtjs&utm_source=nuxtjs_orgb&utm_medium=button&utm_campaign=deploy_on_platform"> + <img src="https://platform.sh/images/deploy/lg-blue.svg" alt="Deploy on Platform.sh" height="40px" width="180px" /> +</a> +</p> + +The `README.md` file includes details of the provided default configuration. New Platform.sh accounts are free for the first 30 days. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/19.pm2.md b/nuxtjs.org/content/fr/0.docs/8.deployment/19.pm2.md new file mode 100644 index 000000000..6abbb5093 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/19.pm2.md @@ -0,0 +1,58 @@ +--- +title: Deploy Nuxt using PM2 +description: How to deploy Nuxt.js with PM2 cluster mode enabled? +menu: PM2 +target: Server +category: deployment +position: 114 +--- + +Deploying using [PM2](https://pm2.keymetrics.io/) (Process Manager 2) is a fast and easy solution for hosting your universal Nuxt application on your server or VM. + +In this guide, we build the application locally and serve it though a PM2 config file with the cluster mode activated. Cluster mode will prevent downtime by allowing applications to be scaled across multiple CPUs. + +## Getting Started + +Make sure you have pm2 installed on your server. If not, simply globally install it from yarn or npm. + +```bash +# yarn pm2 install +$ sudo yarn global add pm2 --prefix /usr/local + +# npm pm2 install +$ npm install pm2 -g +``` + +## Configure your application + +All you need to add to your universal Nuxt app for serving it though PM2 is a file called `ecosystem.config.js`. Create a new file with that name in your root project directory and add the following content: + +```javascript +module.exports = { + apps: [ + { + name: 'NuxtAppName', + exec_mode: 'cluster', + instances: 'max', // Or a number of instances + script: './node_modules/nuxt/bin/nuxt.js', + args: 'start' + } + ] +} +``` + +## Build and serve the app + +Now build your app with `npm run build`. + +And serve it with `pm2 start`. + +Check the status `pm2 ls`. + +Your Nuxt.js application is now serving! + +## Further Information + +This solution guaranty a no downtime for your application on this server. You should prevent server failing through redundancy or high availability cloud solutions. + +You can find PM2 additional configurations [here](https://pm2.keymetrics.io/docs/usage/application-declaration/#general). diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/2.amazon-web-services.md b/nuxtjs.org/content/fr/0.docs/8.deployment/2.amazon-web-services.md new file mode 100644 index 000000000..0c04caa33 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/2.amazon-web-services.md @@ -0,0 +1,406 @@ +--- +title: 'Deploy Nuxt on Amazon Web Services' +description: Static Hosting on AWS with S3 Amplify and CloudFront +menu: Amazon Web Services +target: Static +category: deployment +position: 101 +--- + +AWS stands for Amazon Web Services. +S3 is their static storage which can be configured for Static Site Hosting. CloudFront is their CDN (content delivery network) + +## AWS w/ the Amplify Console + +Hosting a **static generated** Nuxt app on AWS w/ the Amplify Console is powerful and cheap. + +First, push your Nuxt app to the Git provider of your choice. Then, visit the [Amplify Console](https://console.aws.amazon.com/amplify/home). Click the **GET STARTED** button under the **Deploy** header if you haven't used Amplify Hosting before, otherwise click the **Connect App** button. + +### From your existing code + +On the "From your existing code" page, select your Git provider and click **Continue**. + +### Add repository branch + +On the "Add repository branch" page, select your repository and the branch you want to deploy. Then, click **Next**. + +### Configure build settings + +On the "Configure build settings" page, click the `Edit` button under the "Build and test settings". Change the following: + +1. Set the **build** commands to `npm run generate`. +2. Set the `baseDirectory` location to be `dist`. + +The settings should look like this once you are done editing them: + +```yml +version: 1 +frontend: + phases: + preBuild: + commands: + - yarn install + build: + commands: + - npm run generate + artifacts: + # IMPORTANT - Please verify your build output directory + baseDirectory: dist + files: + - '**/*' + cache: + paths: + - node_modules/**/* +``` + +Then, click **Save** and **Next**. + +### Review + +On the review page, click **Save and deploy**. + +Then, your application will deploy. This may take a few minutes. + +Once `Provision`, `Build`, `Deploy`, and `Verify` are green, click on the URL that the Amplify Console provides to view your site. + +## AWS w/ S3 + CloudFront + +Hosting a **static generated** Nuxt app on AWS w/ S3 + CloudFront is powerful and cheap. + +> AWS is a death by 1000 paper cuts. If we missed a step, please submit a PR to update this document. + +### Overview + +We'll host super cheap with some AWS services. Briefly: + +- S3 + - cloud data "bucket" for our website files + - can be configured to host static websites +- CloudFront + - a CDN (content delivery network) + - offers free HTTPS certs + - Makes your site load faster + +We'll push the site like this: + +``` +Nuxt Generate -> Local folder -> AWS S3 Bucket -> AWS CloudFront CDN -> Browser + [ nuxt generate ] [ gulp deploy ] + [ deploy.sh ] +``` + +First, we'll generate the site with `nuxt generate`(<= v2.12). Then, we'll use [Gulp](https://gulpjs.com/) to publish the files to a S3 bucket and invalidate a CloudFront CDN. + +- [gulp](https://www.npmjs.com/package/gulp) +- [gulp-awspublish](https://www.npmjs.com/package/gulp-awspublish) +- [gulp-cloudfront-invalidate-aws-publish](https://www.npmjs.com/package/gulp-cloudfront-invalidate-aws-publish) +- [concurrent-transform](https://www.npmjs.com/package/concurrent-transform) (for parallel uploads) + +Our deploy script needs these environment variables set: + +- AWS_BUCKET_NAME="example.com" +- AWS_CLOUDFRONT="UPPERCASE" +- AWS_ACCESS_KEY_ID="key" +- AWS_SECRET_ACCESS_KEY="secret" + +We'll have these files: + +``` +deploy.sh - run `nuxt generate` and `gulp deploy` +gulpfile.js - `gulp deploy` code to push files to S3 and invalidate CloudFront +``` + +### Setting it up + +1. Make a S3 bucket and configure it for static site hosting +2. Create a CloudFront distribution +3. Configure security access +4. Setup build script in your project + +### AWS: Setup your S3 bucket and CloudFront Distribution + +Please follow this [tutorial to setup your S3 and CloudFront](https://reidweb.com/2017/02/06/cloudfront-cdn-tutorial/) for step one and two. + +You should now have this data: + +- AWS_BUCKET_NAME="example.com" +- AWS_CLOUDFRONT="UPPERCASE" + +### AWS: Configure security access + +For step 3, we need to create a user that can: + +- Update the bucket contents +- Invalidate the CloudFront distribution (propagates changes to users faster) + +[Create a programmatic user with this policy](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html): + +> NOTE: replace 2x `example.com` with your S3 bucket name below. This policy allows pushing to the specified bucket, and invalidating any CloudFront distribution. + +```json +{ + "Version": "2012-10-17", + "Statement": [ + { + "Effect": "Allow", + "Action": ["s3:ListBucket"], + "Resource": ["arn:aws:s3:::example.com"] + }, + { + "Effect": "Allow", + "Action": [ + "s3:PutObject", + "s3:PutObjectAcl", + "s3:GetObject", + "s3:GetObjectAcl", + "s3:DeleteObject", + "s3:ListMultipartUploadParts", + "s3:AbortMultipartUpload" + ], + "Resource": ["arn:aws:s3:::example.com/*"] + }, + { + "Effect": "Allow", + "Action": [ + "cloudfront:CreateInvalidation", + "cloudfront:GetInvalidation", + "cloudfront:ListInvalidations", + "cloudfront:UnknownOperation" + ], + "Resource": "*" + } + ] +} +``` + +Then [get an access key and secret](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html). + +You should now have this data: + +- AWS_ACCESS_KEY_ID="key" +- AWS_SECRET_ACCESS_KEY="secret" + +### Laptop: Setup your project's build script + +4.1) Create a `deploy.sh` script. See optional [nvm (node version manager)](https://github.com/creationix/nvm). + +```bash +#!/bin/bash + +export AWS_ACCESS_KEY_ID="key" +export AWS_SECRET_ACCESS_KEY="secret" +export AWS_BUCKET_NAME="example.com" +export AWS_CLOUDFRONT="UPPERCASE" + +# Load nvm (node version manager), install node (version in .nvmrc), and npm install packages +[ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use +# Npm install if not already. +[ ! -d "node_modules" ] && npm install + +npm run generate +gulp deploy +``` + +4.2) Make `deploy.sh` runnable and DON'T CHECK INTO GIT (deploy.sh has secrets in it) + +```bash +chmod +x deploy.sh +echo " +# Don't commit build files +node_modules +dist +.nuxt +.awspublish +deploy.sh +" >> .gitignore +``` + +4.3) Add Gulp to your project and to your command line + +```bash +npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform +npm install -g gulp +``` + +4.4) Create a `gulpfile.js` with the build script + +```javascript +const gulp = require('gulp') +const awspublish = require('gulp-awspublish') +const cloudfront = require('gulp-cloudfront-invalidate-aws-publish') +const parallelize = require('concurrent-transform') + +// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html + +const config = { + // Required + params: { + Bucket: process.env.AWS_BUCKET_NAME + }, + credentials: { + accessKeyId: process.env.AWS_ACCESS_KEY_ID, + secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, + signatureVersion: 'v3' + }, + + // Optional + deleteOldVersions: false, // NOT FOR PRODUCTION + distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID + region: process.env.AWS_DEFAULT_REGION, + headers: { + /* 'Cache-Control': 'max-age=315360000, no-transform, public', */ + }, + + // Sensible Defaults - gitignore these Files and Dirs + distDir: 'dist', + indexRootPath: true, + cacheFileName: '.awspublish', + concurrentUploads: 10, + wait: true // wait for CloudFront invalidation to complete (about 30-60 seconds) +} + +gulp.task('deploy', function () { + // create a new publisher using S3 options + // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property + const publisher = awspublish.create(config) + + let g = gulp.src('./' + config.distDir + '/**') + // publisher will add Content-Length, Content-Type and headers specified above + // If not specified it will set x-amz-acl to public-read by default + g = g.pipe( + parallelize(publisher.publish(config.headers), config.concurrentUploads) + ) + + // Invalidate CDN + if (config.distribution) { + console.log('Configured with CloudFront distribution') + g = g.pipe(cloudfront(config)) + } else { + console.log( + 'No CloudFront distribution configured - skipping CDN invalidation' + ) + } + + // Delete removed files + if (config.deleteOldVersions) { + g = g.pipe(publisher.sync()) + } + // create a cache file to speed up consecutive uploads + g = g.pipe(publisher.cache()) + // print upload updates to console + g = g.pipe(awspublish.reporter()) + return g +}) +``` + +4.5) Deploy and debug + +Run it: + +```bash +./deploy.sh +``` + +You should get an output similar to this: + +```bash +$ ./deploy.sh + +Found '/home/michael/scm/example.com/www/.nvmrc' with version <8> +Now using node v8.11.2 (npm v5.6.0) + +> example.com@1.0.0 generate /home/michael/scm/example.com/www +> nuxt generate + + nuxt:generate Generating... +0ms + nuxt:build App root: /home/michael/scm/example.com/www +0ms + nuxt:build Generating /home/michael/scm/example.com/www/.nuxt files... +0ms + nuxt:build Generating files... +36ms + nuxt:build Generating routes... +10ms + nuxt:build Building files... +24ms + ████████████████████ 100% + +Build completed in 7.009s + + + + DONE Compiled successfully in 7013ms 21:25:22 + +Hash: 421d017116d2d95dd1e3 +Version: webpack 3.12.0 +Time: 7013ms + Asset Size Chunks Chunk Names + pages/index.ef923f795c1cecc9a444.js 10.6 kB 0 [emitted] pages/index + layouts/default.87a49937c330bdd31953.js 2.69 kB 1 [emitted] layouts/default +pages/our-values.f60c731d5c3081769fd9.js 3.03 kB 2 [emitted] pages/our-values + pages/join-us.835077c4e6b55ed1bba4.js 1.3 kB 3 [emitted] pages/join-us + pages/how.75f8cb5bc24e38bca3b3.js 2.59 kB 4 [emitted] pages/how + app.6dbffe6ac4383bd30a92.js 202 kB 5 [emitted] app + vendor.134043c361c9ad199c6d.js 6.31 kB 6 [emitted] vendor + manifest.421d017116d2d95dd1e3.js 1.59 kB 7 [emitted] manifest + + 3 hidden assets +Hash: 9fd206f4b4e571e9571f +Version: webpack 3.12.0 +Time: 2239ms + Asset Size Chunks Chunk Names +server-bundle.json 306 kB [emitted] + nuxt: Call generate:distRemoved hooks (1) +0ms + nuxt:generate Destination folder cleaned +10s + nuxt: Call generate:distCopied hooks (1) +8ms + nuxt:generate Static & build files copied +7ms + nuxt:render Rendering url /our-values +0ms + nuxt:render Rendering url /how +67ms + nuxt:render Rendering url /join-us +1ms + nuxt:render Rendering url / +0ms + nuxt: Call generate:page hooks (1) +913ms + nuxt: Call generate:page hooks (1) +205ms + nuxt: Call generate:page hooks (1) +329ms + nuxt: Call generate:page hooks (1) +361ms + nuxt:generate Generate file: /our-values/index.html +2s + nuxt:generate Generate file: /how/index.html +0ms + nuxt:generate Generate file: /join-us/index.html +0ms + nuxt:generate Generate file: /index.html +0ms + nuxt:render Rendering url / +2s + nuxt: Call generate:done hooks (1) +4ms + nuxt:generate HTML Files generated in 11.8s +5ms + nuxt:generate Generate done +0ms +[21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js +[21:25:27] Starting 'deploy'... +Configured with CloudFront distribution +[21:25:27] [cache] README.md +[21:25:27] [cache] android-chrome-192x192.png +[21:25:27] [cache] android-chrome-512x512.png +[21:25:27] [cache] apple-touch-icon.png +[21:25:27] [cache] browserconfig.xml +[21:25:27] [cache] favicon-16x16.png +[21:25:27] [cache] favicon-32x32.png +[21:25:27] [cache] favicon.ico +[21:25:27] [cache] favicon.svg +[21:25:27] [cache] logo-branches.svg +[21:25:27] [cache] logo-small.svg +[21:25:27] [cache] logo.svg +[21:25:27] [cache] mstile-150x150.png +[21:25:27] [cache] og-image.jpg +[21:25:27] [cache] safari-pinned-tab.svg +[21:25:27] [cache] site.webmanifest +[21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js +[21:25:29] [update] 200.html +[21:25:30] [create] videos/flag.jpg +[21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js +[21:25:34] [create] videos/flag.mp4 +[21:25:34] [cache] _nuxt/pages/how.75f8cb5bc24e38bca3b3.js +[21:25:34] [cache] _nuxt/pages/join-us.835077c4e6b55ed1bba4.js +[21:25:34] [cache] _nuxt/pages/our-values.f60c731d5c3081769fd9.js +[21:25:36] [update] our-values/index.html +[21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js +[21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js +[21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js +[21:25:38] [update] join-us/index.html +[21:25:38] [update] how/index.html +[21:25:43] [create] videos/flag.webm +[21:25:43] [update] index.html +[21:25:43] CloudFront invalidation created: I16NXXXXX4JDOA +[21:26:09] Finished 'deploy' after 42 s +``` + +Note that the `CloudFront invalidation created: XXXX` is the only output from the CloudFront invalidation npm package. If you don't see that, it's not working. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/21.surge.md b/nuxtjs.org/content/fr/0.docs/8.deployment/21.surge.md new file mode 100644 index 000000000..afb9572c9 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/21.surge.md @@ -0,0 +1,40 @@ +--- +title: Deploy Nuxt with Surge +description: How to deploy Nuxt.js app with Surge? +menu: Surge +target: Static +category: deployment +position: 115 +--- + +Nuxt.js gives you the possibility to host your web application on any static hosting like [Surge](https://surge.sh/) for example. + +To deploy on Surge, first install it on your computer: + +```bash +npm install -g surge +``` + +Then, we tell Nuxt.js to generate our web application: + +```bash +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on a static hosting. + +We can then deploy it to Surge: + +```bash +surge dist/ +``` + +Done :) + +If you have a project with [dynamic routes](/docs/2.x/directory-structure/pages#dynamic-pages), take a look at the [`generate` configuration](/docs/2.x/configuration-glossary/configuration-generate) to tell Nuxt.js how to generate these dynamic routes if you are using Nuxt <= v2.12. + +<div class="Alert"> + +When generating your web application with `nuxt generate`, [the context](/docs/2.x/internals-glossary/context) given to [asyncData](/docs/2.x/features/data-fetching) will not have `req` and `res`. + +</div> diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/22.vercel.md b/nuxtjs.org/content/fr/0.docs/8.deployment/22.vercel.md new file mode 100644 index 000000000..0b92e2c21 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/22.vercel.md @@ -0,0 +1,67 @@ +--- +title: Déployer Nuxt avec Vercel +description: Comment déployer une application Nuxt avec Vercel? +menu: Vercel +target: Static & Server +category: deployment +position: 116 +--- + +![nuxt-vercel-builder](https://user-images.githubusercontent.com/904724/61308402-7a752d00-a7f0-11e9-9502-23731ccd00fd.png) + +## Static avec Vercel + +Si vous souhaitez déployer un site statique sur Vercel, aucune configuration n'est nécessaire. Vercel détectera que vous utilisez Nuxt et activera les bons paramètres pour votre déploiement. Pour plus d'informations, consultez [ce guide Vercel](https://vercel.com/guides/deploying-nuxtjs-with-vercel). + +## SSR avec Vercel + +Pour déployer un runtime Nuxt sans serveur avec [Vercel](https://vercel.com), l'équipe et les contributeurs Nuxt.js ont produit un [@nuxtjs/vercel-builder](https://github.com/nuxt/vercel-builder) package. + +Vous n'avez qu'à configurer le fichier `vercel.json`: + +```json +{ + "builds": [ + { + "src": "nuxt.config.js", + "use": "@nuxtjs/vercel-builder", + "config": {} + } + ] +} +``` + +Consultez [la documentation](https://github.com/nuxt/vercel-builder) pour plus d'informations. + +### Service Worker avec Nuxt PWA Module + +Pour éviter une 404 avec le Service Workers, assurez-vous d'inclure `sw` dans vos paramètres de routes. + +```json +{ + "version": 2, + "builds": [ + { + "src": "nuxt.config.js", + "use": "@nuxtjs/vercel-builder", + "config": { + "serverFiles": ["package.json"] + } + } + ], + "routes": [ + { "src": "/_nuxt/.+", "headers": { "Cache-Control": "max-age=31557600" } }, + { + "src": "/sw.js", + "dest": "/_nuxt/static/sw.js", + "headers": { + "cache-control": "public, max-age=43200, immutable", + "Service-Worker-Allowed": "/" + } + }, + { "src": "/(.*)", "dest": "/" } + ] +} +``` + +Vous pouvez en savoir plus et voir des exemples sur https://github.com/nuxt/vercel-builder diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/23.cloudflare.md b/nuxtjs.org/content/fr/0.docs/8.deployment/23.cloudflare.md new file mode 100644 index 000000000..11e9b458e --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/23.cloudflare.md @@ -0,0 +1,19 @@ +--- +title: Using Nuxt with Cloudflare +description: What needs to be considered when using Nuxt with Cloudflare +menu: Cloudflare +category: deployment +position: 204.5 +--- + +In most cases, Nuxt can work with third party content that is not generated or created by Nuxt itself. But sometimes such content can cause problems, especially Cloudflare's "Minification and Security Options". + +Accordingly, you should make sure that the following options are unchecked / disabled in Cloudflare. Otherwise, unnecessary re-rendering or hydration errors could impact your production application. + +1. Speed > Optimization > Auto Minify: **Uncheck** JavaScript, CSS and HTML +2. Speed > Optimization > **Disable** "Rocket Loader™" +3. Speed > Optimization > **Disable** "Mirage" +4. Scrape Shield > **Disable** "Email Address Obfuscation" +5. Scrape Shield > **Disable** "Server-side Excludes" + +With these settings, you can be sure that Cloudflare won't inject scripts into your Nuxt application that may cause unwanted side effects. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/3.azure-portal.md b/nuxtjs.org/content/fr/0.docs/8.deployment/3.azure-portal.md new file mode 100644 index 000000000..4721ff302 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/3.azure-portal.md @@ -0,0 +1,150 @@ +--- +title: Deploy Nuxt on Azure Portal +description: How to deploy a Nuxt.js application on Azure Portal? +menu: Azure Portal +target: Server +category: deployment +position: 102 +--- + +## Requirements + +- It is required that you select a backend when setting up the project. Even if you don't need it, or else the site won't start up. +- The server is running Node 8 or greater + +## What if I already have a project without an backend? + +No worries. It is easy to add an express server to an existing project. + +Create a new folder called `server` in the root of the project. Then create an `index.js` file inside the `server` folder and paste the following inside the `index.js`: + +``` +const express = require('express') +const consola = require('consola') +const { loadNuxt } = require('nuxt-start') +const app = express() + +async function start () { + const nuxt = await loadNuxt(isDev ? 'dev' : 'start') + await nuxt.listen(process.env.PORT, process.env.HOST) +} + +start() + +``` + +Then edit your nuxt.config.js: + +Before: + +``` +import pkg from './package' + +export default { +... config +} +``` + +After: + +``` +module.exports = { +... config +} + +``` + +**Remember to remove the references to the pkg object inside the config.** + +That's it! + +For an Azure App Service deployment, make sure you set the following two environment variables (application settings) in App Service › Settings › Configuration › Application settings. + +``` +HOST: '0.0.0.0' +NODE_ENV: 'production' +``` + +## How to set Node version on Web App in DevOps + +You can set the Node version on the server, via the App setting inside the "Deploy Azure Web Service" task in the release pipeline + +Add this to the App settings field under "Application and Configuration Settings" + +``` +-WEBSITE_NODE_DEFAULT_VERSION 10.16.3 +``` + +It's recommended to use the LTS version. + +## Artifacts + +If you are using Azure DevOps and let the build pipeline do its work you and want to store artifacts. Files which are prefixed with a `.` must be moved to the artifact folder explicitly. Then you can create an Artifact Archive and download it afterwards in your Release Deployment. + +## Running the webserver + +For Azure Portal you will need a `web.config` file. If not supplied, it will create one itself. This one **won't work for Nuxt** though. Add a web.config file to your repository. For the latest version of `Nuxt` the server file is located at `server/index.js`. In the web.config you don't specify the exact path `server/index.js` but just `server`. See the example web.config below. If you don't do this the logs will tell you that Vue cannot find any routes. + +```xml +<?xml version="1.0" encoding="utf-8"?> +<!-- + This configuration file is required if iisnode is used to run node processes behind + IIS or IIS Express. For more information, visit: + + https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config +--> + +<configuration> + <system.webServer> + <!-- Visit https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ for more information on WebSocket support --> + <webSocket enabled="false" /> + <handlers> + <!-- Indicates that the server.js file is a Node.js site to be handled by the iisnode module --> + <add name="iisnode" path="server" verb="*" modules="iisnode"/> + </handlers> + <rewrite> + <rules> + <!-- Do not interfere with requests for node-inspector debugging --> + <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true"> + <match url="^server\/debug[\/]?" /> + </rule> + + <!-- First we consider whether the incoming URL matches a physical file in the /public folder --> + <rule name="StaticContent"> + <action type="Rewrite" url="public{REQUEST_URI}"/> + </rule> + + <!-- All other URLs are mapped to the Node.js site entry point --> + <rule name="DynamicContent"> + <conditions> + <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/> + </conditions> + <action type="Rewrite" url="server"/> + </rule> + </rules> + </rewrite> + + <!-- 'bin' directory has no special meaning in Node.js and apps can be placed in it --> + <security> + <requestFiltering> + <hiddenSegments> + <remove segment="bin"/> + </hiddenSegments> + </requestFiltering> + </security> + + <!-- Make sure error responses are left untouched --> + <httpErrors existingResponse="PassThrough" /> + + <!-- + You can control how Node is hosted within IIS using the following options: + * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server + * node_env: will be propagated to node as NODE_ENV environment variable + * debuggingEnabled - controls whether the built-in debugger is enabled + + See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options + --> + <!--<iisnode watchedFiles="web.config;*.js"/>--> + </system.webServer> +</configuration> +``` diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/4.azure-static-web-apps.md b/nuxtjs.org/content/fr/0.docs/8.deployment/4.azure-static-web-apps.md new file mode 100644 index 000000000..497c72137 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/4.azure-static-web-apps.md @@ -0,0 +1,114 @@ +--- +title: Deploy on Azure Static Web Apps +description: How to deploy a Nuxt.js application on Azure Static Web Apps? +menu: Azure Static Web Apps +target: Static +category: deployment +position: 103 +--- + +You can now deploy your static sites to Azure using Azure static web apps. You will need to have your app in GitHub as Azure static web apps leverages GitHub actions which allow you to re-build your static site on every git push. + +There are 2 things you need to configure in order to deploy your app to Azure static web apps. The first one is to modify the build command as Azure reads the build command from your package.json and for static sites we need to use the generate command. + +`package.json` + +```json +build: "nuxt generate" +``` + +The second one is to add a routes.json file which is important for catching custom 404 pages and spa fallback pages. + +`static/routes.json` + +```jsx +{ + "routes": [], + "platformErrorOverrides": [ + { + "errorType": "NotFound", + "serve": "/200.html", + "statusCode": 200 + } + ] +} +``` + +If you want to test out deploying to Azure static web apps, we have created a small demo application that is all setup and configured. You will just need to clone it and add it to your GitHub repo. You can then follow the steps on - Deploying your app with Azure Static Web Apps. + +[Clone the demo app](https://github.com/debs-obrien/nuxtjs-azure-static-app) + +## Deploying your app with Azure Static Web Apps + +### Step 1: **Create Azure static web apps** + +1. Navigate to the [Azure Portal](https://portal.azure.com/). +2. Click **Create a Resource** then search for **Static App** and select it. +3. Select a subscription from the *Subscription* drop-down list or use the default one. +4. Click the **New** link below the *Resource group* dropdown. In *New resource group name*, type **nuxt** and click **OK** +5. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. The app name is used to identify the app in your list of resources therefore it is a good idea to name your app using the name of your repository. +6. In the *Region* dropdown, choose a region closest to you. + +![Azure Portal resource and app setup](https://user-images.githubusercontent.com/13063165/82118135-71891b00-9775-11ea-8284-aa94d17a3bc3.png) + +### Step 2: **Add a GitHub repository** + +Azure App Service Static App needs access to the repository where your Nuxt.js app lives so it can automatically deploy commits: + +1. Click the **Sign in with GitHub button** +2. Select the **Organization** under which you created the repo for your Nuxt.js project. It can also be your GitHub username. +3. Find the name of the repository you created earlier and select it. +4. Choose **master** as the branch from the *Branch* dropdown. + +![how to add github](https://user-images.githubusercontent.com/13063165/82118359-38ea4100-9777-11ea-9c5e-7ba5c4da708e.png) + +### Step 3: **Configure the build process** + +There are few things that Azure App Service Static App can assume - things like automatically installing npm modules and running `npm run build`. There are also few you have to be explicit about, like what folder will the static app be copied to after build so the static site can be served from there. + +1. Click on the **Build** tab to configure the static output folder. +2. Type **dist** in the *App artifact location* text box. + +![Azure portal configure build](https://user-images.githubusercontent.com/13063165/82118277-71d5e600-9776-11ea-88ad-48cf0793905d.png) + +### Step 4: **Review and create** + +1. Click the **Review + Create** button to verify the details are all correct. +2. Click **Create** to start the creation of the resource and also provision a GitHub Action for deployment. +3. Once the deployment is completed, click **Go to resource** + +![azure portal deployment complete message](https://user-images.githubusercontent.com/13063165/82118390-67681c00-9777-11ea-9778-671dc768393e.png) + +4. On the resource screen, click the *URL* link to open your deployed application. + +![resource screen with url to your deployed app](https://user-images.githubusercontent.com/13063165/82118042-d001c980-9774-11ea-94f5-57d995aa5391.png) + +Congrats your static site is now hosted on Azure static web apps. + +## Rebuild your static app and monitoring deployment + +Now all you have to do is modify your code and push your changes. Pushing your changes will activate a GitHub action and your new site will automatically rebuild. You can monitor the workflow by clicking on the actions tab in your GitHub repo and you can inspect even further by selecting the last commit you made. You can then watch to see when the deploy is finished or inspect the log if you have any deployment errors. + +![GitHub actions screen](https://user-images.githubusercontent.com/13063165/82118249-34715880-9776-11ea-92e2-dbd21bbf7cb6.png) + +## Did you know? + +### **How to handle dynamic routes** + +If you are working with dynamic pages such as \_id.vue then you you will need to add these routes to the generate property in your nuxt config. + +[See the documentation on how to handle dynamic routes.](/docs/2.x/configuration-glossary/configuration-generate#routes) + +<div class="Alert"> +If you are using Nuxt 2.13+ then you won't have to worry about this as there is a built in crawler which will crawl all dynamics by crawling the links in your site. +</div> + +### How to add an error page + +In order to not have the default 404 page you can create an `error.vue` file in your layouts folder. + +### How to add SPA fallback + +If you would like some pages to not be generated but act as a single page application you can do so using the generate.excludes property in your nuxt.config file. + +[See the documentation on spa fallback](/docs/2.x/configuration-glossary/configuration-generate#exclude) diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/5.bip.md b/nuxtjs.org/content/fr/0.docs/8.deployment/5.bip.md new file mode 100644 index 000000000..ad0d76817 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/5.bip.md @@ -0,0 +1,53 @@ +--- +title: Deploy Nuxt with Bip +description: How to deploy a Nuxt app with Bip? +menu: Bip +target: Static +category: deployment +position: 104 +--- + +[Bip](https://bip.sh) is a commercial hosting service which provides zero downtime deployment, a global CDN, SSL, unlimited bandwidth and more for Nuxt static websites. Plans are available on a pay as you go, per domain basis. + +The following guide will show you how to deploy your Nuxt static site to Bip in just a couple simple steps. + +## Prerequisites + +- You have [Yarn](https://yarnpkg.com/getting-started/install) installed. +- You have the Bip CLI installed, along with a Bip account and domain ready to use. Visit the [Bip Get Started guide](https://bip.sh/getstarted) for further instructions. + +## Step 1: Initial setup + +You'll first need a Nuxt project ready to deploy and share with the world. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app): + +Use Yarn to create your new project: + +```bash +yarn create nuxt-app <project-name> +``` + +Follow the prompts to setup your Nuxt project. Ensure that when you reach the 'Deployment target' setting, select 'Static (Static/JAMstack hosting)'. + +Once complete, move into your new directory: + +```bash +cd <project-name> +``` + +Next, you'll need to initialize your project with Bip. This only needs to be done once. + +```bash +bip init +``` + +Follow the prompts, where you'll be asked which domain you'd like to deploy to. Bip will detect that you're using Nuxt, and set project settings like the source file directory automatically. + +## Step 2: Deploy + +You're now ready to deploy your website. To do so, run: + +```bash +yarn generate && bip deploy +``` + +That's it! After a few moments, your website will be deployed. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/6.cleavr.md b/nuxtjs.org/content/fr/0.docs/8.deployment/6.cleavr.md new file mode 100644 index 000000000..e08c1b91c --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/6.cleavr.md @@ -0,0 +1,46 @@ +--- +title: Deploy Nuxt with Cleavr +description: How to deploy a Nuxt app with Cleavr? +menu: Cleavr +target: Static & Server +category: deployment +position: 104.1 +--- + +[Cleavr](https://cleavr.io) is a server management console that integrates with multiple VPS (cloud hosting) providers and helps you configure servers to host your Nuxt apps as well as deploys your Nuxt apps in just a couple of clicks. + +Cleavr includes the following features: + +- Provision and configure servers ready to run Nuxt SSR and Static applications +- Secure servers and provides free SSL certs +- Deploy code from GitHub, GitLab, and Bitbucket repositories with zero-downtime +- Auto-installs and configures PM2 (with cluster mode enabled) for Nuxt SSR apps +- GitHub Actions integration to build app with no additional configuration required + +## Prerequisites + +- Your Cleavr account is connected to your VPS and version control (e.g. GitHub, GitLab, Bitbucket) providers +- You have a Nuxt SSR or Static project ready to deploy +- You have an existing provisioned server + +## Step 1: Initial setup + +You can use Flash Deploy to provision / configure a new server and deploy your app in one fell swoop, or you can use the traditional method of adding a new Nuxt app to an existing server. These setup instructions will describe adding a new app to an existing server. + +In Cleavr, navigate to the server to add the new app to and select **Add Site**. + +Select either Nuxt SSR or Nuxt Static web app type depending on which target you intend to deploy. Fill out the remaining website info and click **Add**. + +This will add the site to your server and configure the server with any missing environment dependencies. + +Once the site has been successfully added, go to the Web App section and click **Complete Setup** for the web app that was added. + +Fill in your version control provider, repository, and branch to deploy fields and then click **Update**. + +## Step 2: Deploy + +You're now ready to deploy your web app. + +On the web app's deployment page, click **Deploy**. + +The deployment process will begin and complete in a few moments. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/7.do-app-platform.md b/nuxtjs.org/content/fr/0.docs/8.deployment/7.do-app-platform.md new file mode 100644 index 000000000..2f7b4e21f --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/7.do-app-platform.md @@ -0,0 +1,50 @@ +--- +title: Deploy Nuxt on DigitalOcean App Platform +description: How to deploy Nuxt.js on DigitalOcean App Platform? +menu: DO App Platform +target: Static & Server +category: deployment +position: 104.2 +--- + +[DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform/) allows you to build, deploy, and scale apps quickly using a simple, fully managed solution. They’ll handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks. + +App Platform includes the following features: + +- Build, deploy, manage, and scale apps. +- Secure apps automatically. They create, manage and renew your SSL certificates and also protect your apps from DDoS attacks. +- Support for Node.js, static sites, Python, Django, Go, PHP, Laravel, React, Ruby, Ruby on Rails, Gatsby, Hugo, container images. +- Deploy code directly from your GitHub and GitLab repositories. Automatically re-deploy the app when you push updates to your source code. +- Zero infrastructure management. App Platform uses open, cloud native standards and automatically analyzes your code, creates containers, and runs them on Kubernetes clusters. +- Highly scalable. Scale horizontally or vertically. + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started. + +## Setup + +1. Link your repository: Create a new account on DigitalOcean and connect your GitHub or Gitlab account. Then select the repository you want to deploy. +2. Choose a branch of your repo and a region to deploy your site. +3. Choose the service that suits your website. + + | Type | Settings | + | ---------- | ---------------------------------------------------------------------- | + | **Server** | Web service - Build command `yarn build` & Run command `yarn start` | + | **Static** | Static Sites - Build command `yarn generate` & Output directory `dist` | + +4. If you have any environment variable, add them manually in the key-value pair inputs. + +Once you pass the process, you hit deploy and your site will be live on an autogenerated url as soon as the build is done. + +## Continuous deployment (CD) + +Now that App Platform is connected to your repo, it will automatically build and publish your site any time you push a new change. + +## Add custom domains + +Add your own domains to your site easily on Settings > Domains > Add domain or follow this [How to Manage Domains in App Platform](https://www.digitalocean.com/docs/app-platform/how-to/manage-domains/) guide. + +## Deploy to DigitalOcean button + +The Deploy to DigitalOcean Button allows users to launch an application onto App Platform. It can be embedded in the README file for GitHub repositories, allowing users who are browsing your repository to deploy your code in one click, adding a .yaml file into your repo. Check it out at [How to Add a "Deploy to DigitalOcean" Button to Your Repository](https://www.digitalocean.com/docs/app-platform/how-to/add-deploy-do-button/) diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/8.dokku.md b/nuxtjs.org/content/fr/0.docs/8.deployment/8.dokku.md new file mode 100644 index 000000000..b57c0d5bc --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/8.dokku.md @@ -0,0 +1,60 @@ +--- +title: Deploy Nuxt on Dokku +description: How to deploy a Nuxt.js application on Dokku? +menu: Dokku +target: Server +category: deployment +position: 105 +--- + +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/). + +For the example, we will call our Nuxt.js application `my-nuxt-app`. + +We need to tell Dokku to install the `devDependencies` of the project (to be able to launch `npm run build`): + +```bash +// on Dokku Server +dokku config:set my-nuxt-app NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false +``` + +Also, we want our application to listen on the host `0.0.0.0` and run in production mode: + +```bash +// on Dokku Server +dokku config:set my-nuxt-app HOST=0.0.0.0 NODE_ENV=production +``` + +You should see these 3 lines when you type `dokku config my-nuxt-app` + +![nuxt config vars Dokku](https://i.imgur.com/9FNsaoQ.png) + +Then, we tell Dokku to launch `npm run build` via the `scripts.dokku.predeploy` script in our project `app.json`: + +`create a file name app.json in our project root folder` + +```js +{ + "scripts": { + "dokku": { + "predeploy": "npm run build" + } + } +} +``` + +To launch the application we run `npm run start` using the [Procfile](http://dokku.viewdocs.io/dokku/deployment/methods/dockerfiles/#procfiles-and-multiple-processes): + +``` +web: npm run start +``` + +Finally, we can push our app on Dokku with: + +```bash +// commit your change before push. +git remote add dokku dokku@yourServer:my-nuxt-app +git push dokku master +``` + +Voilà! Our Nuxt.js application is now hosted on Dokku! diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/9.github-pages.md b/nuxtjs.org/content/fr/0.docs/8.deployment/9.github-pages.md new file mode 100644 index 000000000..404b2a165 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/9.github-pages.md @@ -0,0 +1,274 @@ +--- +title: Deploy Nuxt on GitHub Pages +description: How to deploy Nuxt.js app on GitHub Pages? +menu: GitHub +target: Static +category: deployment +position: 106 +--- + +Nuxt.js gives you the possibility to host your web application on any static hosting like [GitHub Pages](https://pages.github.com/) for example. + +To deploy on GitHub Pages, you need to generate your static web application: + +```bash +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting. Branch `gh-pages` for project repository OR branch `master` for user or organization site + +<div 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](/docs/2.x/directory-structure/static) about it. + +</div> + +## Deploying to GitHub Pages for repository + +First of all, you want to make sure to use [static target](/docs/2.x/features/deployment-targets) since we are hosting on GitHub pages: + +```js[nuxt.config.js] +export default { + target: 'static' +} +``` + +If you are creating GitHub Pages for one specific repository, and you don't have any custom domain, the URL of the page will be in this format: `http://<username>.github.io/<repository-name>`. + +If you deployed `dist` folder without adding [router base](/docs/2.x/configuration-glossary/configuration-router), when you visit the deployed site you will find that the site is not working due to missing assets. This is because we assume that the website root will be `/`, but in this case it is `/<repository-name>`. + +To fix the issue we need to add [router base](/docs/2.x/configuration-glossary/configuration-router#base) configuration in `nuxt.config.js`: + +```js[nuxt.config.js] +export default { + target: 'static', + router: { + base: '/<repository-name>/' + } +} +``` + +This way, all generated path asset will be prefixed with `/<repository-name>/`, and the next time you deploy the code to repository GitHub Pages, the site should be working properly. + +## Command line deployment + +You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): + +First install it via npm: + +```bash +npm install push-dir --save-dev +``` + +Add a `deploy` command to your `package.json` with the branch as `gh-pages` for project repository OR `master` for user or organization site. + +```js +"scripts": { + "dev": "nuxt", + "generate": "nuxt generate", + "start": "nuxt start", + "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" +}, +``` + +Then generate and deploy your static application: + +```bash +npm run generate +npm run deploy +``` + +## Build server deployment + +You can take deployment one step further and rather than having to manually compile and deploy the files from your local install, you can make use of a build server to monitor your GitHub repository for new commits and then checkout, compile and deploy everything for you automatically. + +Before you configure the build server, you'll first need to [generate a GitHub personal access token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/#creating-a-token) in order to grant the build server permission to perform tasks on your behalf. Once you have created your token, keep a copy of it safe ready to use a little later on. + +### GitHub Actions + +To deploy via [GitHub Actions](https://github.com/features/actions), the official tool for software automation with GitHub, if you don't have a workflow you need to create a new one or append a new step to your existing workflow. + +It uses the [GitHub Pages Action](https://github.com/marketplace/actions/github-pages-action) which pushes the generated files from the `dist` folder to your default GitHub Pages branch `gh-pages`. + +With an existing workflow, add the following step: + +```yaml +- name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist +``` + +With a new workflow, paste the following content into a new file called `cd.yml` in `.github/workflows` directory: + +```yaml +name: cd + +on: [push, pull_request] + +jobs: + cd: + runs-on: ${{ matrix.os }} + + strategy: + matrix: + os: [ubuntu-latest] + node: [14] + + steps: + - name: Checkout + uses: actions/checkout@master + + - name: Setup node env + uses: actions/setup-node@v2.1.2 + with: + node-version: ${{ matrix.node }} + + - name: Install dependencies + run: yarn + + - name: Generate + run: yarn run generate + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist +``` + +Then commit this to your repository: + +```bash +git add .github/workflows/cd.yml +git commit -m "Adding github pages deploy workflow" +git push origin +``` + +On completion, you'll see your `gh-pages` branch updated as well as your site. + +### Travis CI + +To deploy with [Travis CI](https://travis-ci.org/), a free for open source projects build server, sign in via your GitHub account, granting Travis access to view your repositories, and then enable the build server for your repository by toggling the switch next to your repositories name in the list displayed. + +![Travis Builder Server Enable](/github_pages_travis_01.png) + +Next, click the cog icon beside your repository name to configure the general settings of the build sever and enable the 'Build only if .travis.yml is present' feature by toggling the switch. + +![Travis Builder Server Settings](/github_pages_travis_02.png) + +On the same screen, scroll down to the Environment Variables section and create a new variables named `GITHUB_ACCESS_TOKEN` and in the value field paste a copy of the GitHub personal access token your created earlier and click the 'Add' button. + +![Travis Builder Server Environment Variables](/github_pages_travis_03.png) + +Finally, create a `.travis.yml` configuration file in the root of your repository with the following contents + +```yaml +language: node_js +node_js: + - '8' + +cache: + directories: + - 'node_modules' + +branches: + only: + - master + +install: + - npm install + - npm run generate + +script: + - echo "Skipping tests" + +deploy: + provider: pages + skip-cleanup: true + github-token: $GITHUB_ACCESS_TOKEN # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token + target-branch: gh-pages + local-dir: dist + on: + branch: master +``` + +and then commit this to your repository + +```bash +git add .travis.yml +git commit -m "Adding travis deploy configuration" +git push origin +``` + +Now, whenever you commit any changes to your repository, from within Travis, you'll see a new build start up + +![Travis Builder Server Output](/github_pages_travis_04.png) + +and on completion, you'll see your GitHub pages site automatically updated. + +### Appveyor + +To deploy via [Appveyor](https://www.appveyor.com), another free for open source projects build server, sign up for a new account choosing the GitHub authentication option to sign in using your GitHub account. + +Once signed in, click the 'New project' link and then click the 'Add' button beside your repository name in the list displayed to enable the build server on your repository. + +![Appveyor Builder Server Enable](/github_pages_appveyor_01.png) + +Next, in the root of your repository, create an `appveyor.yml` configuration file with the following contents + +```yaml +environment: + # Nuxt requires node v8 minimum + nodejs_version: '8' + # Encrypt sensitive data (https://ci.appveyor.com/tools/encrypt) + github_access_token: + secure: ENCRYPTED_GITHUB_ACCESS_TOKEN + github_email: + secure: ENCRYPTED_GITHUB_EMAIL + +# Only run on master branch +branches: + only: + - master + +# Install scripts. (runs after repo cloning) +install: + # switch nodejs version + - ps: Install-Product node $env:nodejs_version + # install modules + - npm install + # generate static files + - npm run generate + # configure global git credentials store (https://www.appveyor.com/docs/how-to/git-push/) + - git config --global credential.helper store + - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:github_access_token):x-oauth-basic@github.com`n" + - git config --global user.email $env:github_email + # deploy to GitHub pages + - npm run deploy + +# No tests to run +test: off + +# Don't actually build. +build: off +``` + +**_NB_** This configuration assumes you've configured your `package.json` file as per the [Command line deployment](#command-line-deployment) instructions + +Before you commit this file however, you'll need to change the `ENCRYPTED_GITHUB_ACCESS_TOKEN` and `ENCRYPTED_GITHUB_EMAIL` variables with your GitHub personal access token from earlier and your GitHub email address, encrypted using the [Appveyor encryption tool](https://ci.appveyor.com/tools/encrypt). + +Once updated, commit the file to your repository + +```bash +git add appveyor.yml +git commit -m "Adding appveyor deploy configuration" +git push origin +``` + +Now, whenever you commit any changes to your repository, from within Appveyor, you'll see a new build start up + +![Appveyor Builder Server Output](/github_pages_appveyor_02.png) + +and on completion, you'll see your GitHub pages site automatically updated. diff --git a/nuxtjs.org/content/fr/0.docs/8.deployment/index.md b/nuxtjs.org/content/fr/0.docs/8.deployment/index.md new file mode 100644 index 000000000..9a002b331 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/8.deployment/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/deployment/21yunbox +--- diff --git a/nuxtjs.org/content/fr/0.docs/index.md b/nuxtjs.org/content/fr/0.docs/index.md new file mode 100644 index 000000000..07853eae4 --- /dev/null +++ b/nuxtjs.org/content/fr/0.docs/index.md @@ -0,0 +1,3 @@ +--- +navigation.exclusive: true +--- \ No newline at end of file diff --git a/nuxtjs.org/i18n/en-US.js b/nuxtjs.org/i18n/en-US.js new file mode 100644 index 000000000..2d4728163 --- /dev/null +++ b/nuxtjs.org/i18n/en-US.js @@ -0,0 +1,361 @@ +import en from '~docus-i18n/en-US' + +export default { + ...en, + common: { + an_error_occurred: 'An error occurred', + page_not_found: 'Page not found', + please_define_title: 'Please define a title in the front matter', + please_define_description: 'Please define a description in the front matter', + search: 'Search ("/" to focus)', + version: 'Version' + }, + iso: 'en', + + links: { + download: 'Download', + live_edit: 'Live Edit' + }, + header: { + links: [ + { + name: 'Docs', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Examples', + icon: 'code', + slug: 'examples' + }, + { + name: 'Resources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Video Courses', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Search ("/" to focus)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - The Intuitive Vue Framework', + description: + 'Build your next Vue.js application with confidence using NuxtJS. An open source framework making web development simple and powerful.' + }, + welcome: { + title: 'The Intuitive {br} {frameworkType} Framework', + description: + 'Build your next Vue.js application with confidence using NuxtJS. An {openSource} framework making web development simple and powerful.', + openSource: 'open source', + get_started: 'get started', + get_updates: 'Get NuxtJS updates to your inbox each month', + video: 'Video produced by {company}, download their free {cheatSheet}', + cheatSheet: 'Nuxt Cheat Sheet.' + }, + why: { + title: 'Why {nuxt}', + try_nuxtjs_online: 'Try NuxtJS Online', + enjoyable: { + title: 'Enjoyable', + description: + 'Our main focus is the Developer Experience. We love Nuxt.js and continuously improve the framework so you love it too! {break} Expect appealing solutions, descriptive error messages, powerful defaults and detailed documentation. If questions or problems come up, our helpful community will help you out.' + }, + modular: { + title: 'Modular', + description: + "Nuxt is based on a powerful modular architecture. You can choose from more than 50 modules to make your development faster and easier. You don't have to reinvent the wheel to get PWA benefits, add Google Analytics to your page or generate a sitemap." + }, + performant: { + title: 'Performant', + description: + 'With Nuxt.js, your application will be optimized out of the box. We do our best to build performant applications by utilizing Vue.js and Node.js best practices. To squeeze every unnecessary bit out of your app Nuxt includes a bundle analyzer and lots of opportunities to fine-tune your app.' + } + }, + companies: { + title: "Who's using {nuxt}" + }, + modes: { + title: '{nuxt} rendering', + ssr: { + title: 'Server Side Rendered', + description: + 'The most popular mode for Nuxt. With SSR, also called "universal" or "isomorphic" mode, a Node.js server will be used to deliver HTML based on your Vue components to the client instead of the pure javascript. Using SSR will lead to a large SEO boost, better UX and more opportunities (compared to a traditional Vue SPA).{break}Because implementing SSR on your own can be really tedious, Nuxt.js gives you full support out of the box and will take care of common pitfalls.' + }, + ssg: { + title: 'Statically Generated', + description: + 'Static Site Generation is a very hot topic right now (aka JAMStack). Instead of switching to another framework and spending time to get used to it, why not kill two birds with one stone? {proverbial} Nuxt.js supports generating a static website based on your Vue application. It is the "best of both worlds" as you don\'t need a server but still have SEO benefits because Nuxt will pre-render all pages and include the necessary HTML. Also, you can deploy the resulting page easily to Netlify or GitHub pages.', + proverbial: 'only proverbial' + } + }, + sponsors: { + title: 'Sponsors', + description: + 'NuxtJS is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. If you run a business and are using Nuxt in a revenue-generating product, it makes business sense to sponsor Nuxt development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue/Nuxt community and makes it easier to attract Vue/Nuxt developers. If you are an individual user and have enjoyed the productivity of using Nuxt, consider donating as a sign of appreciation.', + become_a_sponsor: 'Become a sponsor' + }, + newsletter: { + title: '{nuxt} Newsletter', + description: 'Get the latest Nuxt news to your inbox, curated by the NuxtJS team.', + form: { + email: 'Email', + subscribing: 'Subscribing...', + subscribe: 'Subscribe', + subscribed_messages: { + pre: 'An email to confirm your subscription has been sent to', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS Design', + description: 'Download NuxtJS design resources (SVG, icons, emoji and favicon).' + }, + title: '{nuxt} Design', + description: + 'NuxtJS is an MIT licensed open source project and completely free to use. {break} You can freely use our logos as long as you mention NuxtJS and link to nuxtjs.org.', + other_download_message: 'You can also download our {favicon} or our {sketch} file.' + }, + resources: { + meta: { + title: 'NuxtJS Resources', + description: + 'Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.' + }, + title: '{nuxt} Resources', + description: + 'Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.', + themes: { + title: 'Themes' + }, + modules: { + title: 'Modules' + }, + examples: { + title: 'Examples' + }, + faq: { + title: 'FAQ' + }, + videos: { + title: 'Video Courses' + } + }, + shop: { + meta: { + title: 'The NuxtJS Shop', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community? Here our products with the best quality ever!' + }, + title: 'The {nuxt} Shop', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community?{break} Here our products with the best quality ever!', + button: 'Coming soon' + }, + team: { + meta: { + title: 'NuxtJS Team', + description: 'NuxtJS has a very active and engaged team that is constantly striving to push Nuxt forward.' + }, + title: '{nuxt} Team', + description: + 'The development of NuxtJS and its ecosystem is guided by an international team. We have a very active and engaged team that is constantly striving to push Nuxt forward.' + }, + themes: { + meta: { + title: 'NuxtJS Themes', + description: + 'With the themes below built by our partners from Creative Tim and Theme Forest you can see how a real world application is built, with Nuxt.js stack behind.' + }, + title: '{nuxt} Themes', + description: + 'With the themes below built by our partners from Creative Tim and Theme Forest you can see how a real world application is built, with Nuxt.js stack behind.', + button: 'GET IT for' + }, + 'video-courses': { + meta: { + title: 'NuxtJS Video Courses', + description: + 'With the video courses below created by our partner VueSchool you can discover and learn more about the Nuxt.js Framework.' + }, + title: '{nuxt} Video Courses', + description: 'With the video courses below you can discover and learn more about the Nuxt Framework.', + cta: { + discover: 'Discover Mastering Nuxt', + start: 'START COURSE' + } + }, + sponsor: { + meta: { + title: 'Sponsor NuxtJS Development', + description: + 'You can support NuxtJS development via different methods and ensure regular updates to the framework.' + }, + title: 'Sponsor {nuxt} Development', + description: + 'NuxtJS is an MIT licensed open source project and completely free to use.{break} However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.{break} You can support NuxtJS development via the following methods:', + donations: { + title: 'One-time donations', + description: 'We accept donations through these channels' + }, + pledges: { + title: 'Recurring Pledges', + description: + 'Recurring pledges come with exclusive perks, e.g. having your name listed in the NuxtJS GitHub repository, or have your company logo placed on this website. Become a nuxter or sponsor via {opencollective} (goes into a fund with transparent expense models supporting community efforts and events).' + }, + become_a_sponsor: 'Become a sponsor' + }, + support: { + meta: { + title: 'The NuxtJS Support', + description: 'Our NuxtJS team now offers official consulting services for your NuxtJS applications.' + }, + title: 'Consulting {nuxt} Support', + description: + 'Our {team} now offers official consulting services for your NuxtJS applications.{break} We offer different services depending of your needs, from technical support to custom development. Expect a reply within one business day, we can sign custom NDA and you can get a full refund if you are not satisfied with our service.', + technical: { + title: 'Technical support', + description: + 'Get project audits, app deployments, custom development and technical support from the NuxtJS team.', + start: 'Start chat', + partner: { + pre: 'We partnered with', + post: 'to offer these services so we can focus on helping you as fast as possible.' + } + }, + entreprise: { + title: 'for enterprise', + description: + 'NuxtJS and the maintainers of thousands of other packages are working with Tidelift to deliver one enterprise subscription that covers all of the open source you use.{break} If you want the flexibility of open source and the confidence of commercial-grade software, this is for you.', + partner: { + pre: 'Available as part of the', + post: 'subscription.' + }, + learn_more: 'Learn more', + request_a_demo: 'Request a demo' + } + }, + blog: { + meta: { + title: 'NuxtJS Blog', + description: 'Discover articles from the NuxtJS team and NuxtJS Community about NuxtJS, tips and tricks included!' + }, + title: '{nuxt} Blog', + description: 'Discover articles from the {nuxtTeam} and {nuxtCommunity} about NuxtJS, tips and tricks included!', + nuxt_team: 'NuxtJS Team', + nuxt_community: 'Nuxt.js Community', + contribute: 'Caught a mistake or want to contribute to this blog post?' + }, + guide: { + release_notes: 'Release Notes', + toc_title: 'On this page' + }, + quiz: { + title: 'Quiz' + }, + tryNewDocs: { + msg1: 'Want to take a look at our new docs? Our ', + link: 'new docs', + msg2: 'are now in beta. Have fun!' + }, + contribute: { + title: 'Contributors', + docs: 'Caught a mistake or want to contribute to the documentation?', + blog: 'Caught a mistake or want to contribute to this blog post?', + edit_on_github: 'Edit this page on GitHub!', + msg1: 'Contribution for this page is now closed. If you would like to contribute please check out our', + link: 'new docs' + }, + example: { + intro: 'In this example:' + }, + codeSandbox: { + open: 'See Example' + }, + content: { + guide: { + prologue: 'Prologue', + 'getting-started': 'Getting Started' + }, + api: { + essential: 'Essential', + pages: 'Pages', + components: 'Components', + utils: 'Utils', + configuration: 'Configuration', + programmatically: 'Programmatically', + internals: 'Internals' + }, + examples: { + routing: 'Routing', + dataFetching: 'Data Fetching', + assetManagement: 'Asset Management', + transitions: 'Transitions', + seo: 'SEO', + loading: 'Loading', + miscellaneous: 'Miscellaneous', + middleware: 'Middleware', + plugins: 'Plugins', + modules: 'Modules', + customization: 'Customization', + advanced: 'Advanced' + }, + faq: { + configuration: 'Configuration', + development: 'Development', + deployment: 'Deployment' + }, + guides: { + 'get-started': 'Get Started', + concepts: 'Concepts', + features: 'Features', + 'directory-structure': 'Directory Structure', + 'configuration-glossary': 'Configuration Glossary', + 'internals-glossary': 'Internals Glossary', + 'components-glossary': 'Components Glossary', + deployment: 'Deployment', + examples: 'Examples' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Training & consultancy', + sponsorNuxt: 'Sponsoring & donations' + }, + about: { + title: 'Help', + team: 'Our team', + design: 'Design kit', + contact: 'Contact us' + }, + support: { + title: 'Support', + resources: 'Resources', + discord: 'Chat with us', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: 'We use Cookies for user analysis and on-page improvements!', + linkLabel: 'Learn about cookies', + button: 'Got it' + } +} diff --git a/nuxtjs.org/i18n/es-ES.js b/nuxtjs.org/i18n/es-ES.js new file mode 100644 index 000000000..fd8970b97 --- /dev/null +++ b/nuxtjs.org/i18n/es-ES.js @@ -0,0 +1,356 @@ +import es from '~docus-i18n/es-ES' + +export default { + ...es, + common: { + an_error_occurred: 'Ha ocurrido un error', + page_not_found: 'Página no encontrada', + please_define_title: 'Por favor, añade un título', + please_define_description: 'Por favor, añade una descripción', + search: 'Buscar ("/" recibir el foco)', + version: 'Versión' + }, + iso: 'es', + + links: { + download: 'Descargar', + live_edit: 'Editar en línea' + }, + header: { + links: [ + { + name: 'Docs', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Ejemplos', + icon: 'code', + slug: 'examples' + }, + { + name: 'Recursos', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Video Courses', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Buscar ("/" recibir el foco)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - El Framework intuitivo de Vue', + description: + 'Construye tu siguiente aplicación de Vue.js con confianza usando NuxtJS. Un framework de código abierto que trabaja para conseguir que el desarrollo web sea simple y poderoso.' + }, + welcome: { + title: 'El Framework {br} {frameworkType} Intuitivo', + description: + 'Construye tu siguiente aplicación de Vue.js con confianza usando NuxtJS. Un framework de {openSource} que trabaja para conseguir que el desarrollo web sea simple y poderoso.', + openSource: 'código abierto', + get_started: 'comenzar', + get_updates: 'Obtenga actualizaciones de NuxtJS cada mes en su bandeja de entrada', + video: 'Video produced by {company}, download their free {cheatSheet}.', + cheatSheet: 'Nuxt Cheat Sheet.' + }, + why: { + title: 'Por qué {nuxt}', + try_nuxtjs_online: 'Experimenta con NuxtJS Online', + enjoyable: { + title: 'Agradable', + description: + 'Nuestro enfoque principal es la experiencia del desarrollador. Nos encanta Nuxt.js y mejoramos continuamente, ¡así que a ti también te encanta! {break} Espere soluciones atractivas, mensajes de error descriptivos, poderosos valores predeterminados y documentación detallada. Si surgen preguntas o problemas, nuestra comunidad te ayudará.' + }, + modular: { + title: 'Modular', + description: + 'Nuxt se basa en una potente arquitectura modular. Puede elegir entre más de 50 módulos para que su desarrollo sea más rápido y sencillo. No tiene que reinventar la rueda para obtener los beneficios de PWA, agregar Google Analytics a su página o generar un mapa del sitio.' + }, + performant: { + title: 'Rendimiento', + description: + 'Con Nuxt.js, tu aplicación se optimizará desde el primer momento. Hacemos todo lo posible para crear aplicaciones de alto rendimiento utilizando las mejores prácticas de Vue.js y Node.js.Para exprimir cada bit innecesario de tu aplicación, Nuxt incluye un analizador de paquetes y muchas oportunidades para ajustar tu aplicación.' + } + }, + companies: { + title: 'Quién usa {nuxt}' + }, + modes: { + title: '{nuxt} rendering', + ssr: { + title: 'Server Side Rendered', + description: + 'El modo más popular para Nuxt. Con SSR, también llamado modo "universal" o "isomórfico", se utilizará un servidor Node.js para entregar HTML basado en tus componentes de Vue al cliente en lugar del javascript puro. El uso de SSR generará un gran impulso de SEO, una mejor UX y más oportunidades (en comparación con un Vue SPA tradicional). {Break} Debido a que implementar SSR por tu cuenta puede ser realmente tedioso, Nuxt.js le brinda soporte completo listo para usar y se encargará de los errores comunes.' + }, + ssg: { + title: 'Statically Generated', + description: + 'La generación de sitios estáticos es un tema muy candente en este momento (también conocido como JAMStack). En lugar de cambiar a otro framework y dedicar tiempo a acostumbrarse a él, ¿por qué no matar dos pájaros de un tiro? {proverbial} Nuxt.js admite la generación de un sitio web estático basado en tu aplicación Vue. Es "lo mejor de ambos mundos", ya que no necesitas un servidor, pero todavía tiene beneficios de SEO porque Nuxt pre-renderizará todas las páginas e incluirá el HTML necesario. Además, puede implementar la página resultante fácilmente en páginas de Netlify o GitHub.', + proverbial: 'sólo proverbial' + } + }, + sponsors: { + title: 'Patrocinadores', + description: + 'NuxtJS es un proyecto de código abierto con licencia del MIT y de uso completamente gratuito. Sin embargo, la cantidad de esfuerzo necesaria para mantener y desarrollar nuevas funciones para el proyecto no es sostenible sin el respaldo financiero adecuado. Si dirige un negocio y está utilizando Nuxt en un producto que genera ingresos, tiene sentido comercial patrocinar el desarrollo de Nuxt: asegura que el proyecto en el que se basa su producto se mantenga saludable y mantenido activamente. También puede ayudar a su exposición en la comunidad de Vue / Nuxt y facilita la atracción de desarrolladores de Vue / Nuxt. Si es un usuario individual y ha disfrutado de la productividad de usar Nuxt, considere donar como una señal de agradecimiento.', + become_a_sponsor: 'Conviértete en patrocinador' + }, + newsletter: { + title: '{nuxt} Newsletter', + description: + 'Recibe las últimas noticias de Nuxt en tu bandeja de entrada, organizado por el equipo de Nuxt y los contribuidores.', + form: { + email: 'Email', + subscribing: 'Suscribiéndote...', + subscribe: 'Suscríbete', + subscribed_messages: { + pre: 'Para confirmar tu suscripción hemos enviado un email a', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS Design', + description: 'Descargue los recursos de diseño de NuxtJS (SVG, iconos, emoji y favicon)' + }, + title: '{nuxt} Design', + description: + 'Nuxt JS es un proyecto de código abierto con licencia del MIT y de uso completamente gratuito. {break} Puede usar libremente nuestros logotipos siempre que mencione Nuxt JS y enlace a nuxtjs.org.', + other_download_message: 'También puede descargar nuestro {favicon} o nuestro archivo {sketch}.' + }, + resources: { + meta: { + title: 'NuxtJS Recursos', + description: + 'Descubra un panel de recursos elaborado por nuestros socios. Al utilizar estos enlaces de recursos para afiliados, nos ayuda a mantener y desarrollar el framework de código abierto.' + }, + title: '{nuxt} Recursos', + description: + 'Descubra un panel de recursos elaborado por nuestros socios. Al utilizar estos enlaces de recursos para afiliados, nos ayuda a mantener y desarrollar el framework de código abierto.', + themes: { + title: 'Temas' + }, + videos: { + title: 'Video cursos' + } + }, + shop: { + meta: { + title: 'La tienda NuxtJS', + description: + '¿Quieres apoyar el proyecto NuxtJS y mostrar tu amor al resto de la comunidad? ¡Aquí nuestros productos con la mejor calidad!' + }, + title: 'La tienda {nuxt}', + description: + '¿Quieres apoyar el proyecto NuxtJS y mostrar tu amor al resto de la comunidad? {Break} ¡Aquí nuestros productos con la mejor calidad!', + button: 'Próximamente' + }, + team: { + meta: { + title: 'Equipo NuxtJS', + description: + 'NuxtJS tiene un equipo muy activo y comprometido que se esfuerza constantemente por impulsar a Nuxt hacia adelante.' + }, + title: 'Equipo de {nuxt}', + description: + 'El desarrollo de NuxtJS y su ecosistema está guiado por un equipo internacional. Contamos con un equipo muy activo y comprometido que se esfuerza constantemente por impulsar a Nuxt.' + }, + themes: { + meta: { + title: 'NuxtJS Temas', + description: + 'Con los temas creados por nuestros socios de Creative Tim y Theme Forest, puede ver cómo se construye una aplicación del mundo real, con Nuxt.js.' + }, + title: '{nuxt} Temas', + description: + 'Con los temas creados por nuestros socios de Creative Tim y Theme Forest, puede ver cómo se construye una aplicación del mundo real, con Nuxt.js.', + button: 'OBTENERLO por' + }, + 'video-courses': { + meta: { + title: 'NuxtJS Video Cursos', + description: + 'Con los cursos en video creados por nuestro socio VueSchool, puede descubrir y aprender más sobre Nuxt.js.' + }, + title: '{nuxt} Video Cursos', + description: + 'Con los cursos en video creados por nuestro socio VueSchool, puede descubrir y aprender más sobre Nuxt.js.', + cta: { + discover: 'Descubrir vueschool', + start: 'INICIAR CURSO' + } + }, + sponsor: { + meta: { + title: 'Patrocinar el desarrollo de NuxtJS', + description: + 'Puede respaldar el desarrollo de NuxtJS a través de diferentes métodos y garantizar actualizaciones periódicas del framework.' + }, + title: 'Patrocinar el desarrollo de {nuxt}', + description: + 'NuxtJS es un proyecto de código abierto con licencia del MIT y de uso completamente gratuito. {Break} Sin embargo, la cantidad de esfuerzo necesario para mantener y desarrollar nuevas funciones para el proyecto no es sostenible sin el respaldo financiero adecuado. {Break} Puede respaldar el desarrollo de NuxtJS a través de los siguientes métodos:', + donations: { + title: 'Donaciones únicas', + description: 'Aceptamos donaciones a través de estos canales' + }, + pledges: { + title: 'Compromisos recurrentes', + description: + 'El compromiso recurrente vienen con ventajas exclusivas, p. Ej. tener su nombre en el repositorio de NuxtJS GitHub, o colocar el logotipo de su empresa en este sitio web. Conviértase en nuxter o patrocinador a través de {opencollective} (entra en un fondo con modelos de gastos transparentes que respaldan los esfuerzos y eventos de la comunidad).' + }, + become_a_sponsor: 'Conviértete en patrocinador' + }, + support: { + meta: { + title: 'El soporte de NuxtJS', + description: + 'Nuestro equipo de NuxtJS ahora ofrece servicios de consultoría oficiales para sus aplicaciones NuxtJS.' + }, + title: 'Asistencia de consultoría {nuxt}', + description: + 'Nuestro {equipo} ahora ofrece servicios de consultoría oficial para sus aplicaciones NuxtJS. {Break} Ofrecemos diferentes servicios según sus necesidades, desde soporte técnico hasta desarrollo personalizado. Espere una respuesta dentro de un día hábil, podemos firmar un acuerdo de confidencialidad personalizado y puede obtener un reembolso completo si no está satisfecho con nuestro servicio.', + technical: { + title: 'Soporte técnico', + description: + 'Obtenga auditorías de proyectos, implementaciones de aplicaciones, desarrollo personalizado y soporte técnico del equipo de NuxtJS.', + start: 'Comenzar chat', + partner: { + pre: 'Nos asociamos', + post: 'para ofrecer estos servicios y poder enfocarnos en ayudarlo lo más rápido posible.' + } + }, + entreprise: { + title: 'para empresas', + description: + 'NuxtJS y los responsables de mantenimiento de miles de otros paquetes están trabajando con Tidelift para ofrecer una suscripción empresarial que cubra todo el código abierto que utiliza. {Break} Si desea la flexibilidad del código abierto y la confianza del software de calidad comercial, esto es para ti.', + partner: { + pre: 'Disponible como parte de la', + post: 'suscripción.' + }, + learn_more: 'Aprende más', + request_a_demo: 'Solicite una demostración' + } + }, + blog: { + meta: { + title: 'NuxtJS Blog', + description: + 'Descubra artículos del equipo de NuxtJS y de la comunidad de NuxtJS sobre NuxtJS, ¡se incluyen consejos y trucos!' + }, + title: '{nuxt} Blog', + description: + 'Descubra artículos de {nuxtTeam} y {nuxtCommunity} sobre NuxtJS, ¡con sugerencias y trucos incluidos!', + nuxt_team: 'NuxtJS Team', + nuxt_community: 'Comunidad Nuxt.js', + contribute: '¿Te has equivocado o quieres contribuir a esta publicación de blog?' + }, + guide: { + release_notes: 'Notas de publicación (en)', + toc_title: 'En esta página' + }, + quiz: { + title: 'Quiz' + }, + tryNewDocs: { + msg1: '¿Quieres echar un vistazo a nuestra nueva documentación? Nuestras ', + link: 'nuevas docs', + msg2: 'están ahora en modo beta. Pásalo bien!' + }, + contribute: { + title: 'Colaboradores', + docs: '¿Has encontrado un error o quieres contribuir en la documentación?', + blog: '¿Has encontrado un error o quieres contribuir en este artículo?', + edit_on_github: 'Edita esta página en GitHub!', + msg1: 'La contribución en esta página está cerrada. Si quieres contribuir, por favor, revisa nuestra', + link: 'nueva documentación' + }, + example: { + intro: 'En esta ejemplo:' + }, + codeSandbox: { + open: 'Ver Ejemplo' + }, + content: { + guide: { + prologue: 'Prólogo', + 'getting-started': 'Empecemos' + }, + api: { + essential: 'Esencial', + pages: 'Páginas', + components: 'Componentes', + utils: 'Utilidades', + configuration: 'Configuración', + programmatically: 'Programación', + internals: 'Mecanismos' + }, + examples: { + routing: 'Routing', + dataFetching: 'Data Fetching', + assetManagement: 'Asset Management', + transitions: 'Transitions', + seo: 'SEO', + loading: 'Loading', + miscellaneous: 'Miscellaneous', + middleware: 'Middleware', + plugins: 'Plugins', + modules: 'Modules', + customization: 'Customization', + advanced: 'Advanced' + }, + faq: { + configuration: 'Configuración', + development: 'Desarrollo', + deployment: 'Deployment' + }, + guides: { + 'get-started': 'Comenzar', + concepts: 'Conceptos', + features: 'Características', + 'directory-structure': 'Estructura de directorios', + 'configuration-glossary': 'Glosario de configuración', + 'internals-glossary': 'Glosario de aspectos internos', + 'components-glossary': 'Glosario de componentes' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Training & consultancy', + sponsorNuxt: 'Sponsoring & donations' + }, + about: { + title: 'About', + team: 'Our team', + design: 'Design kit', + contact: 'Contact us' + }, + support: { + title: 'Support', + resources: 'Resources', + discord: 'Chat with us', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: 'Usamos cookies para análisis de usuarios y mejoras en la página.', + linkLabel: 'Más información sobre las cookies', + button: 'Entendido' + } +} diff --git a/nuxtjs.org/i18n/fa-IR.js b/nuxtjs.org/i18n/fa-IR.js new file mode 100644 index 000000000..db9fe1576 --- /dev/null +++ b/nuxtjs.org/i18n/fa-IR.js @@ -0,0 +1,337 @@ +export default { + common: { + an_error_occurred: 'خطایی رخ داد', + page_not_found: 'صفحه مورد نظر یافت نشد', + please_define_title: 'لطفا یک عنوان انتخاب کنید', + please_define_description: 'لطفا یک توضیح تعریف کنید', + search: 'جستجو ("/" برای دسترسی سریع)', + version: 'نسخه' + }, + iso: 'fa', + + links: { + download: 'دانلود', + live_edit: 'ویرایش زنده' + }, + header: { + links: [ + { + name: 'راهنمایی‌ها', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'نمونه‌ها', + icon: 'code', + slug: 'examples' + }, + { + name: 'Resources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'بلاگ', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Video Courses', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'جستجو ("/" برای دسترسی سریع)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - فریم‌ورک بصری Vue', + description: + 'اپلیکیشن Vue.js بعدی خود را با NuxtJs بسازید! فریم‌ورک متن‌بازی که توسعه وب را آسان و قدرتمند می‌کند!' + }, + welcome: { + title: 'فریم‌ورک بصری {br} {frameworkType}', + description: + 'اپلیکیشن Vue.js بعدی خود را با NuxtJs بسازید! فریم‌ورک متن‌بازی که توسعه وب را آسان و قدرتمند می‌کند!', + openSource: 'متن‌باز', + get_started: 'شروع کنید', + get_updates: 'اخبار NuxtJS را هر ماه در ایمیل خود دریافت کنید', + video: 'ویدیو ساخته شده توسط {company}، {cheatSheet} را به صورت رایگان دریافت کنید', + cheatSheet: 'کتابچه NuxtJS' + }, + why: { + title: 'چرا {nuxt}', + try_nuxtjs_online: 'NuxtJS را آنلاین امتحان کنید', + enjoyable: { + title: 'لذت بخش', + description: + 'هدف اصلی ما تجربه توسعه‌دهندگان است! ما NuxtJS را دوست داریم و مداوما در حال بهتر کردن این فریم‌ورک هستیم تا شما هم آن را دوست داشته باشید! {break} انتظار یک راه‌حل جذاب، خطاهای توصیفی، پیشفرض‌های قدرتمند و مستندات دقیق را داشته باشید. اگر مشکل یا سوالی دارید، انجمن ما به شما کمک خواهد کرد.' + }, + modular: { + title: 'ماژولار', + description: + 'NuxtJS بر پایه معماری ماژولار طراحی شده است. شما می‌توانید از بین بیش از ۵۰ ماژول انتخاب کنید تا کار خود را سریع‌تر و راحت‌تر پیش ببرید. شما ‌می‌توانید به راحتی از مزایای PWA، Google Analytics بدون دردسر ایجاد مجدد آن را استفاده کنید یا به راحتی نقشه وبسایت خود را ایجاد کنید.' + }, + performant: { + title: 'بهینه', + description: + 'با استفاده از NuxtJS اپلیکیشن شما در همان ابتدا کاملا بهینه خواهد بود. ما تلاش می‌کنیم تا بهینه‌ترین اپیلیشکن‌ها را با استفاده از روش‌های بهینه Vue.js و Node.js پیاده‌سازی کنیم. برای فشرده‌سازی هر ذره از اپلیکیشن شما NuxtJS از یک آنالیزگر برای باندل شما استفاده می‌کند که اپلیکیشن شما را به بهترین نحو بهینه می‌کند.' + } + }, + companies: { + title: 'چه کسانی از {nuxt} استفاده می‌کنند؟' + }, + modes: { + title: 'رندر {nuxt}', + ssr: { + title: 'رندر سمت سرور (SSR)', + description: + 'محبوب‌ترین روش رندر در NuxtJS! این روش که به عنوان جهانی (universal) یا ایزومورفیک (isomorphic) شناخته می‌شود، از یک سرور Node.js برای ارسال محتوای HTML بر اساس کامپوننت‌های Vue شما به جای JavaScript خالص استفاده می‌کند. استفاده از این روش اثر بسزایی در SEO و تجربه‌کاربری بهتر خواهد داشت و امکانات بیشتری نسبت به اپیلیکشن‌های تک‌صفحله‌ای در اختیارتان قرار می‌دهد.' + }, + ssg: { + title: 'صفحات ثابت', + description: + 'صفحات ثابت یکی از محبوب‌ترین و مورد بحث‌ترین روش‌ها است (JAMStack). به جای اینکه به فریم‌ورک دیگری مهاجرت کنید و زمان بیشتری صرف کنید چرا با یک تیر دو نشان نمیزنید؟ NuxtJS امکان ایجاد صفحات ثابت را به راحتی برای شما فراهم می‌کند. این روش یکی از بهترین روش‌ها است چرا که احتیاجی به سرور برای میزبانی اپیلیشکن خود نخواهید داشت اما هنوز هم اپلیکیشن شما از SEO بالایی برخوردار خواهد بود چرا که NuxtJS صفحات شما را از پیش رندر خواهد کرد. در صورت استفاده از این حالت می‌توانید صفحات خود را به راحتی در Netlify یا GitHub Pages میزبانی کنید.' + } + }, + sponsors: { + title: 'اسپانسرها', + description: + 'NuxtJS یک پروژه متن‌باز بر اساس لایسنس MIT و کاملا رایگان است. با این حال، انرژی زیادی برای نگه‌داری و توسعه این پروژه صرف می‌شود که بدون حمایت مالی ممکن نیست. اگر شما صاحب کسب و کاری هستید و از NuxtJS در محصولی که درآمدزایی می‌کند استفاده می‌کنید، قابل درک است که درخواست کنیم تا از NuxtJS حمایت کنید. با حمایت از NuxtJS این اطمینان حاصل می‌شود که این پروژه به صورت مداوم در حال توسعه است و اپلیکیشن شما هم همیشه پابرجا خواهد بود. همچنین با حمایت از NuxtJS می‌توانید توسعه‌دهندگان بیشتری را از طریق مجمع Vue/NuxtJS به سمت پروژه خود جذب کنید. اگر شما توسعه‌دهنده شخصی هستید لطفا به نشان تشکر به این پروژه کمک مالی کنید.', + become_a_sponsor: 'اسپانسر شوید' + }, + newsletter: { + title: 'خبرنامه {nuxt}', + description: 'آخرین اخبار NuxtJS را که توسط تیم NuxtJS تهیه می‌شوند را در ایمیل خود دریافت کنید.', + form: { + email: 'ایمیل', + subscribing: 'در حال ثبت...', + subscribe: 'مشترک شوید', + subscribed_messages: { + pre: 'یک ایمیل جهت تایید ارسال شد به', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'طراحی NuxtJS', + description: 'محتوای طراحی NuxtJS (SVG, icons, emoji و favicon) را دریافت کنید.' + }, + title: 'طراحی {nuxt}', + description: + 'NuxtJS یک پروژه متن‌باز بر اساس لایسنس MIT و کاملا رایگان است. {break} شما می‌توانید از لوگو های ما در صورتی که به NuxtJS و آدرس nuxtjs.org اشاره کنید استفاده کنید.', + other_download_message: 'شما می‌توانید فایل {favicon} و {sketch} ما را نیر دریافت کنید.' + }, + resources: { + meta: { + title: 'منابع NuxtJS', + description: + 'مجموعه‌ای از منابعی که توسط همراهان ما تهیه شده‌اند را بشناسید! با استفاده از این لینک‌های معرفی به ما کمک می‌کنید تا این پروژه متن‌باز را ادامه دهیم.' + }, + title: 'منابع {nuxt}', + description: + 'مجموعه‌ای از منابعی که توسط همراهان ما تهیه شده‌اند را بشناسید! با استفاده از این لینک‌های معرفی به ما کمک می‌کنید تا این پروژه متن‌باز را ادامه دهیم.', + themes: { + title: 'پوسته‌ها' + }, + videos: { + title: 'دوره‌های ویدیویی' + } + }, + shop: { + meta: { + title: 'فروشگاه NuxtJS', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community? Here our products with the best quality ever!' + }, + title: 'فروشگاه {nuxt}', + description: + 'می‌خواهید از پروژه NuxtJS حمایت کنید و علاقه خود به این پروژه را به بقیه نشان دهید؟{break}اینجا می‌توانید محصولات فوق‌العاده با کیفیت ما را ببینید!', + button: 'به زودی' + }, + team: { + meta: { + title: 'تیم NuxtJS', + description: 'NuxtJS تیمی بسیار فعال و کوشا دارد که همیشه سعی در پیشبرد این پروژه دارند.' + }, + title: 'تیم {nuxt}', + description: + 'توسعه NuxtJS توسط تیمی بین المللی محقق شده می‌شود. NuxtJS تیمی بسیار فعال و کوشا دارد که همیشه سعی در پیشبرد این پروژه دارند.' + }, + themes: { + meta: { + title: 'پوسته‌های NuxtJS', + description: + 'با دیدن پوسته‌های زیر که توسط همراهان ما در Creative Tim و Theme Forest ساخته شده‌اند می‌توانید ببینید که چطور از NuxtJS در محصولات نهایی استفاده می‌شود.' + }, + title: 'پوسته‌های {nuxt}', + description: + 'با دیدن پوسته‌های زیر که توسط همراهان ما در Creative Tim و Theme Forest ساخته شده‌اند می‌توانید ببینید که چطور از NuxtJS در محصولات نهایی استفاده می‌شود.', + button: 'دریافت' + }, + 'video-courses': { + meta: { + title: 'دوره‌های ویدیویی NuxtJS', + description: + 'با استفاده از دوره‌های ویدیویی زیر که توسط VueSchool تهیه شده‌اند می توانید درک بیشتری از فریم‌ورک NuxtJS داشته باشید.' + }, + title: 'دوره‌های ویدیویی {nuxt}', + description: + 'با استفاده از دوره‌های ویدیویی زیر که توسط VueSchool تهیه شده‌اند می توانید درک بیشتری از فریم‌ورک NuxtJS داشته باشید.', + cta: { + discover: 'بیشتر در مورد VueSchool بدانید', + start: 'شروع دوره' + } + }, + sponsor: { + meta: { + title: 'اسپانسر NuxtJS شوید', + description: + 'شما میتوانید از روش های مختلفی اسپانسر NuxtJS شوید و از آپدیت‌های دائمی این پروژه اطمینان حاصل کنید.' + }, + title: 'اسپانسر {nuxt} شوید', + description: + 'NuxtJS یک پروژه متن‌باز بر اساس لایسنس MIT و کاملا رایگان است. با این حال، انرژی زیادی برای نگه‌داری و توسعه این پروژه صرف می‌شود که بدون حمایت مالی ممکن نیست. اگر شما صاحب کسب و کاری هستید و از NuxtJS در محصولی که درآمدزایی می‌کند استفاده می‌کنید، قابل درک است که درخواست کنیم تا از NuxtJS حمایت کنید. با حمایت از NuxtJS این اطمینان حاصل می‌شود که این پروژه به صورت مداوم در حال توسعه است و اپلیکیشن شما هم همیشه پابرجا خواهد بود. همچنین با حمایت از NuxtJS می‌توانید توسعه‌دهندگان بیشتری را از طریق مجمع Vue/NuxtJS به سمت پروژه خود جذب کنید. اگر شما توسعه‌دهنده شخصی هستید لطفا به نشان تشکر به این پروژه کمک مالی کنید. شما می‌توانید از طریق روش‌های زیر از ما حمایت کنید:', + donations: { + title: 'حمایت‌های یکباره', + description: 'ما حمایت‌های مالی از طریق روش‌های زیر را قبول می‌کنیم' + }, + pledges: { + title: 'حمایت‌های دوره‌ای', + description: + 'حمایت‌های دوره‌ای مزایایی نیز برای شما دارد. به عنوان مثال نام شما در صفحه گیت‌هاب پروژه NuxtJS ثبت می شود یا لوگو شرکت شما در این صفحه قرار میگیرد. از طریق {opencollective} می‌توانید حامی ما باشید.' + }, + become_a_sponsor: 'اسپانسر شوید' + }, + support: { + meta: { + title: 'پشتیبانی NuxtJS', + description: 'تیم ما اکنون به صورت رسمی خدمات مشاوره برای پروژه NuxtJS بعدی شما ارائه می‌دهد.' + }, + title: 'تیم مشاوره {nuxt}', + description: + '{team} اکنون به صورت رسمی خدمات مشاوره برای پروژه NuxtJS بعدی شما ارائه می‌دهد.{break}ما خدمات متنوعی مانند پشتیبانی فنی یا طراحی سفارشی ارائه می‌دهیم. معمولا در یک روز کاری پاسخ می‌دهیم. میتوانیم قرارداد حفاظت اطلاعات (NDA) را امضا کنیم و در صورتی که راضی نبودید می‌‌توانید تمام پول خود را پس بگیرید.', + technical: { + title: 'پشتیبانی فنی', + description: 'از تیم ما خدمات بررسی پروژه، پیاده‌سازی پروژه، طراحی سفارشی و پشتیبانی فنی دریافت کنید.', + start: 'شروع چت', + partner: { + pre: 'ما با همکاری', + post: 'این خدمات را ارائه می‌دهیم تا بتوانیم به سرعت به شما پاسخ دهیم.' + } + }, + entreprise: { + title: 'تجاری', + description: + 'تیم NuxtJS و توسعه‌دهندگان هزاران پکیج دیگر در حال کار با Tidelift هستند تا بتوانند یک اشتراک تجاری را به ارمغان بیاورند که تمام پروژه‌های متن‌بازی که میبینید را پوشش می‌دهد.{break}اگر شما می‌خواهید با اطمینان بیشتر و به صورت تجاری از یک پروژه متن‌باز استفاده کنید این گزینه مناسب شماست.', + partner: { + pre: 'به صورت اشتراک', + post: 'در دسترس است' + }, + learn_more: 'بیشتر بدانید', + request_a_demo: 'درخواست دمو' + } + }, + blog: { + meta: { + title: 'وبلاگ NuxtJS', + description: 'مقالاتی از {nuxtTeam} و {nuxtCommunity} در مورد NuxtJS بیابید! به همراه نکات جالب!' + }, + title: 'وبلاگ {nuxt}', + description: 'مقالاتی از {nuxtTeam} و {nuxtCommunity} در مورد NuxtJS بیابید! به همراه نکات جالب!', + nuxt_team: 'تیم NuxtJS', + nuxt_community: 'مجمع NuxtJS', + contribute: 'مشکلی میبینید یا میخواهید در این پست مشارکت کنید؟' + }, + guide: { + release_notes: 'یادداشت انتشار', + toc_title: 'در این صفحه' + }, + quiz: { + title: 'آزمون' + }, + tryNewDocs: { + msg1: 'می‌خواهد مستندات جدید ما را ببینید؟', + link: 'مستندات جدید', + msg2: 'ما اکنون در فاز بتا است. خوش بگذره!' + }, + contribute: { + title: 'مشارکت‌کنندگان', + docs: 'مشکلی میبینید یا میخواهید در مستندات مشارکت کنید؟', + blog: 'مشکلی میبینید یا میخواهید در این پست مشارکت کنید؟', + edit_on_github: 'این صفحه را در گیت‌هاب ویرایش کنید!', + msg1: 'مشارکت در این صفحه بسته شده است. اگر می‌‌خواهید مشارکت کنید', + link: 'مستندات جدید' + }, + example: { + intro: 'در این مثال:' + }, + codeSandbox: { + open: 'باز کردن CodeSandbox' + }, + content: { + guide: { + prologue: 'پیش‌نویس', + 'getting-started': 'شروع کنید' + }, + api: { + essential: 'ضروری', + pages: 'صفحات', + components: 'کامپوننت‌ها', + utils: 'ابزارها', + configuration: 'تنظیمات', + programmatically: 'دستی', + internals: 'داخلی' + }, + examples: { + essentials: 'ضروری‌ها', + customization: 'سفارشی‌سازی', + advanced: 'پیشرفته' + }, + faq: { + configuration: 'تنظیمات', + development: 'توسعه', + deployment: 'پیاده‌سازی' + }, + guides: { + 'get-started': 'شروع کنید', + concepts: 'مفهوم‌ها', + features: 'امکانات', + 'directory-structure': 'ساختار', + 'configuration-glossary': 'واژه‌نامه تنظیمات', + 'internals-glossary': 'واژه‌نامه داخلی', + 'components-glossary': 'واژه‌نامه کامپوننت‌ها' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Training & consultancy', + sponsorNuxt: 'Sponsoring & donations' + }, + about: { + title: 'About', + team: 'Our team', + design: 'Design kit', + contact: 'Contact us' + }, + support: { + title: 'Support', + resources: 'منابع', + discord: 'Chat with us', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: 'ما از کوکی‌ها برای آمارگیری و ایجاد تجربه‌کاربری بهتر استفاده می کنیم.', + linkLabel: 'بیشتر بدانید', + button: 'حله' + } +} diff --git a/nuxtjs.org/i18n/fr-FR.js b/nuxtjs.org/i18n/fr-FR.js new file mode 100644 index 000000000..dcaf946dd --- /dev/null +++ b/nuxtjs.org/i18n/fr-FR.js @@ -0,0 +1,362 @@ +import fr from '~docus-i18n/fr-FR' + +export default { + ...fr, + common: { + an_error_occurred: "Une erreur s'est produite", + page_not_found: 'La page est introuvable', + please_define_title: 'Merci de définir un titre', + please_define_description: 'Merci de définir une description', + search: 'Rechercher', + version: 'Version' + }, + iso: 'fr', + + links: { + download: 'Téléchargement', + live_edit: 'Éditer en ligne' + }, + header: { + links: [ + { + name: 'Docs', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Exemples', + icon: 'code', + slug: 'examples' + }, + { + name: 'Ressources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Cours Video', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Rechercher' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - Le Framework Vue.js Intuitif', + description: + "Nuxt.js fournit toutes les configurations nécessaires pour rendre vos développements d'application Vue.js agréable. Nuxt.js peut créer des Applications Universelles, Monopages ou Statiques Générées." + }, + welcome: { + title: 'Le Framework Intuitif {br} basé sur {frameworkType}', + description: + 'Construisez votre prochaine application Vue.js en toute confiance avec NuxtJS. Un framework {openSource} rendant le développement web simple et puissant.', + openSource: 'open source', + get_started: 'Commencer', + get_updates: 'Recevez chaque mois les mises à jour de Nuxt dans votre boîte de réception', + video: 'Vidéo produite par {company}, téléchargez gratuitement {cheatSheet}.', + cheatSheet: 'Nuxt Cheat Sheet' + }, + why: { + title: 'Pourquoi {nuxt}', + try_nuxtjs_online: 'Essayez NuxtJS Online', + enjoyable: { + title: 'Agréable', + description: + "Notre principal objectif est l'expérience des développeurs. Nous aimons Nuxt.js et améliorons continuellement le framework pour que vous l'aimiez aussi! {break} Attendez-vous à des solutions attrayantes, des messages d'erreur descriptifs, des paramètres par défaut puissants et une documentation détaillée. Si des questions ou des problèmes surviennent, notre communauté attentionnée vous aidera." + }, + modular: { + title: 'Modulaire', + description: + "Nuxt repose sur une puissante architecture modulaire. Vous pouvez choisir parmi plus de 50 modules pour rendre votre développement plus rapide et plus facile. Il n'est pas nécessaire de réinventer la roue pour obtenir les avantages PWA, ajouter Google Analytics à votre page ou générer un plan du site." + }, + performant: { + title: 'Performant', + description: + "Avec Nuxt.js, votre application sera optimisée et prête à l'emploi. Nous faisons de notre mieux pour créer des applications performantes en appliquant les meilleures pratiques de Vue.js et Node.js. Pour tirer le meilleur parti de votre application, Nuxt inclut un analyseur de bundles et de nombreuses possibilités d'ajuster votre application." + } + }, + companies: { + title: 'Qui utilise {nuxt}' + }, + modes: { + title: 'Rendu {nuxt}', + ssr: { + title: 'Server Side Rendered (SSR)', + description: + 'Le mode le plus populaire pour Nuxt. Avec le rendu côté server (SSR), également appelé mode "universel" ou "isomorphe", un serveur Node.js sera utilisé pour fournir du HTML basé sur vos composants Vue au client au lieu du pur javascript. L\'utilisation du SSR entraînera une amélioration considérable de votre SEO, un meilleur UX et plus d\'opportunités (par rapport à une Vue SPA traditionnelle).{break}Parce que la mise en place du SSR par vous-même peut être vraiment fastidieuse, Nuxt.js vous offre un support complet et s\'occupera des pièges courants.' + }, + ssg: { + title: 'Static Site Generation (SSG)', + description: + "La génération de sites statiques est un sujet à la mode en ce moment (aka JAMStack). Au lieu de passer à un autre framework et de passer du temps à s'y habituer, pourquoi ne pas faire d'une pierre deux coups ? {proverbial} Nuxt.js prend en charge la génération d'un site statique basé sur votre application Vue. C'est le \"meilleur des deux mondes\" car vous n'avez pas besoin d'un serveur mais vous avez toujours des avantages SEO car Nuxt pré-rendra toutes les pages et inclura le HTML nécessaire. En outre, vous pouvez déployer facilement la page résultante sur des pages Netlify ou GitHub.", + proverbial: "comme le dit l'expression" + } + }, + sponsors: { + title: 'Sponsors', + description: + 'NuxtJS est un projet open source sous licence MIT entièrement gratuit. Cependant, les efforts nécessaires pour maintenir et développer de nouvelles fonctionnalités pour le projet ne sont pas durables sans un soutien financier adéquat. Si vous exploitez une entreprise et utilisez Nuxt dans un produit générateur de revenus, il est logique de parrainer le développement Nuxt: cela garantit que le projet sur lequel votre produit repose reste en bonne santé et activement entretenu. Cela peut également vous aider à mieux faire connaître votre entreprise dans la communauté Vue/Nuxt et à attirer plus facilement les développeurs Vue/Nuxt. Si vous êtes un utilisateur individuel et avez apprécié la productivité de l’utilisation de Nuxt, envisagez de faire un don en guise de remerciement.', + become_a_sponsor: 'Devenir sponsor' + }, + newsletter: { + title: '{nuxt} Newsletter', + description: + "Recevez les dernières nouvelles de Nuxt dans votre boîte de réception, organisée par l'équipe Nuxt et les contributeurs.", + form: { + email: 'Email', + subscribing: "S'abonner", + subscribe: "S'abonner", + subscribed_messages: { + pre: 'Un email pour confirmer que votre abonnement a été envoyé à', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'Conception NuxtJS', + description: 'Télécharger les ressources de conception NuxtJS (SVG, icônes, emoji et favicon).' + }, + title: '{nuxt} Conception', + description: + "NuxtJS est un projet open source sous licence MIT et totalement gratuit d'utilisation. {break} Vous pouvez utiliser librement nos logos tant que vous mentionnez NuxtJS ainsi qu'un lien vers nuxtjs.org.", + other_download_message: 'Vous pouvez également télécharger notre {favicon} ou notre fichier {sketch}.' + }, + resources: { + meta: { + title: 'Ressources NuxtJS', + description: + "Découvrez un panel de ressources réalisées par nos partenaires. En utilisant ces liens de ressources d'affiliation, vous nous aidez à maintenir et développer le Framework Open Source." + }, + title: '{nuxt} Ressources', + description: + "Découvrez un panel de ressources réalisées par nos partenaires. En utilisant ces liens de ressources d'affiliation, vous nous aidez à maintenir et développer le Framework Open Source.", + themes: { + title: 'Thèmes' + }, + videos: { + title: 'Cours Vidéos' + }, + modules: { + title: 'Modules' + }, + examples: { + title: 'Exemples' + } + }, + shop: { + meta: { + title: 'Le magasin NuxtJS', + description: + 'Vous souhaitez soutenir le projet NuxtJS et montrer votre amour au reste de la communauté? Voici nos produits avec la meilleure qualité jamais vue!' + }, + title: 'Le magasin {nuxt}', + description: + 'Vous souhaitez soutenir le projet NuxtJS et montrer votre amour au reste de la communauté?{break} Voici nos produits avec la meilleure qualité jamais vue!', + button: 'Bientôt disponible' + }, + team: { + meta: { + title: "L'équipe NuxtJS", + description: "NuxtJS a une équipe très active et engagée qui s'efforce constamment de faire avancer Nuxt." + }, + title: "L'équipe {nuxt}", + description: + "Le développement de NuxtJS et de son écosystème est guidé par une équipe internationale. Nous avons une équipe très active et engagée qui s'efforce constamment de faire avancer Nuxt." + }, + themes: { + meta: { + title: 'Les thèmes NuxtJS', + description: + 'Avec les thèmes ci-dessous construits par nos partenaires de Creative Tim et Theme Forest, vous pouvez voir comment une application du monde réel est construite, avec la pile Nuxt.js en arrière plan.' + }, + title: 'Les thèmes {nuxt}', + description: + 'Avec les thèmes ci-dessous construits par nos partenaires de Creative Tim et Theme Forest, vous pouvez voir comment une application du monde réel est construite, avec la pile Nuxt.js en arrière plan.', + button: 'OBTENEZ-LE pour' + }, + 'video-courses': { + meta: { + title: 'Les cours vidéos NuxtJS', + description: + 'Avec les cours vidéo ci-dessous créés par notre partenaire VueSchool, vous pouvez découvrir et en savoir plus sur le Framework Nuxt.js.' + }, + title: 'Les cours vidéos {nuxt}', + description: + 'Avec les cours vidéo ci-dessous créés par notre partenaire VueSchool, vous pouvez découvrir et en savoir plus sur le Framework Nuxt.js.', + cta: { + discover: 'Découvrir vueschool', + start: 'COMMENCER LE COURS' + } + }, + sponsor: { + meta: { + title: 'Sponsor de développement NuxtJS', + description: + 'Vous pouvez prendre en charge le développement NuxtJS via différentes méthodes et assurer des mises à jour régulières du framework.' + }, + title: 'Sponsor de développement {nuxt}', + description: + "NuxtJS est un projet open source sous licence MIT et totalement gratuit d'utilisation.{break} Cependant, les efforts nécessaires pour maintenir et développer de nouvelles fonctionnalités pour le projet ne sont pas durables sans un soutien financier approprié.{break} Vous pouvez soutenir le développement NuxtJS via les méthodes suivantes:", + donations: { + title: 'Dons uniques', + description: 'Nous acceptons les dons via ces canaux' + }, + pledges: { + title: 'Engagements récurrents', + description: + "Les promesses récurrentes s'accompagnent d'avantages exclusifs, par exemple avoir votre nom répertorié dans le référentiel NuxtJS GitHub, ou placer le logo de votre entreprise sur ce site Web. Devenez un nuxter ou un sponsor via {opencollective} (entre dans un fonds avec des modèles de dépenses transparents soutenant les efforts et les événements de la communauté)." + }, + become_a_sponsor: 'Devenez un sponsor' + }, + support: { + meta: { + title: 'Le support NuxtJS', + description: + 'Notre équipe NuxtJS propose désormais des services de conseil officiels pour vos applications NuxtJS.' + }, + title: 'Conseil du support {nuxt}', + description: + "Notre équipe {nuxt} propose désormais des services de conseil officiels pour vos applications NuxtJS.{break} Nous proposons différents services en fonction de vos besoins, du support technique au développement sur mesure. Attendez-vous à une réponse dans un délai d'un jour ouvrable, nous pouvons signer une NDA personnalisée et vous pouvez obtenir un remboursement complet si vous n'êtes pas satisfait de notre service.", + technical: { + title: 'Le support technique', + description: + "Obtenez des audits de projet, des déploiements d'applications, un développement personnalisé et un support technique de la part de l'équipe NuxtJS.", + start: 'Démarrer le chat', + partner: { + pre: 'Nous nous sommes associés', + post: 'pour offrir ces services afin que nous puissions nous concentrer pour vous aider le plus rapidement possible.' + } + }, + entreprise: { + title: 'pour entreprise', + description: + "NuxtJS et les mainteneurs de milliers d'autres packages travaillent avec Tidelift pour proposer un abonnement d'entreprise qui couvre l'ensemble de l'open source que vous utilisez.{break} Si vous voulez la flexibilité de l'open source et la confiance des logiciels de qualité commerciale, c'est pour vous.", + partner: { + pre: 'Disponible dans le cadre de', + post: "l'abonnement." + }, + learn_more: 'En savoir plus', + request_a_demo: 'Demander une démonstration' + } + }, + blog: { + meta: { + title: 'Blog NuxtJS', + description: "Découvrez les articles de l'équipe et de la communauté NuxtJS, conseils et astuces inclus!" + }, + title: 'Blog {nuxt}', + description: 'Découvrez les articles de {nuxtTeam} et {nuxtCommunity} à propos de NuxtJS ainsi que des astuces !', + nuxt_team: 'NuxtJS Team', + nuxt_community: 'Nuxt.js Community', + contribute: 'Vous avez commis une erreur ou souhaitez contribuer à cet article de blog ?' + }, + guide: { + release_notes: 'Notes de versions (en)', + toc_title: 'Sur cette page' + }, + quiz: { + title: 'Quiz' + }, + tryNewDocs: { + msg1: "Jetez un coup d'œil à notre ", + link: 'nouvelle documentation (beta)', + msg2: '. Have fun !' + }, + contribute: { + title: 'Contributeurs', + docs: 'Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ?', + blog: 'Vous avez commis une erreur ou souhaitez contribuer à cet article de blog ?', + edit_on_github: 'Éditez cette page sur GitHub !', + msg1: 'La contribution pour cette page est maintenant fermée. Si vous souhaitez contribuer, veuillez consulter notre', + link: 'nouvelle documentation' + }, + example: { + intro: 'Dans cet exemple:' + }, + codeSandbox: { + open: 'Ouvrir CodeSandbox' + }, + content: { + guide: { + prologue: 'Prologue', + 'getting-started': 'Pour Commencer' + }, + api: { + essential: 'Essentiel', + pages: 'Pages', + components: 'Composants', + utils: 'Utilitaires', + configuration: 'Configuration', + programmatically: 'Programmation', + internals: 'Mécanismes' + }, + examples: { + routing: 'Routage', + dataFetching: 'Data Fetching', + assetManagement: "Gestion d'assets", + transitions: 'Transitions', + seo: 'SEO', + loading: 'Chargement', + miscellaneous: 'Divers', + middleware: 'Middleware', + plugins: 'Plugins', + modules: 'Modules', + essentials: 'Essentiels', + customization: 'Personnalisation', + advanced: 'Avancé' + }, + faq: { + configuration: 'Configuration', + development: 'Développement', + deployment: 'Déploiement' + }, + guides: { + 'get-started': 'Commencer', + concepts: 'Concepts', + features: 'Fonctionnalités', + 'directory-structure': 'Structure', + 'configuration-glossary': 'Configuration', + 'internals-glossary': 'Internes', + 'components-glossary': 'Composants', + deployment: 'Déploiement', + examples: 'Exemples' + } + }, + footer: { + links: { + discover: { + title: 'Découvrir', + shop: 'Nos goodies', + consulting: 'Formation & consulting', + sponsorNuxt: 'Sponsoring & dons' + }, + about: { + title: 'À propos', + team: 'Notre équipe', + design: 'Design kit', + contact: 'Nous contacter' + }, + support: { + title: 'Support', + resources: 'Ressources', + discord: 'Parlons ensemble', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: "Nous utilisons des cookies pour l'analyse des utilisateurs et les améliorations sur la page !", + linkLabel: 'En savoir plus sur les cookies', + button: 'Accepter' + } +} diff --git a/nuxtjs.org/i18n/id-ID.js b/nuxtjs.org/i18n/id-ID.js new file mode 100644 index 000000000..dfded8d90 --- /dev/null +++ b/nuxtjs.org/i18n/id-ID.js @@ -0,0 +1,339 @@ +export default { + common: { + an_error_occurred: 'Terjadi kesalahan', + page_not_found: 'Halaman tidak ditemukan', + please_define_title: 'Silakan tentukan judul di bagian depan', + please_define_description: 'Silakan tentukan deskripsi di bagian depan', + search: 'Cari ("/" untuk fokus)', + version: 'Versi' + }, + iso: 'id', + + links: { + download: 'Unduh', + live_edit: 'Sunting Langsung' + }, + header: { + links: [ + { + name: 'Panduan', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Contoh', + icon: 'code', + slug: 'examples' + }, + { + name: 'Sumber Daya', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Kursus Video', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Cari ("/" untuk fokus)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - Aplikasi Vue.js Universal', + description: + 'Nuxt.js adalah kerangka kerja minimalis untuk membuat aplikasi Vue.js dengan server side rendering, hot-reloading, static generation, dan banyak lagi!' + }, + welcome: { + title: 'Kerangka Kerja {br} {frameworkType} nan Intuitif', + description: + 'Bangun aplikasi Vue.js Anda berikutnya dengan percaya diri menggunakan NuxtJS. Kerangka kerja {openSource} yang membuat pengembangan web menjadi sederhana dan efektif.', + openSource: 'sumber terbuka', + get_started: 'memulai', + get_updates: 'Dapatkan pembaruan NuxtJS ke kotak masuk surel Anda setiap bulannya', + video: 'Video diproduksi oleh {company}, unduh {cheatSheet} gratis dari mereka.', + cheatSheet: 'cheatsheet Nuxt' + }, + why: { + title: 'Mengapa {nuxt}', + try_nuxtjs_online: 'Coba NuxtJS secara Daring', + enjoyable: { + title: 'Menyenangkan', + description: + 'Fokus utama kami adalah pengalaman pengembang. Kami menyukai Nuxt.js dan terus meningkatkan kerangka kerja ini sehingga Anda juga akan menyukainya! {break} Harapkan solusi yang menarik, pesan kesalahan deskriptif, standar kuat dan dokumentasi terperinci. Jika ada pertanyaan atau masalah, komunitas kami akan membantu Anda.' + }, + modular: { + title: 'Modular', + description: + 'Nuxt didasarkan pada arsitektur modular yang efektif. Anda dapat memilih dari lebih dari 50 modul untuk membuat pengembangan Anda lebih cepat dan lebih mudah. Anda tidak harus "reinventing the wheel" untuk mendapatkan manfaat PWA, menambahkan Google Analytics ke halaman Anda atau menghasilkan peta situs.' + }, + performant: { + title: 'Kinerja', + description: + 'Dengan Nuxt.js, aplikasi Anda akan dioptimalkan secara otomatis. Kami melakukan yang terbaik untuk membangun aplikasi yang efisien dengan memanfaatkan praktik terbaik Vue.js dan Node.js. Untuk membuang setiap bagian yang tidak perlu dari aplikasi Anda, Nuxt menyertakan penganalisa bundel dan banyak peluang untuk menyempurnakan aplikasi Anda.' + } + }, + companies: { + title: 'Siapa yang menggunakan {nuxt}' + }, + modes: { + title: '{nuxt} rendering', + ssr: { + title: 'Server Side Rendered', + description: + 'Mode paling populer untuk Nuxt. Dengan SSR, juga disebut mode "universal" atau "isomorphic", server Node.js akan digunakan untuk mengirimkan HTML berdasarkan komponen Vue Anda ke klien alih-alih JavaScript murni. Menggunakan SSR membawa keuntungan besar seperti peningkatan SEO, UX yang lebih baik, dan lebih banyak peluang (dibandingkan dengan Vue SPA tradisional). {Break} Dikarenakan menerapkan SSR dari awal bisa jadi sangat menjemukan, Nuxt.js sudah memiliki dukungan penuh untuk SSR dan dirancang untuk terhindar dari kesulitan-kesulitan tersembunyi yang umum terjadi.' + }, + ssg: { + title: 'Generate Secara Statis', + description: + 'Static Site Generation (alias JAMStack) adalah topik yang banyak dibicarakan saat ini. Alih-alih beralih ke kerangka kerja lain dan menghabiskan waktu untuk membiasakan diri, mengapa tidak membunuh dua burung dengan satu batu? {proverbial} Nuxt.js mendukung pembuatan situs web statis berdasarkan aplikasi Vue Anda. Ini adalah "yang terbaik dari kedua dunia" karena Anda tidak memerlukan server tetapi masih memiliki manfaat SEO karena Nuxt akan melakukan pra-render terhadap semua halaman Anda dan menyertakan HTML yang diperlukan. Anda juga dapat men-deploy halaman yang dihasilkan dengan mudah ke Netlify atau GitHub.', + proverbial: 'hanya pepatah' + } + }, + sponsors: { + title: 'Menjadi Sponsor', + description: + 'NuxtJS adalah proyek sumber terbuka berlisensi MIT dan sepenuhnya gratis untuk digunakan. Namun, jumlah upaya yang diperlukan untuk mempertahankan dan mengembangkan fitur-fitur baru untuk proyek ini tidak memungkinkan untuk dilakukan secara berkelanjutan tanpa dukungan keuangan yang memadai. Jika Anda menjalankan bisnis dan menggunakan Nuxt dalam produk Anda serta menghasilkan pendapatan, secara bisnis, masuk akal bagi Anda untuk mensponsori pengembangan Nuxt: memastikan proyek yang diandalkan produk Anda tetap sehat dan dipelihara secara aktif. Hal ini juga dapat membantu exposure Anda di komunitas Vue/Nuxt dan membuat Anda lebih mudah untuk menarik pengembang Vue/Nuxt. Jika Anda adalah pengguna individu dan telah menikmati produktivitas menggunakan Nuxt, pertimbangkan untuk memberi donasi sebagai tanda penghargaan.', + become_a_sponsor: 'Menjadi sponsor' + }, + newsletter: { + title: 'Buletin {nuxt}', + description: 'Dapatkan berita Nuxt terbaru ke kotak masuk surel Anda, dikurasi oleh tim NuxtJS.', + form: { + email: 'Alamat Surel', + subscribing: 'Berlangganan...', + subscribe: 'Langganan', + subscribed_messages: { + pre: 'Pesan untuk mengonfirmasi langganan Anda telah dikirim', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'Desain NuxtJS', + description: 'Unduh sumber daya desain NuxtJS (SVG, ikon, emoji, dan favicon).' + }, + title: 'Desain {nuxt}', + description: + 'NuxtJS adalah proyek open source berlisensi MIT dan sepenuhnya gratis untuk digunakan. {break} Anda dapat dengan bebas menggunakan logo kami selama Anda menyebutkan NuxtJS dan mencantumkan tautan ke nuxtjs.org.', + other_download_message: 'Anda juga dapat mengunduh berkas {favicon} atau {sketch} kami.' + }, + resources: { + meta: { + title: 'Sumber Daya NuxtJS', + description: + 'Temukan panel sumber daya yang dibuat oleh mitra kami. Dengan menggunakan tautan sumber daya afiliasi itu, Anda membantu kami memelihara dan mengembangkan Kerangka Sumber Terbuka.' + }, + title: 'Sumber Daya {nuxt}', + description: + 'Temukan panel sumber daya yang dibuat oleh mitra kami. Dengan menggunakan tautan sumber daya afiliasi mereka, Anda membantu kami menjaga dan mengembangkan Kerangka Sumber Terbuka.', + themes: { + title: 'Tema' + }, + videos: { + title: 'Video Kursus' + } + }, + shop: { + meta: { + title: 'Toko NuxtJS', + description: + 'Anda ingin mendukung proyek NuxtJS dan menunjukkan cinta Anda kepada seluruh komunitas? Berikut produk kami dengan kualitas terbaik yang pernah ada!' + }, + title: 'Toko {nuxt}', + description: + 'Anda ingin mendukung proyek NuxtJS dan menunjukkan cinta Anda kepada seluruh komunitas? {Break} Ini produk kami dengan kualitas terbaik yang pernah ada!', + button: 'Segera hadir' + }, + team: { + meta: { + title: 'Tim NuxtJS', + description: + 'NuxtJS memiliki tim yang sangat aktif dan sibuk yang terus berupaya untuk mendorong perkembangan Nuxt.' + }, + title: 'Tim {nuxt}', + description: + 'Pengembangan NuxtJS dan ekosistemnya dipandu oleh tim internasional. Kami memiliki tim yang sangat aktif dan sibuk yang terus berupaya untuk mendorong perkembangan Nuxt.' + }, + themes: { + meta: { + title: 'Tema NuxtJS', + description: '' + }, + title: 'Tema {nuxt}', + description: + 'Dengan tema di bawah ini yang dibangun oleh mitra kami dari Tim Kreatif dan Hutan Tema Anda dapat melihat bagaimana aplikasi dunia nyata dibangun, dengan Nuxt.js menumpuk di belakang.', + button: 'Dapatkan harga' + }, + 'video-courses': { + meta: { + title: 'Video Kursus NuxtJS', + description: + 'Dengan kursus video di bawah ini yang dibuat oleh mitra kami VueSchool, Anda dapat menemukan dan mempelajari lebih lanjut tentang kerangka kerja Nuxt.js.' + }, + title: 'Video Kursus {nuxt}', + description: + 'Dengan kursus video di bawah ini yang dibuat oleh mitra kami VueSchool Anda dapat menemukan dan mempelajari lebih lanjut tentang kerangka kerja Nuxt.js.', + cta: { + discover: 'Discover vueschool', + start: 'MULAI KURSUS' + } + }, + sponsor: { + meta: { + title: 'Sponsor Pengembang NuxtJS', + description: + 'Anda dapat mendukung pengembangan NuxtJS melalui metode yang berbeda dan memastikan pembaruan berkala pada kerangka kerja ini.' + }, + title: 'Sponsor Pengembang {nuxt}', + description: + 'NuxtJS adalah proyek sumber terbuka berlisensi MIT dan sepenuhnya gratis untuk digunakan. {Break} Namun, jumlah upaya yang diperlukan untuk mempertahankan dan mengembangkan fitur baru untuk proyek ini tidak dapat dilakukan secara berkelanjutan tanpa dukungan keuangan yang memadai. {Break} Anda dapat mendukung pengembangan NuxtJS melalui metode berikut:', + donations: { + title: 'Satu kali donasi', + description: 'Kami menerima donasi melalui saluran ini' + }, + pledges: { + title: 'Janji Berulang', + description: + 'Janji berulang datang dengan tunjangan eksklusif, mis. membuat nama Anda terdaftar di repositori NuxtJS GitHub, atau menempatkan logo perusahaan Anda di situs web ini. Menjadi nuxter atau sponsor melalui {opencollective} (masuk ke dana dengan model pengeluaran transparan yang mendukung upaya dan acara komunitas).' + }, + become_a_sponsor: 'Menjadi sponsor' + }, + support: { + meta: { + title: 'Dukungan NuxtJS', + description: 'Tim NuxtJS kami sekarang menawarkan layanan konsultasi resmi untuk aplikasi NuxtJS Anda.' + }, + title: 'Konsultasi {nuxt} Dukungan', + description: + '{team} kami sekarang menawarkan layanan konsultasi resmi untuk aplikasi NuxtJS Anda. {Break} Kami menawarkan layanan berbeda tergantung kebutuhan Anda, dari dukungan teknis hingga pengembangan kustom. Anda dapat mengharapkan balasan dalam satu hari kerja, kami dapat menandatangani Perjanjian Larangan Pengungkapan Informasi Rahasia (_Non-Disclosure Agreement_) khusus dan Anda bisa mendapatkan pengembalian dana penuh jika Anda tidak puas dengan layanan kami.', + technical: { + title: 'Dukungan teknis', + description: + 'Dapatkan audit proyek, penerapan aplikasi, pengembangan kustom, dan dukungan teknis dari tim NuxtJS.', + start: 'Memulai obrolan', + partner: { + pre: 'Kami bermitra dengan', + post: 'untuk menawarkan layanan ini sehingga kami dapat fokus membantu Anda secepat mungkin.' + } + }, + entreprise: { + title: 'untuk perusahaan', + description: + 'NuxtJS dan pengelola ribuan paket lainnya bekerja dengan Tidelift untuk memberikan satu langganan perusahaan yang mencakup semua sumber terbuka yang Anda gunakan. {Break} Jika Anda ingin fleksibilitas open source dan kepercayaan diri dari perangkat lunak kelas komersial, ini tepat untuk Anda.', + partner: { + pre: 'Tersedia sebagai bagian dari', + post: 'subscription.' + }, + learn_more: 'Pelajari lebih lanjut', + request_a_demo: 'Minta demo' + } + }, + blog: { + meta: { + title: 'Blog NuxtJS', + description: 'Temukan artikel dari tim inti NuxtJS dan kontributor NuxtJS tentang NuxtJS, termasuk tips dan trik!' + }, + title: 'Blog {nuxt}', + description: 'Temukan artikel tentang NuxtJS dari {nuxtTeam} dan {nuxtCommunity} NuxtJS, termasuk tips dan trik!', + nuxt_team: 'Tim NuxtJS', + nuxt_community: 'Komunitas Nuxt.js', + contribute: 'Menemukan kesalahan atau ingin berkontribusi pada pengeposan blog ini?' + }, + guide: { + release_notes: 'Catatan Rilis', + toc_title: 'Di halaman ini' + }, + quiz: { + title: 'Kuis' + }, + tryNewDocs: { + msg1: 'Ingin melihat dokumen baru kami? ', + link: 'dokumen baru', + msg2: ' kami sekarang dalam versi beta. Selamat bersenang-senang!' + }, + contribute: { + title: 'Kontributor', + docs: 'Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini?', + blog: 'Jumpa kesalahan atau ingin berkontribusi pada posting blog ini?', + edit_on_github: 'Sunting halaman ini di GitHub!', + msg1: 'Kontribusi untuk halaman ini sekarang ditutup. Jika Anda ingin berkontribusi, silakan periksa ', + link: 'dokumen baru' + }, + example: { + intro: 'Dalam contoh berikut:' + }, + codeSandbox: { + open: 'Buka CodeSandbox' + }, + content: { + guide: { + prologue: 'Prolog', + 'getting-started': 'Memulai' + }, + api: { + essential: 'Penting', + pages: 'Halaman', + components: 'Komponen', + utils: 'Utilitas', + configuration: 'Konfigurasi', + programmatically: 'Secara Terprogram', + internals: 'Internal' + }, + examples: { + essentials: 'Penting', + customization: 'Kustomisasi', + advanced: 'Lanjutan' + }, + faq: { + configuration: 'Konfigurasi', + development: 'Development', + deployment: 'Deployment' + }, + guides: { + 'get-started': 'Memulai', + concepts: 'Konsep', + features: 'Fitur', + 'directory-structure': 'Struktur Direktori', + 'configuration-glossary': 'Konfigurasi Glosarium', + 'internals-glossary': 'Internal Glosarium', + 'components-glossary': 'Komponen Glosarium' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Konsultasi & Training', + sponsorNuxt: 'Donasi dan Menjadi Sponsor' + }, + about: { + title: 'Tentang', + team: 'Tim kami', + design: 'Kit desain', + contact: 'Kontak kami' + }, + support: { + title: 'Dukungan', + resources: 'Sumber Daya', + discord: 'Mengobrol dengan kami', + contributionGuide: 'Panduan kontribusi' + } + } + }, + cookies: { + consent: 'Kami menggunakan Cookie untuk menganalisis pengguna dan melakukan peningkatan pada halaman!', + linkLabel: 'Pelajari tentang cookie', + button: 'Mengerti' + } +} diff --git a/nuxtjs.org/i18n/index.js b/nuxtjs.org/i18n/index.js new file mode 100644 index 000000000..2c40e460d --- /dev/null +++ b/nuxtjs.org/i18n/index.js @@ -0,0 +1,80 @@ +export default [ + { + code: 'en', + iso: 'en-US', + file: 'en-US.js', + name: 'English' + }, + { + code: 'de', + iso: 'de-DE', + file: 'de-DE.js', + name: 'German' + }, + { + code: 'es', + iso: 'es-ES', + file: 'es-ES.js', + name: 'Spanish' + }, + { + code: 'fr', + iso: 'fr-FR', + file: 'fr-FR.js', + name: 'French' + }, + { + code: 'fa', + iso: 'fa-IR', + file: 'fa-IR.js', + name: 'Farsi' + }, + { + code: 'ja', + iso: 'ja-JP', + file: 'ja-JP.js', + name: 'Japanese' + }, + { + code: 'ko', + iso: 'ko-KR', + file: 'ko-KR.js', + name: 'Korean' + }, + { + code: 'ne', + iso: 'ne-NP', + file: 'ne-NP.js', + name: 'Nepali' + }, + { + code: 'nl', + iso: 'nl-BE', + file: 'nl-BE.js', + name: 'Dutch' + }, + { + code: 'pl', + iso: 'pl-PL', + file: 'pl-PL.js', + name: 'Polish' + }, + { + code: 'ru', + iso: 'ru-RU', + file: 'ru-RU.js', + name: 'Russian' + }, + { + code: 'tr', + iso: 'tr-TR', + file: 'tr-TR.js', + name: 'Turkish' + }, + { + code: 'zh', + iso: 'zh-CN', + file: 'zh-CN.js', + name: 'Chinese' + } +] diff --git a/nuxtjs.org/i18n/ja-JP.js b/nuxtjs.org/i18n/ja-JP.js new file mode 100644 index 000000000..c3cb8e6d5 --- /dev/null +++ b/nuxtjs.org/i18n/ja-JP.js @@ -0,0 +1,337 @@ +export default { + common: { + an_error_occurred: 'エラーが発生しました', + page_not_found: 'ページが見つかりません', + please_define_title: 'Frontmatter 内の title を定義してください', + please_define_description: 'Frontmatter 内の description を定義してください', + search: '検索 ("/" でフォーカス)', + version: 'バージョン' + }, + iso: 'ja', + links: { + download: 'ダウンロード', + live_edit: 'ライブ編集' + }, + header: { + links: [ + { + name: 'ドキュメント', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: '例', + icon: 'code', + slug: 'examples' + }, + { + name: 'Resources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'ブログ', + icon: 'blog', + slug: 'blog' + }, + { + name: 'ビデオコース', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: '検索 ("/" でフォーカス)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - ユニバーサル Vue.js アプリケーション', + description: + 'Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的ファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです!' + }, + welcome: { + title: '使いやすい {br} {frameworkType} フレームワーク', + description: + 'NuxtJS を使用し自信を持って次の Vue.js アプリケーションをビルドしましょう。ウェブ開発をシンプルかつ強力にする{openSource}フレームワークです。', + openSource: 'オープンソース', + get_started: 'はじめる', + get_updates: '毎月 NuxtJS の更新を受信します', + video: '動画は {company} による提供で、彼らの {cheatSheet} は無料でダウンロードできます。', + cheatSheet: 'Nuxt チートシート.' + }, + why: { + title: 'なぜ {nuxt} なのか?', + try_nuxtjs_online: 'Nuxt.js をオンラインで試す', + enjoyable: { + title: '楽しみ', + description: + '私たちのメインフォーカスは開発者体験です。私たちは Nuxt.js が好きで、継続的にフレームワークの改善をしているため、あなたも好きになることでしょう!{break} 魅力的な解決策や、説明的なエラーメッセージ、強力なデフォルト設定、詳細なドキュメントが待っています。もし質問や問題が発生した場合、私たちの有用なコミュニティが助けてくれるでしょう。' + }, + modular: { + title: 'モジュール', + description: + 'Nuxt は強力なモジュール構造に基づいています。開発をより早く簡単にするために、50を超えるモジュールから選ぶことができます。PWA の利点を得るため、ページに Google アナリティクスを追加するため、サイトマップの生成のために車輪の再発明をする必要はありません。' + }, + performant: { + title: 'パフォーマンス', + description: + 'Nuxt.js は、あなたのアプリケーションをすぐに最適化することでしょう。Vue.js と Node.js のベストプラクティスを利用することで、パフォーマンスの高いアプリケーションを構築することに最善を尽くします。 アプリケーションから不要な部分を絞りだすために、Nuxt はバンドルアナライザや多くの微調整の機会を含んでいます。' + } + }, + companies: { + title: '{nuxt} を使っている企業 ' + }, + modes: { + title: '{nuxt} のレンダリング', + ssr: { + title: 'サーバーサイドレンダリング', + description: + 'Nuxt で一番人気のモードです。サーバーサイドレンダリングでは「ユニバーサル」または「アイソモーフィック」モードと呼ばれ、Node.js サーバーではピュア JavaScript の代わりに Vue コンポーネントベースの HTML をクライアントに配信するために利用しています。サーバーサイドレンダリングを利用すると従来の Vue SPA と比較し SEO が大幅に向上し、UX がよくなり、より多くの機会が増えます。{break}サーバーサイドレンダリングを自分で実装するのは非常に面倒です。Nuxt.js はそのまま利用でき、よくある落とし穴を回避します。' + }, + ssg: { + title: '静的ファイルの生成', + description: + '静的サイト生成は現在非常に注目されているトピックです(JAMStack として知られます)。別のフレームワークに切り替えて慣れるのに時間を費やす代わりに、なぜ一石二鳥ではいけないのでしょうか?{proverbial} Nuxt.js はあなたの Vue アプリケーションに基づく静的ウェブサイトの生成をサポートします。Nuxt はすべてのページを事前にレンダリングしてインクルードするため、サーバーは必要ありませんが SEO の利点はあるという、いいとこ取りをしています。また、作成したページを Netlify または GitHub Pages に簡単に配置できます。', + proverbial: 'ただのことわざ' + } + }, + sponsors: { + title: 'スポンサー', + description: + 'Nuxt.js は MIT ライセンスのオープンソースプロジェクトで、完全無料で使用できます。ただし、プロジェクトの新しい機能を維持および開発するために必要な作業は、適切な資金援助なしには持続できません。もし、あなたがビジネスで営利目的の製品に Nuxt を使用しているのであれば、Nuxt の開発をサポートすることは理に適っています。サポートいただくことで、Nuxt プロジェクトを健全でアクティブに維持することができます。また、サポートにより Vue/Nuxt コミュニティに露出することで、Vue/Nuxt 開発者を引きつけやすくなります。もし、あなたが個人ユーザーで Nuxt を使用した開発を楽しんでいるのであれば、感謝の印として寄付を検討いただけると幸いです。', + become_a_sponsor: 'スポンサーになる' + }, + newsletter: { + title: '{nuxt} ニュースレター', + description: 'コアチームとコントリビューターがキュレーションした最新の Nuxt のニュースをメールで受信できます。', + form: { + email: 'メールアドレス', + subscribing: '送信中...', + subscribe: '購読する', + subscribed_messages: { + pre: '購読を確認するメールを', + post: 'に送信しました 💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS のデザイン', + description: 'NuxtJS のデザインリソース(SVG、icons、emoji や favicon)をダウンロードする' + }, + title: '{nuxt} のデザイン', + description: + 'NuxtJS は MIT ライセンスのオープンソースプロジェクトであり、完全に無料で使えます。{break} NuxtJS に言及し、nuxtjs.org にリンクしている限り、ロゴを自由に使えます。', + other_download_message: 'また、{favicon} や {sketch} ファイルもダウンロードできます。' + }, + resources: { + meta: { + title: 'NuxtJS のリソース', + description: + 'パートナーが作成したリソースパネルをご覧ください。もしそれらのアフィリエイトリソースリンクを使っていただけたら、オープンソースフレームワークの維持と開発を支援につながります。' + }, + title: '{nuxt} のリソース', + description: + 'パートナーが作成したリソースパネルをご覧ください。もしそれらのアフィリエイトリソースリンクを使っていただけたら、オープンソースフレームワークの維持と開発を支援につながります。', + themes: { + title: 'テーマ' + }, + videos: { + title: 'ビデオコース' + } + }, + shop: { + meta: { + title: 'NuxtJS ショップ', + description: + 'NuxtJS プロジェクトをサポートし、コミュニティの他のメンバーに愛を示したいですか? これまでで最高品質のプロダクトをご紹介します。' + }, + title: '{nuxt} ショップ', + description: + 'NuxtJS プロジェクトをサポートし、コミュニティの他のメンバーに愛を示したいですか? これまでで最高品質のプロダクトをご紹介します!', + button: 'Coming soon' + }, + team: { + meta: { + title: 'NuxtJS チーム', + description: 'NuxtJS には非常に活発で熱心なチームがあり、Nuxt を前進させるために絶えず努力しています。' + }, + title: '{nuxt} チーム', + description: + 'NuxtJS とそのエコシステムの開発は国際的なチームによって行われています。 私たちには非常に活発で熱心なチームがあり、Nuxt を前進させるために絶えず努力しています。' + }, + themes: { + meta: { + title: 'NuxtJS テーマ', + description: + 'パートナーの CreativeTim と ThemeForest によって作成された以下のテーマを使用すると、Nuxt.js スタックを背後に実際のアプリケーションがどのように作成されているかを確認できます。' + }, + title: '{nuxt} テーマ', + description: + 'パートナーの CreativeTim と ThemeForest によって作成された以下のテーマを使用すると、Nuxt.js スタックを背後に実際のアプリケーションがどのように作成されているかを確認できます。', + button: '取得する' + }, + 'video-courses': { + meta: { + title: 'NuxtJS のビデオコース', + description: + 'パートナーの VueSchool が作成した以下のビデオコースを使用すると、Nuxt.js フレームワークについて詳しく知ることができます。' + }, + title: '{nuxt} ビデオコース', + description: + 'パートナーの VueSchool が作成した以下のビデオコースを使用すると、Nuxt.js フレームワークについて詳しく知ることができます。', + cta: { + discover: 'vueschool で発見する', + start: 'コースをはじめる' + } + }, + sponsor: { + meta: { + title: 'NuxtJS の開発スポンサー', + description: 'さまざまな方法で NuxtJS の開発をサポートし、フレームワークを定期的に更新することができます。' + }, + title: '{nuxt} 開発スポンサー', + description: + 'NuxtJS は MIT ライセンスのオープンソースプロジェクトであり完全に無料で使用できます。{break} ただし、プロジェクトの新機能の維持と開発に必要な労力は適切な財政的支援なしには持続できません。{break} NuxtJS の開発は次の方法でサポートできます:', + donations: { + title: '一度きりの寄付', + description: 'これらのチャネルを通して寄付を受け付けています' + }, + pledges: { + title: 'リカーリングの誓約', + description: + 'リカーリングの誓約には排他的な特典(NuxtJS の GitHub リポジトリにあなたの名前を掲載するか、この Web サイトに会社のロゴを掲載します)が付属しています。{opencollective}(コミュニティの取り組みやイベントをサポートする透明な経費モデルを備えたファンドに参加しています)を介して nuxter またはスポンサーになれます。' + }, + become_a_sponsor: 'スポンサーになる' + }, + support: { + meta: { + title: 'NuxtJS サポート', + description: 'NuxtJS チームは、NuxtJS アプリケーションの公式コンサルティングサービスを提供しています。' + }, + title: '{nuxt} サポートのコンサルティング', + description: + '現在 {team} は NuxtJS アプリケーションの公式コンサルティングサービスを提供しています。{break} テクニカルサポートからカスタム開発までニーズに応じてさまざまなサービスを提供しています。1 営業日以内に返信しカスタム NDA に署名できます。サービスにご満足いただけない場合は全額払い戻しを受けることができます。', + technical: { + title: 'テクニカルサポート', + description: + 'プロジェクト監査、アプリのデプロイ、カスタム開発、テクニカルサポートを NuxtJS チームから受けられます。', + start: 'チャットを始める', + partner: { + pre: '私たちはこれらのサービスを提供するために', + post: 'と提携しましたので、できるだけ早くサポートすることに集中できます。' + } + }, + entreprise: { + title: '企業向け', + description: + 'NuxtJS と他の何千ものパッケージのメンテナーは、Tidelift と協力して使用するすべてのオープンソースをカバーする 1 つのエンタープライズサブスクリプションを提供しています。{break} オープンソースの柔軟性と商用グレードのソフトウェアの信頼性が必要な場合、Tidelift はあなたのためにあります。', + partner: { + pre: 'サブスクリプションの一部として', + post: 'を利用できます。' + }, + learn_more: '詳細', + request_a_demo: 'デモをリクエストする' + } + }, + blog: { + meta: { + title: 'NuxtJS ブログ', + description: 'NuxtJS チームと NuxtJS コミュニティの NuxtJS に関する記事、ヒントとコツが含まれています!' + }, + title: '{nuxt} ブログ', + description: 'NuxtJS について {nuxtTeam} と {nuxtCommunity} のヒントとコツが含まれています!', + nuxt_team: 'NuxtJS チーム', + nuxt_community: 'Nuxt.js コミュニティ', + contribute: '間違いを見つけた、またはこのブログ投稿に貢献したいですか?' + }, + guide: { + release_notes: 'リリースノート', + toc_title: 'このページで' + }, + quiz: { + title: 'クイズ' + }, + tryNewDocs: { + msg1: '新しいドキュメントを見たいですか?私たちの', + link: '新しいドキュメント', + msg2: 'は今ベータ版です。楽しんでください!' + }, + contribute: { + title: 'コントリビューター', + docs: '間違いを見つけた、またはドキュメントに貢献したいですか?', + blog: '間違いを見つけた、またはこのブログ投稿に貢献したいですか?', + edit_on_github: 'GitHub でこのページを編集する', + msg1: 'このページへの貢献は受け付けていません。もし貢献したい場合は新しいドキュメントをチェックアウトしてください', + link: '新しいドキュメント' + }, + example: { + intro: 'この例では:' + }, + codeSandbox: { + open: 'CodeSandbox を開く' + }, + content: { + guide: { + prologue: 'プロローグ', + 'getting-started': 'はじめる' + }, + api: { + essential: 'エッセンシャル', + pages: 'ページ', + components: 'コンポーネント', + utils: 'ユーティリティ', + configuration: '設定', + programmatically: 'プログラムで使う', + internals: '内部' + }, + examples: { + essentials: 'エッセンシャル', + customization: 'カスタマイズ', + advanced: '上級' + }, + faq: { + configuration: '設定', + development: '開発', + deployment: 'デプロイ' + }, + guides: { + 'get-started': 'はじめる', + concepts: 'コンセプト', + features: '機能', + 'directory-structure': 'ディレクトリ構造', + 'configuration-glossary': '設定用語集', + 'internals-glossary': '内部の用語集', + 'components-glossary': 'コンポーネント用語集' + } + }, + footer: { + links: { + discover: { + title: '発見', + shop: 'グッズストア', + consulting: 'トレーニングとコンサルティング', + sponsorNuxt: 'スポンサーと寄付' + }, + about: { + title: 'About', + team: '私たちのチーム', + design: 'デザインキット', + contact: 'お問い合わせ' + }, + support: { + title: 'サポート', + resources: 'リソース', + discord: 'チャット', + contributionGuide: '貢献ガイド' + } + } + }, + cookies: { + consent: 'ユーザー分析とページ上の改善の目的でクッキーを使っています!', + linkLabel: 'クッキーの詳細', + button: 'わかりました' + } +} diff --git a/nuxtjs.org/i18n/ko-KO.js b/nuxtjs.org/i18n/ko-KO.js new file mode 100644 index 000000000..9016ad53d --- /dev/null +++ b/nuxtjs.org/i18n/ko-KO.js @@ -0,0 +1,342 @@ +import ko from '~docus-i18n/ko-KO' + +export default { + ...ko, + common: { + an_error_occurred: '에러가 발생했습니다.', + page_not_found: '페이지를 찾을 수 없습니다.', + please_define_title: 'front matter에 title을 정의해주세요.', + please_define_description: 'front matter에 description을 정의해주세요.', + search: '검색 ("/" to focus)', + version: '버전' + }, + iso: 'ko', + + links: { + download: '다운로드', + live_edit: '라이브 수정' + }, + header: { + links: [ + { + name: 'Docs', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Examples', + icon: 'code', + slug: 'examples' + }, + { + name: 'Resources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Video Courses', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: '검색 ("/" to focus)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - Vue.js 프레임워크', + description: + 'Nuxt.js는 Vue.js 애플리케이션 개발을 즐겁게 하는 데 필요한 모든 구성을 사전 설정합니다. Nuxt.js는 범용, SPA 및 정적 생성 애플리케이션을 만들 수 있습니다.' + }, + welcome: { + title: '직관적인 {br} {frameworkType} 프레임워크', + description: + 'NuxtJS를 사용하여 신뢰 있는 Vue.js 애플리케이션을 구축하세요. 웹 개발을 간단하고 강력하게 만드는 오픈 소스 프레임워크입니다.', + openSource: 'open source', + get_started: '시작하기', + get_updates: '매달 NuxtJS 업데이트 사항을 메일에서 확인하세요', + video: '해당 비디오는 {company}가 제작하였고, {cheatSheet}에서 무료로 받으실 수 있습니다.', + cheatSheet: 'Nuxt Cheat Sheet.' + }, + why: { + title: '왜 {nuxt} 일까요?', + try_nuxtjs_online: 'NuxtJS Online 시작하기', + enjoyable: { + title: 'Enjoyable', + description: + '우리는 개발자 경험을 중시합니다. Nuxt.js를 사랑하는 마음으로 이 프레임워크를 개발하고 있으며, 여러분들도 이 프레임워크를 사랑할 수 있으리라 생각합니다{break} 매력적인 솔루션, 자세한 에러 메세지, 강력한 디폴트들과 상세한 문서화를 기대해주세요. 질문이나 이슈가 있으시다면, 우리의 커뮤니티가 여러분을 기꺼이 도와드리겠습니다.' + }, + modular: { + title: 'Modular', + description: + 'Nuxt.js는 강력한 모듈 아키텍쳐에 기반해 있습니다. Nuxt.js에서 여러분은 개발을 더 빠르고 쉽게 만들기 위한 50개 이상의 모듈을 고르실 수 있습니다. PWA 베네핏을 받거나, Google Analytics를 페이지에 추가하거나, 사이트 맵을 생성하기 위해 시간을 낭비할 필요가 없습니다.' + }, + performant: { + title: 'Performant', + description: + '여러분은 Nuxt.js를 사용해 즉시 애플리케이션을 최적화시킬 수 있습니다. 저희는 Vue.js와 Node.js의 모범 사례를 활용하여 고성능 애플리케이션을 구축하기 위해 최선을 다하고 있습니다. 앱에서 불필요한 모든 비트를 줄이기 위해 Nuxt는 번들 분석기와 앱을 미세 조정할 수 있는 많은 수단을 가지고 있습니다.' + } + }, + companies: { + title: '누가 {nuxt} 를 사용하고 있나요?' + }, + modes: { + title: '{nuxt} 렌더링', + ssr: { + title: '서버 사이드 렌더링', + description: + '가장 Nuxt에서 인기있는 모드입니다. "범용(universal)" 혹은 "동형(isomorphic)" 모드라고도 불리는 SSR로, Node.js 서버는 순수 자바스크립트 대신 Vue 컴포넌트에 기반한 HTML을 클라이언트에 전달합니다. SSR로 기존 Vue SPA와 비교했을 때 SEO는 크게 개선될 수 있고, 더 나은 UX 뿐 아니라 더 많은 혜택을 얻을 수 있습니다. {break} 여러분이 직접 SSR을 구현하는 것은 매우 귀찮은 작업일 수 있기 때문에, Nuxt.js는 바로 여기에 대한 모든 지원을 제공하며 일반적인 위험요소들을 처리할 것입니다.' + }, + ssg: { + title: '정적 사이트 생성', + description: + 'JAMStack이라고 불리는 정적 사이트 생성(Static Site Generation)은 지금 아주 핫한 주제 중 하나입니다. 다른 프레임워크로 바꾸어 거기에 익숙해지는 데 시간을 쓰는 대신에, {proverbial}해보시는건 어떤가요? Nuxt.js는 Vue 애플리케이션에 기반한 정적 웹 사이트 생성을 지원합니다. Nuxt는 모든 페이지를 사전 렌더링하고 필요한 HTML을 포함시킬 수 있으므로, "양쪽에 최선"으로 서버 없이 SEO 혜택을 가질 수 있습니다.', + proverbial: '일석이조' + } + }, + sponsors: { + title: '스폰서', + description: + 'NuxtJS 는 MIT 라이센스 오픈 소스 프로젝트이며 완전 무료입니다. 그러나 적절한 재정적 지원 없이는 프로젝트의 새로운 기능을 유지하고 개발하는 데 필요한 노력이 지속되기가 힘듭니다. 비즈니스를 운영하고 수익 창출 제품에서 Nuxt를 사용하는 경우 Nuxt 개발을 후원해주시는 것이 이상적일 것입니다. 이는 여러분의 제품이 의존하고 있는 이 프로젝트가 원활하게 유지될 수 있게 합니다. 또한 Vue/Nuxt 커뮤니티에 노출되는 데 도움이되며 Vue/Nuxt 개발자를 더 쉽게 구하는데 도움이 됩니다. 개인 사용자이고 Nuxt를 사용하는 것으로 생산성을 높이셨다면, 감사의 표시로 기부에 대해 생각해주세요.', + become_a_sponsor: '스폰서되기' + }, + newsletter: { + title: '{nuxt} Newsletter', + description: '저희 코어 팀과 컨트리뷰터들이 작성한 Nuxt의 최신 뉴스를 받아보세요.', + form: { + email: 'Email', + subscribing: '구독중...', + subscribe: '구독하기', + subscribed_messages: { + pre: '구독 확인용 이메일이 주소로 전송되었습니다.', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS Design', + description: 'Download NuxtJS design resources (SVG, icons, emoji and favicon).' + }, + title: '{nuxt} Design', + description: + 'NuxtJS is an MIT licensed open source project and completely free to use. {break} You can freely use our logos as long as you mention NuxtJS and link to nuxtjs.org.', + other_download_message: 'You can also download our {favicon} or our {sketch} file.' + }, + resources: { + meta: { + title: 'NuxtJS Resources', + description: + 'Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.' + }, + title: '{nuxt} Resources', + description: + 'Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.', + themes: { + title: 'Themes' + }, + videos: { + title: 'Video Courses' + } + }, + shop: { + meta: { + title: 'The NuxtJS Shop', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community? Here our products with the best quality ever!' + }, + title: 'The {nuxt} Shop', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community?{break} Here our products with the best quality ever!', + button: 'Coming soon' + }, + team: { + meta: { + title: 'NuxtJS Team', + description: 'NuxtJS has a very active and engaged team that is constantly striving to push Nuxt forward.' + }, + title: '{nuxt} Team', + description: + 'The development of NuxtJS and its ecosystem is guided by an international team. We have a very active and engaged team that is constantly striving to push Nuxt forward.' + }, + themes: { + meta: { + title: 'NuxtJS Themes', + description: + 'With the themes below built by our partners from Creative Tim and Theme Forest you can see how a real world application is built, with Nuxt.js stack behind.' + }, + title: '{nuxt} Themes', + description: + 'With the themes below built by our partners from Creative Tim and Theme Forest you can see how a real world application is built, with Nuxt.js stack behind.', + button: 'GET IT for' + }, + 'video-courses': { + meta: { + title: 'NuxtJS Video Courses', + description: + 'With the video courses below created by our partner VueSchool you can discover and learn more about the Nuxt.js Framework.' + }, + title: '{nuxt} Video Courses', + description: + 'With the video courses below created by our partner VueSchool you can discover and learn more about the Nuxt.js Framework.', + cta: { + discover: 'Discover vueschool', + start: 'START COURSE' + } + }, + sponsor: { + meta: { + title: 'Sponsor NuxtJS Development', + description: + 'You can support NuxtJS development via different methods and ensure regular updates to the framework.' + }, + title: 'Sponsor {nuxt} Development', + description: + 'NuxtJS is an MIT licensed open source project and completely free to use.{break} However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.{break} You can support NuxtJS development via the following methods:', + donations: { + title: 'One-time donations', + description: 'We accept donations through these channels' + }, + pledges: { + title: 'Recurring Pledges', + description: + 'Recurring pledges come with exclusive perks, e.g. having your name listed in the NuxtJS GitHub repository, or have your company logo placed on this website. Become a nuxter or sponsor via {opencollective} (goes into a fund with transparent expense models supporting community efforts and events).' + }, + become_a_sponsor: 'Become a sponsor' + }, + support: { + meta: { + title: 'The NuxtJS Support', + description: 'Our NuxtJS team now offers official consulting services for your NuxtJS applications.' + }, + title: 'Consulting {nuxt} Support', + description: + 'Our {team} now offers official consulting services for your NuxtJS applications.{break} We offer different services depending of your needs, from technical support to custom development. Expect a reply within one business day, we can sign custom NDA and you can get a full refund if you are not satisfied with our service.', + technical: { + title: 'Technical support', + description: + 'Get project audits, app deployments, custom development and technical support from the NuxtJS team.', + start: 'Start chat', + partner: { + pre: 'We partnered with', + post: 'to offer these services so we can focus on helping you as fast as possible.' + } + }, + entreprise: { + title: 'for enterprise', + description: + 'NuxtJS and the maintainers of thousands of other packages are working with Tidelift to deliver one enterprise subscription that covers all of the open source you use.{break} If you want the flexibility of open source and the confidence of commercial-grade software, this is for you.', + partner: { + pre: 'Available as part of the', + post: 'subscription.' + }, + learn_more: 'Learn more', + request_a_demo: 'Request a demo' + } + }, + blog: { + meta: { + title: 'NuxtJS Blog', + description: 'Discover articles from the NuxtJS team and NuxtJS Community about NuxtJS, tips and tricks included!' + }, + title: '{nuxt} Blog', + description: 'Discover articles from the {nuxtTeam} and {nuxtCommunity} about NuxtJS, tips and tricks included!', + nuxt_team: 'NuxtJS Team', + nuxt_community: 'Nuxt.js Community', + contribute: 'Caught a mistake or want to contribute to this blog post?' + }, + guide: { + release_notes: '릴리즈 노트', + toc_title: 'On this page' + }, + quiz: { + title: 'Quiz' + }, + tryNewDocs: { + msg1: 'Want to take a look at our new docs? Our ', + link: 'new docs', + msg2: 'are now in beta. Have fun!' + }, + contribute: { + title: 'Contributors', + docs: '잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요?', + blog: 'Caught a mistake or want to contribute to this blog post?', + edit_on_github: 'GitHub에서 이 페이지를 수정해주세요!', + msg1: 'Contribution for this page is now closed. If you would like to contribute please check out our', + link: 'new docs' + }, + example: { + intro: 'In this example:' + }, + codeSandbox: { + open: 'Open CodeSandbox' + }, + content: { + guide: { + prologue: 'Prologue', + 'getting-started': 'Getting Started' + }, + api: { + essential: 'Essential', + pages: 'Pages', + components: 'Components', + utils: 'Utils', + configuration: 'Configuration', + programmatically: 'Programmatically', + internals: 'Internals' + }, + examples: { + essentials: 'Essentials', + customization: 'Customization', + advanced: 'Advanced' + }, + faq: { + configuration: 'Configuration', + development: 'Development', + deployment: 'Deployment' + }, + guides: { + 'get-started': 'Get Started', + concepts: 'Concepts', + features: 'Features', + 'directory-structure': 'Directory Structure', + 'configuration-glossary': 'Configuration Glossary', + 'internals-glossary': 'Internals Glossary', + 'components-glossary': 'Components Glossary' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Training & consultancy', + sponsorNuxt: 'Sponsoring & donations' + }, + about: { + title: 'About', + team: 'Our team', + design: 'Design kit', + contact: 'Contact us' + }, + support: { + title: 'Support', + resources: 'Resources', + discord: 'Chat with us', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: 'We use Cookies for user analysis and on-page improvements!', + linkLabel: 'Learn about cookies', + button: 'Got it' + } +} diff --git a/nuxtjs.org/i18n/pt-BR.js b/nuxtjs.org/i18n/pt-BR.js new file mode 100644 index 000000000..e468e72ca --- /dev/null +++ b/nuxtjs.org/i18n/pt-BR.js @@ -0,0 +1,340 @@ +export default { + common: { + an_error_occurred: 'Ocorreu um erro', + page_not_found: 'Página não encontrada', + please_define_title: 'Defina um título no front matter, por favor', + please_define_description: 'Defina uma descrição no front matter, por favor', + search: 'Buscar ("/" para focar)', + version: 'Versão' + }, + iso: 'pt-BR', + + links: { + download: 'Baixar', + live_edit: 'Edição Ao Vivo' + }, + header: { + links: [ + { + name: 'Docs', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Exemplos', + icon: 'code', + slug: 'examples' + }, + { + name: 'Recursos', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Video Courses', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Buscar ("/" para focar)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - O Framework Vue Intuitivo', + description: + 'Construa sua próxima aplicação Vue.js com confiança utilizando NuxtJS. Um framework de código aberto que torna o desenvolvimento web simples e poderoso.' + }, + welcome: { + title: 'O Framework {br} {frameworkType} Intuitivo', + description: + 'Construa sua próxima aplicação Vue.js com confiança utilizando NuxtJS. Um framework de {openSource} que torna o desenvolvimento web simples e poderoso.', + openSource: 'código aberto', + get_started: 'Começar', + get_updates: 'Receba atualizações do NuxtJS no seu e-mail todos os meses', + video: 'Video produzido por {company}, baixe a {cheatSheet} deles.', + cheatSheet: 'folha grátis de dicas do Nuxt' + }, + why: { + title: 'Por que {nuxt}', + try_nuxtjs_online: 'Experiemente o NuxtJS Online', + enjoyable: { + title: 'Divertido', + description: + 'Nosso foco principal é a Experiência do Desenvolvedor. Adoramos o Nuxt.js e melhoramos continuamente o framework para que você também o adore! {break} Espere soluções atraentes, mensagens de erro descritivas, padrões poderosos e documentação detalhada. Se surgirem dúvidas ou problemas, nossa comunidade prestativa irá ajudá-lo(a).' + }, + modular: { + title: 'Modular', + description: + 'Nuxt é baseado em uma arquitetura modular poderosa. Você pode escolher entre mais de 50 módulos para tornar seu desenvolvimento mais rápido e fácil. Você não precisa reinventar a roda para obter os benefícios do PWA, adicionar o Google Analytics à sua página ou gerar um mapa do site.' + }, + performant: { + title: 'Performático', + description: + 'Com o Nuxt.js, seu aplicativo será otimizado imediatamente. Fazemos o nosso melhor para construir aplicativos de alto desempenho, utilizando as melhores práticas do Vue.js e Node.js. Para extrair cada bit desnecessário de seu aplicativo, o Nuxt inclui um analisador de pacotes e muitas oportunidades para ajustar seu aplicativo.' + } + }, + companies: { + title: 'Quem está usando {nuxt}' + }, + modes: { + title: 'Renderização do {nuxt}', + ssr: { + title: 'Renderizado no Servidor (SSR)', + description: + 'O modo mais popular para Nuxt. Com o SSR, também conhecido de modo "universal" ou "isomórfico", um servidor Node.js será utilizado para entregar ao cliente o HTML com base em seus componentes Vue, em vez de javascript puro. Usar SSR levará a um grande impulso no SEO, melhor UX e mais oportunidades (em comparação com uma SPA Vue tradicional). {break} Como implementar SSR por conta própria pode ser bem chato, o Nuxt.js oferece suporte completo pronto para uso e cuidará de erros comuns.' + }, + ssg: { + title: 'Gerado Estaticamente', + description: + 'Geração de Site Estático é um tópico muito falado no momento (também conhecido como JAMStack). Em vez de mudar para outro framework e perder tempo para conhecê-lo, por que não matar dois passáros com uma cajadada só? {proverbial} Nuxt.js suporta a geração de site estático baseado no seu aplicativo Vue. É o "melhor dos dois mundos", pois você não precisa de um servidor, mas ainda sim possui os benefícios de SEO porquê o Nuxt pré-renderizará todas as páginas e incluirá o HTML necessário. Além disso, você pode fazer o deploy das páginas geradas facilmente no Netlify ou GitHub Pages.', + proverbial: 'apenas um provérbio' + } + }, + sponsors: { + title: 'Patrocinadores', + description: + 'NuxtJS é um projeto de código aberto de licença MIT e de uso totalmente gratuito. No entanto, o esforço necessário para manter e desenvolver novos recursos para o projeto não é sustentável sem apoio financeiro adequado. Se você possui um negócio e está utilizando o Nuxt em um produto que gera receita, faz sentido para os negócios patrocinar o desenvolvimento do Nuxt: isso garante que o projeto do qual seu produto depende permaneça saudável e com manutenção ativa. Ele também pode ajudar sua exposição na comunidade Vue/Nuxt e torna mais fácil atrair desenvolvedores Vue/Nuxt. Se você é um usuário individual e tem aproveitado a produtividade de usar o Nuxt, considere fazer uma doação como um sinal de agradecimento.', + become_a_sponsor: 'Torne-se um patricionador' + }, + newsletter: { + title: '{nuxt} Newsletter', + description: + 'Receba as atualizações mais recentes do NuxtJS no seu e-mail, escolhidas cuidadosamente pelo time do NuxtJS.', + form: { + email: 'Email', + subscribing: 'Assinando...', + subscribe: 'Assine', + subscribed_messages: { + pre: 'Um e-mail para confirmar sua inscrição foi enviado para', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS Design', + description: 'Download NuxtJS design resources (SVG, icons, emoji and favicon).' + }, + title: '{nuxt} Design', + description: + 'NuxtJS é um projeto de código aberto de licença MIT e de uso totalmente gratuito. {break} Você pode utilizar nossos logotipos livremente, desde que mencione NuxtJS e faça um link para nuxtjs.org.', + other_download_message: 'Você também baixar nosso {favicon} ou nosso arquivo {sketch}.' + }, + resources: { + meta: { + title: 'NuxtJS Recursos', + description: + 'Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.' + }, + title: '{nuxt} Recursos', + description: + 'Descubra um painel de recursos feito por nossos parceiros. Ao usar esses links de recursos afiliados, você está nos ajudando a manter e desenvolver o Open Source Framework.', + themes: { + title: 'Temas' + }, + videos: { + title: 'Cursos em Vídeo' + } + }, + shop: { + meta: { + title: 'Loja NuxtJS', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community? Here our products with the best quality ever!' + }, + title: 'Loja {nuxt}', + description: + 'Quer apoiar o projeto NuxtJS e mostrar o seu amor ao resto da comunidade?{break} Aqui estão os nossos produtos de melhor qualidade!', + button: 'Coming soon' + }, + team: { + meta: { + title: 'NuxtJS Time', + description: 'NuxtJS has a very active and engaged team that is constantly striving to push Nuxt forward.' + }, + title: '{nuxt} Time', + description: + 'O desenvolvimento da NuxtJS e de seu ecossistema é orientado por uma equipe internacional. Temos uma equipe muito ativa e engajada que está constantemente se esforçando para levar a Nuxt adiante.' + }, + themes: { + meta: { + title: 'NuxtJS Temas', + description: + 'Com os temas abaixo, desenvolvidos por nossos parceiros da Creative Tim e Theme Forest, você pode ver como um aplicativo do mundo real é construído, utilizando a stack Nuxt.js.' + }, + title: '{nuxt} Temas', + description: + 'Com os temas abaixo, desenvolvidos por nossos parceiros da Creative Tim e Theme Forest, você pode ver como um aplicativo do mundo real é construído, utilizando a stack Nuxt.js.', + button: 'GET IT for' + }, + 'video-courses': { + meta: { + title: 'NuxtJS Cursos em Vídeo', + description: + 'Com os cursos em vídeo abaixo, criados por nosso parceiro VueSchool, você pode descobrir e aprender mais sobre o Framework Nuxt.js.' + }, + title: '{nuxt} Cursos em Vídeo', + description: + 'Com os cursos em vídeo abaixo, criados por nosso parceiro VueSchool, você pode descobrir e aprender mais sobre o Framework Nuxt.js.', + cta: { + discover: 'Conheça o vueschool', + start: 'INICIAR CURSO' + } + }, + sponsor: { + meta: { + title: 'Pratrocine o Desenvolvimento do NuxtJS', + description: + 'You can support NuxtJS development via different methods and ensure regular updates to the framework.' + }, + title: 'Pratrocine o Desenvolvimento do {nuxt}', + description: + 'NuxtJS é um projeto de código aberto de licença MIT e de uso totalmente gratuito.{break} No entanto, o esforço necessário para manter e desenvolver novos recursos para o projeto não é sustentável sem apoio financeiro adequado.{break} Você pode dar surpote ao desenvolvimento do NuxtJS pelos seguintes métodos:', + donations: { + title: 'Doações únicas', + description: 'Aceitamos doações por meio desses canais' + }, + pledges: { + title: 'Pagamentos Mensais', + description: + 'Os pagamentos mensais vêm com vantagens exclusivas, por exemplo, ter seu nome listado no repositório do NuxtJS no GitHub, ou ter o logotipo de sua empresa colocado neste site. Torne-se um nuxter ou patrocinador por meio de {opencollective} (vai para um fundo com modelos de despesas transparentes que apoiam os esforços e eventos da comunidade).' + }, + become_a_sponsor: 'Torne-se um patricionador' + }, + support: { + meta: { + title: 'NuxtJS Suporte', + description: 'Our NuxtJS team now offers official consulting services for your NuxtJS applications.' + }, + title: 'Assessoria {nuxt} Suporte', + description: + 'Nossa {team} oferece serviços de consultoria oficial para seus aplicativos NuxtJS.{break} Oferecemos diversos serviços, dependendo de suas necessidades, desde suporte técnico até desenvolvimento personalizado. Espere uma resposta dentro de um dia útil, podemos assinar um NDA personalizado e você pode obter um reembolso total se não ficar satisfeito com nosso serviço.', + technical: { + title: 'Suporte Técnico', + description: + 'Obtenha auditorias de projetos, deploy de aplicativos, desenvolvimento personalizado e suporte técnico da equipe NuxtJS.', + start: 'Iniciar chat', + partner: { + pre: 'Temos parceria com', + post: 'para oferecer esses serviços para que possamos nos concentrar em ajudá-lo o mais rápido possível.' + } + }, + entreprise: { + title: 'para empresas', + description: + 'O NuxtJS e milhares de mantenedores de outros pacotes estão trabalhando com a Tidelift para fornecer uma assinatura corporativa que cubra todo o código aberto que você usa.{break} Se você deseja a flexibilidade do código aberto e a confiança do software de nível comercial, isso é para voce.', + partner: { + pre: 'Disponível como parte da assinatura', + post: '.' + }, + learn_more: 'Descubra mais', + request_a_demo: 'Solicite uma demonstração' + } + }, + blog: { + meta: { + title: 'Blog do NuxtJS', + description: 'Discover articles from the NuxtJS team and NuxtJS Community about NuxtJS, tips and tricks included!' + }, + title: 'Blog do {nuxt}', + description: 'Descubra artigos da {nuxtTeam} e {nuxtCommunity} sobre NuxtJS, incluindo dicas e truques!', + nuxt_team: 'NuxtJS Team', + nuxt_community: 'Nuxt.js Community', + contribute: 'Encontrou um erro ou deseja contribuir para esta postagem?' + }, + guide: { + release_notes: 'Notas de Versão', + toc_title: 'Nesta página' + }, + quiz: { + title: 'Quiz' + }, + tryNewDocs: { + msg1: 'Quer experimentar o nova versão da documentação? Nossa ', + link: 'nova documentação', + msg2: 'já está em beta. Divirta-se!' + }, + contribute: { + title: 'Contribuidores', + docs: 'Encontrou um erro ou deseja contribuir para esta documentação?', + blog: 'Encontrou um erro ou deseja contribuir para esta postagem?', + edit_on_github: 'Edite esta página no GitHub!', + msg1: 'A contribuição para esta página está encerrada. Se você gostaria de contribuir, verifique nossa', + link: 'nova documentação, por favor.' + }, + example: { + intro: 'In this example:' + }, + codeSandbox: { + open: 'Abrir no CodeSandbox' + }, + content: { + guide: { + prologue: 'Prólogo', + 'getting-started': 'Para começar' + }, + api: { + essential: 'Essencial', + pages: 'Páginas', + components: 'Componentes', + utils: 'Utilidades', + configuration: 'Configuração', + programmatically: 'Programaticamente', + internals: 'Internals' + }, + examples: { + essentials: 'Essenciais', + customization: 'Customização', + advanced: 'Avançado' + }, + faq: { + configuration: 'Configuração', + development: 'Desenvolvimento', + deployment: 'Distribuição' + }, + guides: { + 'get-started': 'Para começar', + concepts: 'Conceitos', + features: 'Funcionalidades', + 'directory-structure': 'Estrutura de Diretórios', + 'configuration-glossary': 'Glossário de Configurações', + 'internals-glossary': 'Glossário de Internals', + 'components-glossary': 'Glossário de Componentes' + } + }, + footer: { + links: { + discover: { + title: 'Explorar', + shop: 'Loja de Mercadorias', + consulting: 'Treinamento e Consultoria', + sponsorNuxt: 'Patrocínio e Contribuição' + }, + about: { + title: 'About', + team: 'Nosso time', + design: 'Pacote de Designer', + contact: 'Contate-nos' + }, + support: { + title: 'Suporte', + resources: 'Recursos', + discord: 'Fale conosco', + contributionGuide: 'Como contribuir' + } + } + }, + cookies: { + consent: 'Usamos Cookies para análise do usuário e melhorias na página!', + linkLabel: 'Descubra mais sobre cookies', + button: 'Entendi' + } +} diff --git a/nuxtjs.org/i18n/ru-RU.js b/nuxtjs.org/i18n/ru-RU.js new file mode 100644 index 000000000..6a0115c4e --- /dev/null +++ b/nuxtjs.org/i18n/ru-RU.js @@ -0,0 +1,342 @@ +import ru from '~docus-i18n/ru-RU' + +export default { + ...ru, + common: { + an_error_occurred: 'Произошла ошибка', + page_not_found: 'Страница не найдена', + please_define_title: 'Please define a title in the front matter', + please_define_description: 'Please define a description in the front matter', + search: 'Поиск ("/" - фокус)', + version: 'Версия' + }, + iso: 'ru', + + links: { + download: 'Скачать', + live_edit: 'Пробовать вживую' + }, + header: { + links: [ + { + name: 'Руководства', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Примеры', + icon: 'code', + slug: 'examples' + }, + { + name: 'Resources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Блог', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Видео курсы', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Поиск ("/" - фокус)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js — Универсальные приложения на Vue.js', + description: + 'Nuxt.js — это минималистичный фреймворк для создания приложений на Vue.js с серверным рендерингом, разделением кода, горячей заменой модулей, статической генерацией и другими крутыми штуками!' + }, + welcome: { + title: 'Интуитивно понятный {br} {frameworkType} фреймворк', + description: + 'Постройте ваше следующее Vue.js приложение с простотой и уверенностью, используя NuxtJS. {openSource} фреймворк который делает разработку простой и мощной.', + openSource: 'Open source', + get_started: 'начало работы', + get_updates: 'Получайте новости о NuxtJS на почту каждый месяц.', + video: 'Видео создано команией {company}, скачайте их шпаргалку {cheatSheet}', + cheatSheet: 'Шпаргалка Nuxt.' + }, + why: { + title: 'Почему {nuxt}', + try_nuxtjs_online: 'Попробуйте NuxtJS онлайн', + enjoyable: { + title: 'Приятный', + description: + 'Наша главная цель - удобство разработки. Мы любим Nuxt.js и постоянно улучшаем его, надеемся, вы тоже его полюбите.{break} В вашим услугам отличная документация, информативные описания ошибок, сбалансированные настройки по умолчанию и прочие интересные решения. А если у вас возникнут вопросы или проблемы, наше дружелюбное сообщество всегда готово помочь.' + }, + modular: { + title: 'Модульный', + description: + 'Nuxt разработан на основе мощной модульной архитектуры. Более 50 разнообразных модулей сделают разработку проще и быстрее. Вам не придется изобретать велосипед, чтобы прикрутить PWA-фичи, Google Analytics, генерацию sitemap и многие другие типовые вещи.' + }, + performant: { + title: 'Быстрый', + description: + 'Nuxt.js оптимизирует ваше приложение сразу из коробки. Мы постоянно работаем над повышением производительности приложений, используя наработки Vue.js и Node.js. Чтобы выжать максимум из вашего приложения в Nuxt влючен анализатор бандлов и множество возможностей для тонкой настройки приложения.' + } + }, + companies: { + title: 'Кто использует {nuxt}' + }, + modes: { + title: '{nuxt} Рендеринг', + ssr: { + title: 'Рендеринг на сервере (SSR)', + description: + 'Наиболее популярный режим в Nuxt. В режиме SSR, также именуемом "универсальный" или "изоморфный", сервер Node.js будет рендерить HTML перед отправкой на клиент на основе ваших Vue компонентов, вместо отрисовки на чистом javascript. Использование режима SSR улучшает работу с SEO, UX и даёт множество других возможностей (в сравнении с традиционным SPA клиентом на Vue). Самостоятельная реализация рендеринга на сервере может стать утомительной задачей, поэтому Nuxt.js предоставляет её полную поддержку из коробки и обходит многие подводные камни.' + }, + ssg: { + title: 'Статическая генерация', + description: + 'Генерация статических сайтов (JAMStack) - очень горячая тема на сегодняшний день. Вместо того, чтобы сменить фреймворк и потратить время на его изучение, почему не убить двух зайцев одновременно? (как гласит поговорка о 🐇🐇). Nuxt.js позволяет сгенерировать статический сайт на основании вашего Vue-приложения. Получаем идеальное сочетание: вам больше не нужен сервер, однако будет работать SEO, так как Nuxt создаст все необходимые страницы заранее. Также, вы сможете без проблем опубликовать ваш проект на Netlify или GitHub pages.', + proverbial: 'only proverbial' + } + }, + sponsors: { + title: 'Спонсоры', + description: + 'NuxtJS - это проект с открытым исходным кодом, лицензированный MIT и полностью бесплатный для использования. Тем не менее, объем усилий, необходимых для поддержания и разработки новых функций для проекта, не является устойчивым без надлежащей финансовой поддержки. Если вы управляете бизнесом и используете Nuxt в продукте, приносящем доход, имеет смысл спонсировать разработку Nuxt: это гарантирует, что проект, на который опирается ваш продукт, остается здоровым и активно поддерживается. Это также может помочь вам разобраться в сообществе Vue/Nuxt и упростить привлечение разработчиков Vue/Nuxt. Если вы являетесь индивидуальным пользователем и наслаждались продуктивностью использования Nuxt, рассмотрите возможность пожертвования в знак признательности.', + become_a_sponsor: 'Стань спонсором' + }, + newsletter: { + title: '{nuxt} Рассылка', + description: 'Получай на почту последние новости, отобранные командой NuxtJS.', + form: { + email: 'Email', + subscribing: 'Подписываем...', + subscribe: 'Подписаться', + subscribed_messages: { + pre: 'Письмо для подтверждения подписки было отправлено на', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS Дизайн', + description: 'Скачайте дизайнерские файлы NuxtJS (SVG, иконки, emoji и favicon).' + }, + title: '{nuxt} Дизайн', + description: + 'NuxtJS - это проект с открытым исходным кодом, лицензированный MIT и полностью бесплатен для использования. {break} Вы можете свободно использовать наши логотипы пока они ссылаются на nuxtjs.org.', + other_download_message: 'Вы также можете скачать {favicon} или {sketch} файл.' + }, + resources: { + meta: { + title: 'Ресурсы NuxtJS', + description: + 'Ознакомьтесь с набором ресурсов сделанных нашими партнерами. Используя эти партнерские ссылки, вы поддерживаете разработку и сопровождение этого фреймворка с открытым исходным кодом.' + }, + title: '{nuxt} Resources', + description: + 'Ознакомьтесь с набором ресурсов сделанных нашими партнерами. Используя эти партнерские ссылки, вы поддерживаете разработку и сопровождение этого фреймворка с открытым исходным кодом', + themes: { + title: 'Темы' + }, + videos: { + title: 'Видео курсы' + } + }, + shop: { + meta: { + title: 'Магазин NuxtJS', + description: + 'Хотите поддержать проект NuxtJS и выразить благодарность его сообществу? Вот наши продукты наилучшего качества!' + }, + title: 'Магазин {nuxt}', + description: + 'Хотите поддержать проект NuxtJS и выразить благодарность его сообществу?{break} Вот наши продукты наилучшего качества!', + button: 'Скоро' + }, + team: { + meta: { + title: 'Команда NuxtJS', + description: + 'У проекта NuxtJS очень активная и сплоченная команда, которая постоянно стремится развивать его дальше.' + }, + title: 'Команда {nuxt}', + description: + 'Команда разработки NuxtJS и его экосистемы является международной. У проекта NuxtJS очень активная и сплоченная команда, которая постоянно стремится развивать его дальше.' + }, + themes: { + meta: { + title: 'Темы NuxtJS', + description: + 'Со следующими темами оформления, разработанными нашими партнерами из Creative Tim и Theme Forest, вы можете увидеть как строится настоящее приложение основанное на Nuxt.js.' + }, + title: '{nuxt} Themes', + description: + 'Со следующими темами оформления, разработанными нашими партнерами из Creative Tim и Theme Forest, вы можете увидеть как строится настоящее приложение основанное на Nuxt.js.', + button: 'КУПИТЬ за' + }, + 'video-courses': { + meta: { + title: 'Видео курсы NuxtJS', + description: + 'С этими видео курсами, созданными нашим партнером VueSchool, вы можете узнать больше о фреймворке Nuxt.js.' + }, + title: 'Видео курсы {nuxt}', + description: + 'С этими видео курсами, созданными нашим партнером VueSchool, вы можете узнать больше о фреймворке Nuxt.js.', + cta: { + discover: 'Изучить vueschool', + start: 'НАЧАТЬ КУРС' + } + }, + sponsor: { + meta: { + title: 'Спонсировать разработку NuxtJS', + description: + 'Вы можете поддержать разработку NuxtJS разными способами, чтобы обеспечить регулярные обновления фреймворка.' + }, + title: 'Спонсировать разработку {nuxt}', + description: + 'NuxtJS - это проект с открытым исходным кодом, лицензированный MIT и полностью бесплатный для использования.{break} Тем не менее, объем затрат необходимый для поддержания и разработки новых функций, не полностью покрывается нашим финансированием. {break} Вы можете поддержать разработку NuxtJS следующими способами:', + donations: { + title: 'Одноразовые пожертвования', + description: 'Мы принимаем донаты таким способом' + }, + pledges: { + title: 'Периодические пожертвования', + description: + 'Периодические пожертвования дают взамен эксклюзивные привелегии, например, вывод вашего имени в репозитории NuxtJS на GitHub, или вывод логотипа вашей компании на этом сайте. Станьте спонсором через {opencollective} (средства идут в фонд с прозрачными моделями расходов, которые поддерживают сообщество и события).' + }, + become_a_sponsor: 'Стать спонсором' + }, + support: { + meta: { + title: 'Поддержка NuxtJS', + description: 'Наша команда NuxtJS предлагает официальный консалтинг для ваших NuxtJS проектов.' + }, + title: 'Консалтинг поддержка {nuxt}', + description: + 'Наша {team} предлагает официальный консалтинг для ваших NuxtJS проектов.{break} Мы предлагаем разные услуги в зависимости от ваших потребностей: от техподдержки до разработки новых решений. Ожидайте ответа в течении одного рабочего дня. Мы можем подписать NDA и вы получите полный возврат среств если наши услуги будут неудовлетворительными.', + technical: { + title: 'Техподдержка', + description: 'Получите аудиты, развертывание, разработку и поддержку вашего проекта от команды NuxtJS.', + start: 'Начать чат (англ.)', + partner: { + pre: 'Мы договорились с', + post: 'чтобы иметь возможность предоставлять эти услуги как можно быстрее.' + } + }, + entreprise: { + title: 'для корпораций', + description: + 'NuxtJS и разработчики тысяч других пакетов работают с Tidelift, чтобы предоставить одну корпоративную подписку, которая покрывает все открытое ПО которым вы пользуетесь.{break} Если вы хотите гибкость открытого ПО и надежность коммерческого ПО, это для вас.', + partner: { + pre: 'Доступно как часть', + post: 'подписки.' + }, + learn_more: 'Узнать больше', + request_a_demo: 'Запросить демо' + } + }, + blog: { + meta: { + title: 'Блог NuxtJS', + description: 'Изучите статьи от команды и сообщества NuxtJS, включая подсказки и хитрости!' + }, + title: 'Блог {nuxt}', + description: 'Изучите статьи от {nuxtTeam} и {nuxtCommunity} NuxtJS, включая подсказки и хитрости!', + nuxt_team: 'команды', + nuxt_community: 'сообщества', + contribute: 'Нашли ошибку или хотите дополнить этот пост?' + }, + guide: { + release_notes: 'Замечания о релизе', + toc_title: 'Содержание' + }, + quiz: { + title: 'Опрос' + }, + tryNewDocs: { + msg1: 'Хотите взглянуть на нашу новую документацию? Наша ', + link: 'новая документация', + msg2: 'в бета-версии. Развлекайтесь!' + }, + contribute: { + title: 'Авторы', + docs: 'Обнаружили ошибку или хотите внести свой вклад в документацию?', + blog: 'Нашли ошибку или хотите дополнить этот пост?', + edit_on_github: 'Отредактировать эту страницу на GitHub!', + msg1: 'Изменения на этой странице заблокированы. Если хотите что-то изменить, взгляните на нашу', + link: 'новую документацию' + }, + example: { + intro: 'In this example:' + }, + codeSandbox: { + open: 'Открыть CodeSandbox' + }, + content: { + guide: { + prologue: 'Prologue', + 'getting-started': 'Getting Started' + }, + api: { + essential: 'Основы', + pages: 'Страницы', + components: 'Компоненты', + utils: 'Утилиты', + configuration: 'Конфигурация', + programmatically: 'Программно', + internals: 'Внутренности' + }, + examples: { + essentials: 'Основы', + customization: 'Персонализация', + advanced: 'Продвинутые' + }, + faq: { + configuration: 'Конфигурация', + development: 'Разработка', + deployment: 'Развертывание' + }, + guides: { + 'get-started': 'Начало', + concepts: 'Концепции', + features: 'Функции', + 'directory-structure': 'Структура директорий', + 'configuration-glossary': 'Конфигурация', + 'internals-glossary': 'Внутренности', + 'components-glossary': 'Компоненты' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Training & consultancy', + sponsorNuxt: 'Sponsoring & donations' + }, + about: { + title: 'About', + team: 'Our team', + design: 'Design kit', + contact: 'Contact us' + }, + support: { + title: 'Support', + resources: 'Resources', + discord: 'Chat with us', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: 'Мы используем файлы Cookies для аналитики!', + linkLabel: 'Узнать больше о Cookies', + button: 'Понятно' + } +} diff --git a/nuxtjs.org/i18n/tr-TR.js b/nuxtjs.org/i18n/tr-TR.js new file mode 100644 index 000000000..d3e4ceffa --- /dev/null +++ b/nuxtjs.org/i18n/tr-TR.js @@ -0,0 +1,339 @@ +export default { + common: { + an_error_occurred: 'Bir hata oluştu', + page_not_found: 'sayfası bulunamadı', + please_define_title: 'Please define a title in the front matter', + please_define_description: 'Please define a description in the front matter', + search: 'Ara (tıkla ya da "/")', + version: 'Sürüm' + }, + iso: 'tr', + + links: { + download: 'İndir', + live_edit: 'Canlı Düzenleme' + }, + header: { + links: [ + { + name: 'Rehberler', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: 'Örnekler', + icon: 'code', + slug: 'examples' + }, + { + name: 'Resources', + icon: 'resources', + slug: 'resources' + }, + { + name: 'Blog', + icon: 'blog', + slug: 'blog' + }, + { + name: 'Video Courses', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: 'Ara (tıkla ya da "/")' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - Sezgisel Vue Sistemi', + description: + 'Bir sonraki Vue.js uygulamanızı, NuxtJS ile güvenli bir şekilde programlayın. Web geliştirmeyi basit ve güçlü kılan açık kaynak bir sistem.' + }, + welcome: { + title: 'Sezgisel {br} {frameworkType} Sistemi', + description: + 'Bir sonraki Vue.js uygulamanızı, NuxtJS ile güvenli bir şekilde programlayın. Web geliştirmeyi basit ve güçlü kılan {openSource} bir sistem.', + openSource: 'açık kaynak', + get_started: 'başlarken', + get_updates: 'Her ay gelen kutunuza NuxtJS güncellemelerini alın', + video: "Video {company} tarafından hazırlanmıştır, ücretsiz {cheatSheet}'nu indirin.", + cheatSheet: 'Nuxt Kullanım Kılavuzu' + }, + why: { + title: 'Neden {nuxt}', + try_nuxtjs_online: "NuxtJS'yi Deneyin", + enjoyable: { + title: 'Eğlenceli', + description: + "Ana amacımız Geliştirici Deneyimini geliştirmektir. Nuxt.js'yi seviyoruz ve sistemi sürekli olarak sizin de sevmenizi hedefliyoruz! 💚 {break} Kolay çözümler, açıklayıcı hata mesajları, güçlü varsayılanlar ve ayrıntılı dokümantasyona hazır olun! Eğer bir sorunla karşılaşır veya bir soru sormak isterseniz, yardımsever topluluğumuz size yardımcı olacaktır." + }, + modular: { + title: 'Modüler', + description: + "Nuxt modüler bir yapı üzerine kurulmuştur. Geliştirme aşamanızı hızlandırıp kolaylaştıracak 50'den fazla modüle kolayca erişebilirsiniz. PWA ayrıcalıklarına erişmek, uygulamanızı Google Analytics'e bağlamak veya bir site haritası oluşturmak için tekerleği yeniden icat etmenize gerek yok!" + }, + performant: { + title: 'Performanslı', + description: + "Nuxt.js ile, uygulamanız kutudan çıktığı haliyle optimize edilmiş olacaktır. Vue.js ve Node.js pratiklerini en iyi şekilde kullanıp sizlere en güçlü performans sunan bir sistem geliştirmeye çalışıyoruz. Gereği olmayan en küçük ayrıntıya kadar Nuxt'un imkanları sayesinde uygulamanız her zaman optimize edilmiş bir şekilde çalışır." + } + }, + companies: { + title: 'Kimler {nuxt} kullanıyor?' + }, + modes: { + title: '{nuxt} işlemesi', + ssr: { + title: 'Sunucu Taraflı İşleme', + description: + 'Bu mod, Nuxt\'un en popüler modudur. STİ (SSR), "universal" veya "isomorphic" olarak isimlendirdiğimiz bu mod, saf javascript kullanıp Vue komponentlerinizi kullanıcılara sunmaktansa, bir Node.js sunucusu kullanıp bunları sunucuda işleyerek sitenize HTML bazlı olarak çıktı verecektir. STİ kullanmak, büyük bir SEO puanı takviyesi almanıza sebep olacaktır, daha iyi kullanıcı deneyimi ve Vue SPA ile karşılaştırıldığında daha fazla imkanınız olacaktır.{break}STİ\'yi kendi başınıza uygulamanıza uyarlamak zorlu olabilir, Nuxt.js sizlere bunu hazır bir şekilde sunar ve bilinen bir çok ayarı sizin için yapar.' + }, + ssg: { + title: 'Statik Olarak Oluşturma', + description: + 'Statik Site Oluşturma bu sıralar çok popüler bir oluştur. Bir başka sisteme geçip alışmakla zaman kaybetmek yerine neden bir taşla iki kuş vurmayasınız ki? {proverbial} Nuxt.js, Vue uygulamanıza bağlı olarak statik bir site oluşturabilir. Buna ayrıca "her iki tarafın da en iyisi" denilir çünkü bir sunucuya ihtiyacınız olmadığı halde Nuxt\'un tüm sayfaları önceden işleyerek verdiği sonuçlar doğrultusunda tüm SEO ayrıcalıklarına erişebilirsiniz. Ayrıca, bu yöntemle oluşturduğunuz sayfalarınızı kolaylıkla Netlify veya GitHub sayfalarınızda kullanabilirsiniz. ', + proverbial: 'sadece atasözü olarak elbette' + } + }, + sponsors: { + title: 'Sponsorlar', + description: + "NuxtJS, MIT lisanslı açık kaynak ve kullanması tamamen ücretsiz bir projedir. Yine de, projeyi ayakta tutmak, yeni özellikler eklemek için sarf edilen efor ve emek finansal destek gerektirmektedir. Eğer bir işletme yürütüyorsanız ve işletmenizde Nuxt kullanıp kazanç sağlıyorsanız, Nuxt'u desteklemek işletmeler kitabında mantıklı olacaktır. Böylece sizin işletmeniz ve Nuxt ayakta durabilir ve güncelleme almaya devam edebilir. Sponsor olmak, ayrıca sizi Vue/Nuxt topluluğuna sokacaktır ve bu toplulukta Vue/Nuxt geliştiricilerine ulaşmanıza kolaylık sağlayacaktır. Eğer Nuxt kullanıyor ve memnun kalıyorsanız, minnettarlığınızı göstermek amacıyla bağış yapmayı unutmayın.", + become_a_sponsor: 'Sponsor ol' + }, + newsletter: { + title: '{nuxt} Bülteni', + description: + 'Çekirdek ekibi ve katkıda bulunanlar tarafından yönetilen en son Nuxt haberlerine gelen kutunuzdan ulaşın.', + form: { + email: 'Eposta', + subscribing: 'Abone olunuyor...', + subscribe: 'Abone Ol', + subscribed_messages: { + pre: 'Aboneliğinizi onaylamak için epostanıza bir eposta gönderildi', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS Tasarım', + description: 'Download NuxtJS design resources (SVG, icons, emoji and favicon).' + }, + title: '{nuxt} Tasarım', + description: + "NuxtJS, MIT lisansı açık kaynak bir projedir ve kullanması tamamen ücretsizdir. Burada gördüğünüz logolarımızı NuxtJS'yi ve nuxtjs.org'u belirttiğiniz takdirde istediğiniz gibi kullanabilirsiniz.", + other_download_message: "Aynı zamanda isterseniz {favicon}'umuzu veya {sketch} dosyamızı indirebilirsiniz." + }, + resources: { + meta: { + title: 'NuxtJS Kaynaklar', + description: + 'Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.' + }, + title: '{nuxt} Kaynaklar', + description: + 'Partnerimiz tarafından hazırlanan kaynaklara göz atın. Buradaki bağlantıları kullanarak bizlere Açık Kaynak Sistem projemizi geliştirmemizde destek oluyorsunuz.', + themes: { + title: 'Temalar' + }, + videos: { + title: 'Videolu Kurslar' + } + }, + shop: { + meta: { + title: 'NuxtJS Mağaza', + description: + 'You want to support the NuxtJS project and show your love to the rest of the community? Here our products with the best quality ever!' + }, + title: '{nuxt} Mağaza', + description: + 'NuxtJS projesine desteğinizi göstermek ve topluluğun geri kalanına sevginizi göstermek mi istiyorsunuz? Doğru yerdesiniz, buradan en kaliteli ürünlerimize ulaşabilirsiniz!', + button: 'Coming soon' + }, + team: { + meta: { + title: 'NuxtJS Ekip', + description: 'NuxtJS has a very active and engaged team that is constantly striving to push Nuxt forward.' + }, + title: '{nuxt} Ekip', + description: + "NuxtJS ve ekosistemiminin gelişimi uluslararası bir ekip tarafından kılavuzlanmıştır. Nuxt'u iyileştirmek için sürekli çabalayan ve çalışan bir ekibe sahibiz." + }, + themes: { + meta: { + title: 'NuxtJS Temalar', + description: + 'With the themes below built by our partners from Creative Tim and Theme Forest you can see how a real world application is built, with Nuxt.js stack behind.' + }, + title: '{nuxt} Temalar', + description: + "Creative Tim ve Theme Forest'daki partnerlerimiz tarafından hazırlanan temalara göz atarak NuxtJS ile yapılmış bir uygulamanın gerçek kullanımda nasıl gözüktüğünü görebilirsiniz.", + button: 'GET IT for' + }, + 'video-courses': { + meta: { + title: 'NuxtJS Video Kursları', + description: + 'With the video courses below created by our partner VueSchool you can discover and learn more about the Nuxt.js Framework.' + }, + title: '{nuxt} Video Kursları', + description: + 'Aşağıdaki VueSchool tarafından hazırlanan video kurslarımız ile Nuxt.js sistemi hakkında daha fazla keşif yapabilir ve daha fazla bilgiye sahip olabilirsiniz.', + cta: { + discover: "Vueschool'u keşfet", + start: 'KURSU BAŞLAT' + } + }, + sponsor: { + meta: { + title: 'Sponsor NuxtJS Development', + description: + 'You can support NuxtJS development via different methods and ensure regular updates to the framework.' + }, + title: '{nuxt} Gelişimine Destek Ol', + description: + 'NuxtJS, MIT lisanslı açık kaynak ve kullanması tamamen ücretsiz bir projedir. Yine de, bu proje ve bu proje için yeni özellikler yapmak için sarfedilen efor finansal destek olmadan mümkün olmayacaktır.{break}Aşağıdaki yöntemleri kullanarak NuxtJS gelişimine destek çıkabilirsiniz:', + donations: { + title: 'Tek seferlik bağışlar', + description: 'Bu kanallardan gelen bağışları kabul ediyoruz' + }, + pledges: { + title: 'Yinelenen Bağışlar', + description: + 'Yinelenen bağışlar yanında bir çok özellikle birlikte gelir, örneğin isminizi NuxtJS GitHub deposuna yazdırma, veya şirket logonuzu sitemizde bulundurma... {opencollective} (topluluk çabalarını ve olaylarını destekleyen şeffaf harcama modelleri ile bir fona giriyor) üzerinden bir nuxter veya sponsor olarak bizlere destek olabilirsiniz.' + }, + become_a_sponsor: 'Sponsor ol' + }, + support: { + meta: { + title: 'NuxtJS Destek', + description: 'Our NuxtJS team now offers official consulting services for your NuxtJS applications.' + }, + title: 'Danışmanlık {nuxt} Destek', + description: + '{team}, NuxtJS uygulamalarınız için resmi bir danışmanlık desteği sunuyor. İhtiyacınıza göre teknik destekten, özel geliştirme aşamalarına kadar farklı servisler sağlıyoruz. Bir iş günü içerisinde cevap veriyor ve bu servisi beğenmemeniz durumunda bir NDA imzalayabilir ve paranızın tamamını size geri iletebiliriz.', + technical: { + title: 'Teknik destek', + description: 'NuxtJS ekibinden proje denetimleri, özel geliştirme işlemleri ve teknik destek alın.', + start: 'Konuşmayı başlat', + partner: { + pre: 'Sizlere daha hızlı hizmet verebilmek için', + post: 'ile partnerlik sağladık.' + } + }, + entreprise: { + title: 've Kuruluşlar', + description: + 'NuxtJS ve binlerce diğer paketlerin kuruluşlara abonelik sağlamak için Tidelift adı verilen bir firmayla ortak olarak çalışır.{break} Eğer açık kaynak kodun genişletilebilir olmasını istiyor ve ticari-dereceli yazılımın rahatlığını aynı anda yaşamak istiyorsanız bu tam size göre.', + partner: { + pre: '', + post: 'aboneliği ile ulaşılabilir.' + }, + learn_more: 'Daha fazla bilgi', + request_a_demo: 'Bir örnek talep et' + } + }, + blog: { + meta: { + title: 'NuxtJS Blog', + description: 'Discover articles from the NuxtJS team and NuxtJS Community about NuxtJS, tips and tricks included!' + }, + title: '{nuxt} Blog', + description: '{nuxtTeam} ve {nuxtCommunity} tarafından hazırlanan NuxtJS gönderilerini ve ipuçlarını keşfedin!', + nuxt_team: 'NuxtJS Team', + nuxt_community: 'Nuxt.js Community', + contribute: 'Hata yakaladınız veya bu gönderiye katkıda bulunmak mı istiyorsunuz?' + }, + guide: { + release_notes: 'Sürüm Notları', + toc_title: 'Bu sayfadakiler' + }, + quiz: { + title: 'Test' + }, + tryNewDocs: { + msg1: 'Yeni dokümanlarımıza göz atmak ister misiniz? ', + link: 'Yeni dokümanlarımız', + msg2: 'beta dönemine girdi. Tadını çıkarın!' + }, + contribute: { + title: 'Katkıda Bulunanlar', + docs: 'Hata yakaladınız veya bu dokümana katkıda bulunmak mı istiyorsunuz?', + blog: 'Hata yakaladınız veya bu gönderiye katkıda bulunmak mı istiyorsunuz?', + edit_on_github: "Bu sayfayı GitHub'da düzenleyin!", + msg1: 'Bu sayfa için şu anda katkıda bulunamazsınız. Eğer katkıda bulunmak istiyorsanız', + link: 'buraya tıklayın.' + }, + example: { + intro: 'In this example:' + }, + codeSandbox: { + open: "CodeSandbox'ı Aç" + }, + content: { + guide: { + prologue: 'Önsöz', + 'getting-started': 'Başlarken' + }, + api: { + essential: 'Gereksinim', + pages: 'Sayfalar', + components: 'Komponentler', + utils: 'Araçlar', + configuration: 'Konfigurasyon', + programmatically: 'Programlı', + internals: 'İç Kısımlar' + }, + examples: { + essentials: 'Gereksinimler', + customization: 'Kişiselleştirme', + advanced: 'Gelişmiş' + }, + faq: { + configuration: 'Konfigurasyon', + development: 'Geliştirme', + deployment: 'Yayımlama' + }, + guides: { + 'get-started': 'Başlarken', + concepts: 'Konseptler', + features: 'Özellikler', + 'directory-structure': 'Dosya Sistemi', + 'configuration-glossary': 'Konfigurasyon Sözlüğü', + 'internals-glossary': 'İç Kısım Sözlüğü', + 'components-glossary': 'Komponent Sözlüğü' + } + }, + footer: { + links: { + discover: { + title: 'Discover', + shop: 'Our Goodies Store', + consulting: 'Training & consultancy', + sponsorNuxt: 'Sponsoring & donations' + }, + about: { + title: 'About', + team: 'Our team', + design: 'Design kit', + contact: 'Contact us' + }, + support: { + title: 'Support', + resources: 'Kaynaklar', + discord: 'Chat with us', + contributionGuide: 'Contribution guide' + } + } + }, + cookies: { + consent: 'Kullanıcı analizleri ve sayfa içerisi geliştirmeler yapmak için çerezleri kullanıyoruz.', + linkLabel: 'Çerezler hakkında bilgi', + button: 'Tamam' + } +} diff --git a/nuxtjs.org/i18n/zh-ZH.js b/nuxtjs.org/i18n/zh-ZH.js new file mode 100644 index 000000000..e9fb476ff --- /dev/null +++ b/nuxtjs.org/i18n/zh-ZH.js @@ -0,0 +1,342 @@ +export default { + common: { + an_error_occurred: '文档API服务异常', + page_not_found: '页面不存在', + please_define_title: '请在文档页头中指定标题(title)字段', + please_define_description: '请在文档页头中指定描述(description)字段', + search: '搜索 ("/" 快速定位)', + version: '版本' + }, + iso: 'zh', + + links: { + download: '下载', + live_edit: '在线编辑' + }, + header: { + links: [ + { + name: '文档', + icon: 'books', + slug: 'docs-2.x-book-slug' + }, + { + name: '示例', + icon: 'code', + slug: 'examples' + }, + { + name: '资源', + icon: 'resources', + slug: 'resources' + }, + { + name: '博客', + icon: 'blog', + slug: 'blog' + }, + { + name: '视频课程', + icon: 'video', + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link' + } + ], + search: { + placeholder: '搜索 ("/" 快速定位)' + } + }, + homepage: { + meta: { + title: 'Nuxt.js - Vue.js 通用应用框架', + description: + 'Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。' + }, + welcome: { + title: '易于使用的 {br} {frameworkType} 框架', + description: + '使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个{openSource}框架,让 Web 开发变得简单而强大。', + openSource: '开源', + get_started: '开始使用', + get_updates: '每月获取 NuxtJS 更新到您的收件箱', + video: '由 {company} 制作的视频, 下载免费的 {cheatSheet}', + cheatSheet: 'Nuxt 备忘单。' + }, + why: { + title: '为什么选择 {nuxt}', + try_nuxtjs_online: '在线尝试 NuxtJS', + enjoyable: { + title: '令人愉快', + description: + '我们的主要重点是开发人员体验。我们喜欢 Nuxt.js,并且会不断改进框架,所以您也喜欢它! {break}期待有吸引力的解决方案,描述性的错误消息,强大的默认值和详细的文档。 如果有问题或疑问,我们有用的社区将为您提供帮助。' + }, + modular: { + title: '模块化', + description: + 'Nuxt 基于强大的模块化体系结构。您可以从 50 多个模块中进行选择,以使您的开发更快,更轻松。您无需重新发明轮子即可获得 PWA 好处,无需在页面上添加 Google Analytics 或生成站点地图。' + }, + performant: { + title: '高效率', + description: + '借助 Nuxt.js,您的应用程序将得到开箱即用的优化。我们尽最大努力通过利用 Vue.js 和 Node.js 最佳实践来构建高性能应用程序。为了从应用程序中挤出所有不必要的内容,Nuxt 包括捆绑分析器和许多微调您的应用程序的机会。 ' + } + }, + companies: { + title: '谁在使用 {nuxt}' + }, + modes: { + title: '{nuxt} 渲染', + ssr: { + title: '服务器端渲染', + description: + '这是 Nuxt 最受欢迎的模式。使用 SSR(也称为 "universal" 或 "isomorphic" 模式),将使用 Node.js 服务器将基于 Vue 组件的 HTML 传递给客户端,而不是纯 JavaScript。与传统的 Vue SPA 相比,使用 SSR 将带来更大的 SEO 提升,更好的用户体验和更多的机会。{break}由于单独实施 SSR 可能非常繁琐,因此 Nuxt.js 可为您提供全面的支持,并将处理常见的缺陷。' + }, + ssg: { + title: '静态生成', + description: + '静态网站生成是当前非常热门的话题(又名 JAMStack)。与其切换到另一个框架并花时间去适应它,不如一石二鸟? {proverbial} Nuxt.js 支持根据您的 Vue 应用程序生成静态网站。它是 “两全其美” 的选择,因为您不需要服务器,但仍然拥有 SEO 的好处,因为 Nuxt 会预先渲染所有页面并包含必要的 HTML。另外,您可以轻松地将结果页面部署到 Netlify 或 GitHub 页面。', + proverbial: '' + } + }, + sponsors: { + title: '赞助商', + description: + 'NuxtJS 是 MIT 许可的开源项目,完全免费使用。但是,如果没有适当的资金支持,为项目维护和开发新功能所需的工作量将无法持续。如果您经营一家企业并在产生收入的产品中使用 Nuxt,则赞助Nuxt开发具有商业意义:它可以确保您的产品所依赖的项目保持健康并得到积极维护。 它还可以帮助您在 Vue/Nuxt 社区中曝光,并更容易吸引 Vue/Nuxt 开发人员。如果您是个人用户,并且享受使用 Nuxt 带来的生产力,请考虑捐赠作为一种感激之情。', + become_a_sponsor: '成为赞助商' + }, + newsletter: { + title: '{nuxt} 电子报刊', + description: '将最新的 Nuxt 新闻发送到您的收件箱,这由 NuxtJS 团队策划。', + form: { + email: '邮箱', + subscribing: '订阅中...', + subscribe: '订阅', + subscribed_messages: { + pre: '一封您的订阅确认邮件已发送至', + post: '💚' + } + } + } + }, + design: { + meta: { + title: 'NuxtJS 设计', + description: '下载 NuxtJS 设计资源(SVG,图标,表情符号和网站图标).' + }, + title: '{nuxt} 设计', + description: + 'NuxtJS 是 MIT 许可的开源项目,完全免费使用。 {break}只要提及 NuxtJS 并链接到 nuxtjs.org,您就可以自由使用我们的徽标。', + other_download_message: '您也可以下载我们的 {favicon} 或我们的 {sketch} 文件。' + }, + resources: { + meta: { + title: 'NuxtJS 资源', + description: '发现我们合作伙伴提供的资源面板。通过使用那些会员资源链接,您正在帮助我们维护和开发开放源代码框架。' + }, + title: '{nuxt} 资源', + description: '发现我们合作伙伴提供的资源面板。通过使用那些会员资源链接,您正在帮助我们维护和开发开放源代码框架。', + themes: { + title: '主题' + }, + videos: { + title: '视频课程' + } + }, + shop: { + meta: { + title: 'NuxtJS 商店 ', + description: '您想支持 NuxtJS 项目,并向社区的其他成员表达您的爱吗?在这里,我们的产品有史以来最好的质量!' + }, + title: '{nuxt} 商店', + description: '您想支持 NuxtJS 项目并将您的爱表达给社区的其他人吗?{break}这里是我们有史以来最优质的产品!', + button: '马上到来' + }, + team: { + meta: { + title: 'NuxtJS 团队', + description: 'NuxtJS 拥有一支非常活跃和敬业的团队,并不断努力推动 Nuxt 前进。' + }, + title: '{nuxt} 团队', + description: + 'NuxtJS 及其生态系统的开发由一个国际团队指导。我们有一支非常积极和敬业的团队,正在不断努力推动 Nuxt 前进。' + }, + themes: { + meta: { + title: 'NuxtJS 主题', + description: + '通过我们由 Creative Tim 和 Theme Forest 的合作伙伴构建的以下主题,您可以了解如何构建真实的应用程序以及 Nuxt.js 。' + }, + title: '{nuxt} 主题', + description: + '通过我们由 Creative Tim 和 Theme Forest 的合作伙伴构建的以下主题,您可以了解如何构建真实的应用程序以及 Nuxt.js', + button: '获得它,仅需' + }, + 'video-courses': { + meta: { + title: 'NuxtJS 视频课程', + description: '通过我们的合作伙伴 Vue School 创建的以下视频课程,您可以发现并了解有关 Nuxt.js 框架的更多信息。' + }, + title: '{nuxt} 视频课程', + description: '通过我们的合作伙伴 VueSchool 创建的以下视频课程,您可以发现并了解有关 Nuxt.js 框架的更多信息。', + cta: { + discover: '探索 vueschool', + start: '开始课程' + } + }, + sponsor: { + meta: { + title: '赞助 NuxtJS 开发', + description: '您可以通过不同的方法支持 NuxtJS 开发,并确保对框架进行定期更新。' + }, + title: '赞助 {nuxt} 开发', + description: + 'NuxtJS 是 MIT 许可的开源项目,完全免费使用。{break}但是,如果没有适当的资金支持,维护和开发该项目的新功能所需的工作量是无法持续的。{break}您可以通过以下方式支持 NuxtJS 开发下列方法:', + donations: { + title: '一次性捐助', + description: '我们通过这些渠道接受捐赠' + }, + pledges: { + title: '定期捐助', + description: + '定期捐助会享受一些特权,例如在 NuxtJS GitHub 存储库中列出您的姓名,或在此网站上放置您的公司徽标。通过{opencollective}成为赞助商或赞助商(进入具有透明费用模型的基金,以支持社区的工作和活动)。' + }, + become_a_sponsor: '成为赞助商' + }, + support: { + meta: { + title: 'NuxtJS 支持', + description: '我们的 NuxtJS 团队现在为您的 NuxtJS 应用程序提供官方咨询服务。' + }, + title: '咨询 {nuxt} 支持', + description: + '我们的 {team} 现在为您的NuxtJS应用程序提供官方咨询服务。{break}我们根据您的需求提供不同的服务,从技术支持到定制开发。希望在一个工作日内得到答复,我们可以签署自定义NDA,如果您对我们的服务不满意,则可以全额退款。', + technical: { + title: '技术支持', + description: '从 NuxtJS 团队获得项目审核,应用程序部署,自定义开发和技术支持。', + start: '开始聊天', + partner: { + pre: '我们与', + post: '提供这些服务,以便我们专注于尽快为您提供帮助。' + } + }, + entreprise: { + title: '对于企业', + description: + 'NuxtJS和其他数千个软件包的维护者正在与 Tidelift 一起提供一项企业订阅,其中涵盖您使用的所有开源。{break}如果您想要开源的灵活性和对商业级软件的信心,这就是为你量身定制。', + partner: { + pre: '可作为', + post: '订阅。' + }, + learn_more: '了解更多', + request_a_demo: '请求 Demo' + } + }, + blog: { + meta: { + title: 'NuxtJS 博客', + description: '发现来自 NuxtJS 团队和 NuxtJS 社区的有关 NuxtJS 的文章,包括技巧和窍门!' + }, + title: '{nuxt} 博客', + description: '从 {nuxtTeam} 和 {nuxtCommunity} 中找到有关 NuxtJS 的文章,包括技巧和窍门!', + nuxt_team: 'NuxtJS 团队', + nuxt_community: 'Nuxt.js 社区', + contribute: '遇到错误或想要为该博客文章做出贡献?' + }, + guide: { + release_notes: '发行说明', + toc_title: '在本页' + }, + quiz: { + title: '测验' + }, + tryNewDocs: { + msg1: '想看一下我们的新文档吗?我们的 ', + link: '新文档', + msg2: '现在处于测试阶段。玩得开心!' + }, + contribute: { + title: '贡献者', + docs: '如何提交问题或文档贡献?', + blog: '遇到错误或想要为该博客文章做出贡献?', + edit_on_github: '在 GitHub 编辑此页面!', + msg1: '该页面的贡献现已关闭。如果您想贡献,请查看我们的', + link: '新文档' + }, + example: { + intro: '在此示例中:' + }, + codeSandbox: { + open: '打开 CodeSandbox' + }, + content: { + guide: { + prologue: '序幕', + 'getting-started': '开始入门' + }, + api: { + essential: '必要', + pages: '页面', + components: '组件', + utils: '实用工具', + configuration: ' 配置', + programmatically: '以编程方式', + internals: '内部构造' + }, + examples: { + // essentials: '必要', + routing: '路由', + dataFetching: '数据获取', + assetManagement: '资源依赖管理', + transitions: '过渡动画', + seo: 'SEO', + loading: '加载', + miscellaneous: '其他项目', + middleware: '中间件', + plugins: '插件', + modules: '模块' + // customization: '定制化', + // advanced: '高级' + }, + faq: { + configuration: '配置', + development: '开发', + deployment: '部署' + }, + guides: { + 'get-started': '开始使用', + concepts: '概念', + features: '特性', + 'directory-structure': '目录结构', + 'configuration-glossary': '配置词汇表', + 'internals-glossary': '内部术语表', + 'components-glossary': '组件词汇表', + examples: '示例' + } + }, + footer: { + links: { + discover: { + title: '发现', + shop: '我们的杂货店', + consulting: '培训与咨询', + sponsorNuxt: '赞助与捐赠' + }, + about: { + title: '关于', + team: '我们团队', + design: '设计套件', + contact: '联系我们' + }, + support: { + title: '支持', + resources: '资源', + discord: '与我们聊天', + contributionGuide: '贡献指南' + } + } + }, + cookies: { + consent: '我们使用 Cookies 进行用户分析和页面改进!', + linkLabel: '了解 Cookie', + button: '明白了' + } +} diff --git a/nuxtjs.org/nuxt.config.ts b/nuxtjs.org/nuxt.config.ts index ec1ac138b..37d09dbe8 100644 --- a/nuxtjs.org/nuxt.config.ts +++ b/nuxtjs.org/nuxt.config.ts @@ -112,5 +112,8 @@ export default withDocus({ 'abs.twimg.com', 'https://res.cloudinary.com/nuxt/' ] + }, + i18n: { + langDir: 'i18n/' } }) diff --git a/src/core/runtime/composables/navigation.ts b/src/core/runtime/composables/navigation.ts index f6d97316a..8471d7f7b 100644 --- a/src/core/runtime/composables/navigation.ts +++ b/src/core/runtime/composables/navigation.ts @@ -11,9 +11,6 @@ export const useDocusNavigation = ({ context, state, api }: DocusAddonContext) = // Nuxt context const { app, route } = context - // Current locale - const { locale: currentLocale } = app.i18n - // Reactive router path const { path } = useReactivePath(app, route) @@ -30,9 +27,9 @@ export const useDocusNavigation = ({ context, state, api }: DocusAddonContext) = * Get navigation from Docus data */ async function fetchNavigation() { - const { body } = await api.data('/docus/navigation/' + currentLocale) + const { body } = await api.data('/docus/navigation/' + app.i18n.locale) - state.navigation[currentLocale] = body + state.navigation[app.i18n.locale] = body fetchCounter.value += 1 } @@ -44,7 +41,7 @@ export const useDocusNavigation = ({ context, state, api }: DocusAddonContext) = * @param from A vue-router "to" valid path to start with: "/directory" will make my query start at from this directory. */ function get({ depth, locale, from, all }: DocusNavigationGetParameters = {}) { - const nav = state.navigation[locale || currentLocale] || [] + const nav = state.navigation[locale || app.i18n.locale] || [] let items = nav let match diff --git a/src/core/runtime/composables/reactivePath.ts b/src/core/runtime/composables/reactivePath.ts index 1687d7353..135010738 100644 --- a/src/core/runtime/composables/reactivePath.ts +++ b/src/core/runtime/composables/reactivePath.ts @@ -6,10 +6,10 @@ import { Route } from 'vue-router' * Reactive Vue Router path bound to Nuxt app instance. */ export const useReactivePath = (app: NuxtAppOptions, route: Route) => { - const path = ref(route.path) + const path = ref('/' + route.params.pathMatch) app.router.beforeEach((to: Route, _: any, next: () => void) => { - path.value = to.path + path.value = '/' + to.params.pathMatch next() }) diff --git a/src/i18n/index.ts b/src/i18n/index.ts index afe08a716..6a76ebfa8 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -44,6 +44,9 @@ export default <Module>function docusI18n() { // Update i18n langDir to relative from `~` (https://github.com/nuxt-community/i18n-module/blob/4bfa890ff15b43bc8c2d06ef9225451da711dde6/src/templates/utils.js#L31) config.langDir = join(relative(options.srcDir, r('languages')), '/') + // Inject Docus theme as ~docus + options.alias['~docus-i18n'] = r('languages') + if (!options.i18n?.locales?.length) { const contentDir = resolve(options.srcDir, $docus.settings.contentDir) const languageCodes = languages.map(({ code }) => code) @@ -63,5 +66,16 @@ export default <Module>function docusI18n() { }) requireModule('nuxt-i18n') + + /** + * Temporary fix + * This should be done by nuxt-i18n + */ + this.extendRoutes(routes => { + // move start route to the end + const index = routes.findIndex(route => route.path === '/*') + const [all] = routes.splice(index, 1) + routes.push(all) + }) }) }