You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations.
2
+
title: Modules
3
+
description: Les modules sont des extensions de Nuxt.js qui augmentent ses fonctionnalités et permettent de l'intégration continue.
4
4
---
5
5
6
-
> Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations.
6
+
> Les modules sont des extensions de Nuxt.js qui augmentent ses fonctionnalités et permettent de l'intégration continue.
7
7
8
8
## Introduction
9
9
10
-
<pstyle="width: 294px;position: fixed; top : 64px; right: 4px;"class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <ahref="https://github.com/vuejs-fr/nuxt"target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>While developing production grade application using Nuxt, you will find out soon that Nuxt core functionalities are not enough and writing configs and plugins for each project is a repetitive, boring and time consuming job. Also adding every new feature into Nuxt is not possible as it would make it a fat framework.</p>
10
+
Pendant la phase d'amélioration de votre application pour la production, vous allez découvrir que les fonctionnalités offertes par celui-ci ne sont pas complètes. Faire la configuration et ajouter les plugins de chaque projet est répétitif, ennuyant et prend du temps. Ajouter chaque nouvelle fonctionnalité dans Nuxt serait impossible sans rendre le framework lourd.
11
11
12
-
This was the reason Nuxt introduces a higher order modular system to easily extend the core. Modules are basically **functions**which are called sequentially when booting Nuxt and core awaits for all of them to be finished before continue it's job. So they have the chance to customize almost any aspect of Nuxt and thanks to modular design of Nuxt itself and webpack [Tapable](https://github.com/webpack/tapable) technology they can also register hooks for certain entry points like builder initialization.
12
+
C'est pourquoi Nuxt introduit un système modulaire d'ordre supérieur pour facilement étendre ses fonctionnalités de base. Les modules sont en fait des **fonctions**qui sont appelées de manière séquentielle lors de la phase de démarrage de Nuxt. Le cœur va attendre que chacun d'entre eux soit chargé avant de continuer son travail. Ainsi vous avez la possibilité de personnaliser le moindre aspect de Nuxt. Grâce à sa conception modulaire ainsi que webpack [Tapable](https://github.com/webpack/tapable), il peut également abonner des points d'ancrage (« hooks ») pour certaines étapes comme l'initialisation de la phase de build.
13
13
14
-
Another point of using modules is that they can be refactored and packaged out of the project and released as npm packages so you can share and use high quality integration and solutions from Nuxt community with no pain! You might interested in modules if you:
14
+
Un autre point à propos des modules est qu'ils peuvent être refactorisés et packagés en dehors du projet de manière à être versionnés en tant que packages npm. Ainsi vous pouvez partager et utiliser des intégrations et solutions de qualité auprès de la communauté Nuxt sans effort ! Vous pourriez être intéressé par les modules si :
15
15
16
-
-Are a member of an**agile team**that want to set up your project instantly and avoid **re-inventing**the wheel for common tasks like Google Analytics tools for your new project.
17
-
-Are an **enterprise**company which **quality**and **reusability**is important for your projects.
18
-
-Are a lovely **Open Source** enthusiast and interested in **sharing** your works with community in an easy manner.
19
-
-Are a lazy programmer and don't like digging into details setting up every new library or integration (Someone else should already provided a module for that but you can always ask community for making one).
20
-
-Tired of breaking low level API and Usage changes, and need **things that just work™**.
16
+
-vous êtes un membre d'une**équipe agile**qui souhaite mettre en place son projet instantanément et éviter de **réinventer**la roue pour les tâches habituelles comme des mécanismes Google Analytics pour vos nouveaux projets,
17
+
-vous êtes une **société**qui accorde de l'importance à la **qualité**et la **réutilisabilité**de ses projets,
18
+
-Vous êtes un membre super enthousiaste de la communauté *Open Source* et que vous souhaitez *partager* avec la communauté d'une façon simple.
19
+
-Vous êtes un développeur occupé et vous n'aimez pas vous encombrer avec des détails comme le paramétrage de chaque nouvelle bibliothèque ou intégration (quelqu'un l'aura surement déjà fait pour vous, ou vous pourriez demander à quelqu'un de la communauté de le faire).
20
+
-Vous êtes fatigué de l'utilisation des API bas niveau et de leur changement continu et vous souhaiter **simplement des choses fonctionnelles**.
21
21
22
-
## Write a basic Module
22
+
## Écrire un module basique
23
23
24
-
As already mentioned modules are just simple functions. They can be packaged as npm modules or directly included in project source code.
24
+
Comme précédemment mentionnés, les modules sont juste de simples fonctions. Ils peuvent être packagés en tant que modules npm ou directement inclus dans le code source du projet.
This is the object passed using `modules`array by user we can use it to customize it's behavior.
39
+
Ceci est un objet passé en utilisant le tableau `modules`par les utilisateurs qui souhaitent personnaliser son comportement.
40
40
41
41
**`this.options`**
42
42
43
-
You can directly access to Nuxt options using this reference. This is `nuxt.config.js`with all default options assigned to and can be used for shared options between modules.
43
+
Vous pouvez accéder directement aux options de Nuxt en utilisant cette référence. C'est la configuration `nuxt.config.js`avec ses options par défaut assignées qui peuvent être utilisées en tant qu'options partagées à travers les modules.
44
44
45
45
**`this.nuxt`**
46
46
47
-
This is a reference to current Nuxt instance. Refer to [Nuxt class docs for available methods](/api/internals-nuxt).
47
+
C'est une référence à l'instance courante de Nuxt. Consultez la documentation sur la [Classe Nuxt](/api/internals-nuxt) pour obtenir les méthodes disponibles.
48
48
49
49
**`this`**
50
50
51
-
Context of modules. Refer to [ModuleContainer](/api/internals-module-container)class docs for available methods.
51
+
Le contexte des modules. Consultez la documentation sur la [Classe ModuleContainer](/api/internals-module-container)pour obtenir les méthodes disponibles.
52
52
53
53
**`module.exports.meta`**
54
54
55
-
This line is**required**if you are publishing module as an npm package. Nuxt internally uses meta to work better with your package.
55
+
Cette ligne est**obligatoire**si vous publiez un module en tant que package npm. Nuxt utilise en interne les meta pour mieux fonctionner avec votre package.
56
56
57
57
**nuxt.config.js**
58
58
59
59
```js
60
60
module.exports= {
61
61
modules: [
62
-
//Simple usage
62
+
//Utilisation simple
63
63
'~/modules/simple'
64
64
65
-
//Passing options
65
+
//Passage des options
66
66
['~/modules/simple', { token:'123' }]
67
67
]
68
68
}
69
69
```
70
70
71
-
We then tell Nuxt to load some specific modules for a project with optional parameters as options. Please refer to [modules configuration](/api/configuration-modules)docs for more info!
71
+
Nous pouvons dire à Nuxt de charger des modules spécifiques pour un projet avec des paramètres optionnels en tant qu'options. Consultez la documentation sur la [configuration des modules](/api/configuration-modules)pour plus d'informations !
72
72
73
-
## Async Modules
73
+
## Modules asynchrones
74
74
75
-
Not all modules will do everything synchronous. For example you may want to develop a module which needs fetching some API or doing async IO. For this, Nuxt supports async modules which can return a Promise or call a callback.
75
+
Tous les modules ne font pas tout de manière synchrone. Par exemple vous pouvez développer un module qui a besoin d'aller récupérer des informations depuis une API ou qui fait des échanges asynchrones. Nuxt permet le support de modules asynchrones grâce à l'utilisation d'une promesse ou d'une fonction de rappel.
76
76
77
-
### Use async/await
77
+
### Utilisation de async / await
78
78
79
-
<pclass="Alert Alert--orange">Be aware that `async`/`await` is only supported in Node.js > 7.2. So if you are a module developer at least warn users about that if using them. For heavily async modules or better legacy support you can use either a bundler to transform it for older Node.js comparability or using promise method.</p>
79
+
<pclass="Alert Alert--orange">Faites attention avec `async` et `await`, ils sont supportés uniquement depuis Node.js 7.2+. Donc si vous êtes un développeur de modules, n'oubliez pas d'avertir vos utilisateurs si vous les utilisez. Pour des modules asynchrones plus stables ou avec un support des versions antérieures vous pouvez utiliser un paqueteur pour les transformer en de vieille version de compatibilité Node.js ou utilisant des méthodes de promesse.</p>
80
80
81
81
```js
82
82
constfse=require('fs-extra')
83
83
84
84
module.exports=asyncfunctionasyncModule() {
85
-
//You can do async works here using `async`/`await`
85
+
//Vous pouvez développer de manière asynchrone ici en utilisant `async` / `await`
86
86
let pages =awaitfse.readJson('./pages.json')
87
87
}
88
88
```
89
89
90
-
### Return a Promise
90
+
### Retourner une promesse
91
91
92
92
```js
93
93
constaxios=require('axios')
@@ -96,12 +96,12 @@ module.exports = function asyncModule() {
//Faites quelque chose en étendant les routes de Nuxt
100
100
})
101
101
}
102
102
```
103
103
104
-
### Use callbacks
104
+
### Utiliser des fonctions de rappel
105
105
106
106
```js
107
107
constaxios=require('axios')
@@ -116,11 +116,11 @@ module.exports = function asyncModule(callback) {
116
116
```
117
117
118
118
119
-
## Common Snippets
119
+
## Exemples courants
120
120
121
-
### Top level options
121
+
### Options de haut niveau
122
122
123
-
Sometimes it is more convenient if we can use top level options while register modules in`nuxt.config.js`. So we can combine multiply option sources.
123
+
Parfois il est plus simple d'utiliser des options de haut niveau lors de l'abonnement de modules à`nuxt.config.js`. Donc nous pouvons combiner les options de sources multiples.
124
124
125
125
**nuxt.config.js**
126
126
@@ -130,7 +130,7 @@ module.exports = {
130
130
'@nuxtjs/axios'
131
131
],
132
132
133
-
//axios module is aware of this by using `this.options.axios`
133
+
//Le module axios est informé de cela via `this.options.axios`
134
134
axios: {
135
135
option1,
136
136
option2
@@ -147,9 +147,9 @@ module.exports = function (moduleOptions) {
147
147
}
148
148
```
149
149
150
-
### Provide plugins
150
+
### Fournir des plugins
151
151
152
-
It is common that modules provide one or more plugins when added. For example [bootstrap-vue](https://bootstrap-vue.js.org)module would require to register itself into Vue. For this we can use `this.addPlugin` helper.
152
+
Il est courant que les modules fournissent un ou plusieurs plugins quand ils sont ajoutés. Par exemple le module [bootstrap-vue](https://bootstrap-vue.js.org)nécessite d'être abonné lui-même dans Vue. Pour cela, nous pouvons utiliser la fonction utilitaire `this.addPlugin`.
Registered templates and plugins can leverage [lodash templates](https://lodash.com/docs/4.17.4#template)to conditionally change registered plugins output.
176
+
Abonner des templates et des plugins peut influencer les [templates lodash](https://lodash.com/docs/4.17.4#template)pour changer conditionnellement les sorties des plugins abonnés.
177
177
178
178
**plugin.js**
179
179
@@ -182,7 +182,7 @@ Registered templates and plugins can leverage [lodash templates](https://lodash.
// Nuxt will replace `options.ua` with `123` when copying plugin to project
199
+
// Nuxt remplacera `options.ua` par `123` quand il copiera le plugin au projet.
200
200
ua:123,
201
201
202
-
//conditional parts with dev will be stripped from plugin code on production builds
202
+
//les parties conditionnelles vont être retirées du code du plugin pour les builds de production
203
203
debug:this.options.dev
204
204
}
205
205
})
206
206
}
207
207
```
208
208
209
-
### Add a CSS library
209
+
### Ajouter une bibliothèque CSS
210
210
211
-
It is recommended checking if user already not provided same library to avoid adding duplicates. Also always consider having**an option to disable**adding css files by module.
211
+
Il est recommandé de vérifier si un utilisateur ne fournit pas déjà la même bibliothèque pour éviter les ajouts en doublon. Fournissez donc toujours une**option de désactivation**lors de l'ajout de fichier CSS par un module.
## Lancer des tâches sur des points d'ancrage spécifiques
273
273
274
-
Your module may need to do things only on specific conditions not just during Nuxt initialization. We can use powerful [Tapable](https://github.com/webpack/tapable)plugin system to do tasks on specific events. Nuxt will await for us if hooks return a Promise or are defined as`async`.
274
+
Votre module peut avoir besoin de choses seulement sous certaines conditions et pas seulement lors de l'initialisation de Nuxt. Nous utilisons le puissant système de plugin [Tapable](https://github.com/webpack/tapable)pour réaliser des tâches sur des évènements spécifiques. Nuxt va les attendre si les points d'ancrage retournent une promesse ou sont définis comme`async`.
275
275
276
276
```js
277
277
module.exports=function () {
278
-
//Add hook for modules
278
+
//Ajoute un point d'ancrage au module
279
279
this.nuxt.plugin('module', moduleContainer=> {
280
-
//This will be called when all modules finished loading
280
+
//Ceci sera appelé quand tous les modules auront fini d'être chargés
281
281
})
282
282
283
-
//Add hook for renderer
283
+
//Ajoute un point d'ancrage au moteur de rendu
284
284
this.nuxt.plugin('renderer', renderer=> {
285
-
//This will be called when renderer was created
285
+
//Ceci sera appelé quand le moteur de rendu aura été créé
286
286
})
287
287
288
-
//Add hook for build
288
+
//Ajoute un point d'ancrage au build
289
289
this.nuxt.plugin('build', asyncbuilder=> {
290
-
//This will be called once when builder created
290
+
//Ceci sera appelé une fois le build fait
291
291
292
-
//We can even register internal hooks here
292
+
//On peut également enregistrer des points d'ancrage interne ici
293
293
builder.plugin('compile', ({compiler}) => {
294
-
//This will be run just before webpack compiler starts
294
+
//Ceci sera lancé juste avant que le compilateur de webpack démarre
295
295
})
296
296
})
297
297
298
-
//Add hook for generate
298
+
//Ajoute un point d'ancrage à la génération
299
299
this.nuxt.plugin('generate', asyncgenerator=> {
300
-
//This will be called when a Nuxt generate starts
300
+
//Ceci sera appelé quand la génération de Nuxt va commencer
301
301
})
302
302
}
303
303
```
304
304
305
-
<pclass="Alert">There are many many more hooks and possibilities for modules. Please refer to [Nuxt Internals](/api/internals) to learn more about Nuxt internal API.</p>
305
+
<pclass="Alert">Il existe beaucoup d'autres points d'ancrage et de possibilités pour les modules. Consultez les [mécanismes de Nuxt](/api/internals) pour en apprendre plus à propos de l'API interne de Nuxt.</p>
0 commit comments