|
1 | 1 | ---
|
2 |
| -title: Plugins (En) |
| 2 | +title: Plugins |
3 | 3 | type: guide
|
4 | 4 | order: 18
|
5 | 5 | ---
|
6 | 6 |
|
7 |
| -## Writing a Plugin |
| 7 | +## Écrire un plugin |
8 | 8 |
|
9 |
| -<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write:</p> |
| 9 | +Les plugins sont habituellement ajoutés au niveau des fonctionnalités globales de Vue. Il y a un cadre strictement défini pour un plugin et il y a divers types de plugins que vous pouvez écrire pour : |
10 | 10 |
|
11 |
| -1. Add some global methods or properties. e.g. [vue-custom-element](https://github.com/karol-f/vue-custom-element) |
| 11 | +1. Ajouter plusieurs méthodes globales ou propriétés. Par ex. [vue-custom-element](https://github.com/karol-f/vue-custom-element) |
12 | 12 |
|
13 |
| -2. Add one or more global assets: directives/filters/transitions etc. e.g. [vue-touch](https://github.com/vuejs/vue-touch) |
| 13 | +2. Ajouter une ou plusieurs ressource global : directives, filters, transitions, etc. Par ex. [vue-touch](https://github.com/vuejs/vue-touch) |
14 | 14 |
|
15 |
| -3. Add some component options by global mixin. e.g. [vuex](https://github.com/vuejs/vuex) |
| 15 | +3. Ajouter plusieurs options de composant avec un mixin global. Par ex. [vuex](https://github.com/vuejs/vuex) |
16 | 16 |
|
17 |
| -4. Add some Vue instance methods by attaching them to Vue.prototype. |
| 17 | +4. Ajouter des méthodes d'instance de Vue en les reliant au prototype de Vue. |
18 | 18 |
|
19 |
| -5. A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. [vue-router](https://github.com/vuejs/vue-router) |
| 19 | +5. Fournir une bibliothèque avec sa propre API, qui injecte en même temps certains éléments précédemment cités. Par ex. [vue-router](https://github.com/vuejs/vue-router) |
20 | 20 |
|
21 |
| -A Vue.js plugin should expose an `install` method. The method will be called with the `Vue` constructor as the first argument, along with possible options: |
| 21 | +Un plugin Vue.js doit exposer une méthode `install`. Cette méthode sera appelée avec le constructeur de `Vue` en tant que premier argument, avec les options possibles suivantes : |
22 | 22 |
|
23 | 23 | ``` js
|
24 | 24 | MyPlugin.install = function (Vue, options) {
|
25 |
| - // 1. add global method or property |
| 25 | + // 1. ajouter une méthode globale ou une propriété |
26 | 26 | Vue.myGlobalMethod = function () {
|
27 |
| - // something logic ... |
| 27 | + // de la logique de code... |
28 | 28 | }
|
29 | 29 |
|
30 |
| - // 2. add a global asset |
| 30 | + // 2. ajouter une ressource global |
31 | 31 | Vue.directive('my-directive', {
|
32 | 32 | bind (el, binding, vnode, oldVnode) {
|
33 |
| - // something logic ... |
| 33 | + // de la logique de code... |
34 | 34 | }
|
35 | 35 | ...
|
36 | 36 | })
|
37 | 37 |
|
38 |
| - // 3. inject some component options |
| 38 | + // 3. injecter des options de composant |
39 | 39 | Vue.mixin({
|
40 | 40 | created: function () {
|
41 |
| - // something logic ... |
| 41 | + // de la logique de code... |
42 | 42 | }
|
43 | 43 | ...
|
44 | 44 | })
|
45 | 45 |
|
46 |
| - // 4. add an instance method |
| 46 | + // 4. ajouter une méthode d'instance |
47 | 47 | Vue.prototype.$myMethod = function (options) {
|
48 |
| - // something logic ... |
| 48 | + // de la logique de code... |
49 | 49 | }
|
50 | 50 | }
|
51 | 51 | ```
|
52 | 52 |
|
53 |
| -## Using a Plugin |
| 53 | +## Utiliser un plugin |
54 | 54 |
|
55 |
| -Use plugins by calling the `Vue.use()` global method: |
| 55 | +Utiliser un plugin en appelant la méthode globale `Vue.use()` : |
56 | 56 |
|
57 | 57 | ``` js
|
58 |
| -// calls `MyPlugin.install(Vue)` |
| 58 | +// appel `MyPlugin.install(Vue)` |
59 | 59 | Vue.use(MyPlugin)
|
60 | 60 | ```
|
61 | 61 |
|
62 |
| -You can optionally pass in some options: |
| 62 | +Vous pouvez optionnellement passer certaines options : |
63 | 63 |
|
64 | 64 | ``` js
|
65 | 65 | Vue.use(MyPlugin, { someOption: true })
|
66 | 66 | ```
|
67 | 67 |
|
68 |
| -`Vue.use` automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once. |
| 68 | +`Vue.use` empêchera automatiquement l'utilisation du même plugin plusieurs fois. Ainsi appeler de multiple fois le même plugin ne l'installera qu'une fois. |
69 | 69 |
|
70 |
| -Some plugins provided by Vue.js official plugins such as `vue-router` automatically calls `Vue.use()` if `Vue` is available as a global variable. However in a module environment such as CommonJS, you always need to call `Vue.use()` explicitly: |
| 70 | +Certains plugins fournis officiellement par Vue.js comme `vue-router` appelle automatiquement `Vue.use()` si `Vue` est disponible en tant que variable globale. Cependant, dans un environnement modulaire comme avec CommonJS, vous devrez toujours manuellement appeler `Vue.use()` : |
71 | 71 |
|
72 | 72 | ``` js
|
73 |
| -// When using CommonJS via Browserify or webpack |
| 73 | +// En utilisant CommonJS depuis Browserify ou webpack |
74 | 74 | var Vue = require('vue')
|
75 | 75 | var VueRouter = require('vue-router')
|
76 | 76 |
|
77 |
| -// Don't forget to call this |
| 77 | +// N'oubliez pas de l'appeler |
78 | 78 | Vue.use(VueRouter)
|
79 | 79 | ```
|
80 | 80 |
|
81 |
| -Checkout [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) for a huge collection of community-contributed plugins and libraries. |
| 81 | +Consultez [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) pour une large collection de plugin et bibliothèque fournis par la contribution de la communauté. |
0 commit comments