|
1 | 1 | ---
|
2 |
| -title: Plugins |
| 2 | +title: Plugin |
3 | 3 | type: guide
|
4 | 4 | order: 304
|
5 | 5 | ---
|
6 | 6 |
|
7 |
| -Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins: |
| 7 | +Biasanya plugin menambahkan kefungsionalan level-global ke dalam Vue. Tidak ada ruang lingkup yang didefinisikan secara ketat untuk sebuah plugin - Ada beberapa tipe plugin: |
8 | 8 |
|
9 |
| -1. Add some global methods or properties. e.g. [vue-custom-element](https://github.com/karol-f/vue-custom-element) |
| 9 | +1. Menambahkan beberapa metode global atau properti. Sebagai contoh [vue-custom-element](https://github.com/karol-f/vue-custom-element) |
10 | 10 |
|
11 |
| -2. Add one or more global assets: directives/filters/transitions etc. e.g. [vue-touch](https://github.com/vuejs/vue-touch) |
| 11 | +2. Menambahkan satu atau lebih aset global: direktif/filter/transisi dan lain-lain. Sebagai contoh [vue-touch](https://github.com/vuejs/vue-touch) |
12 | 12 |
|
13 |
| -3. Add some component options by global mixin. e.g. [vue-router](https://github.com/vuejs/vue-router) |
| 13 | +3. Menambahkan beberapa opsi komponen oleh *mixin* global. Sebagai contoh [vue-router](https://github.com/vuejs/vue-router) |
14 | 14 |
|
15 |
| -4. Add some Vue instance methods by attaching them to Vue.prototype. |
| 15 | +4. Menambahkan beberapa metode *instance* Vue dengan melampirkannya ke dalam Vue.prototype. |
16 | 16 |
|
17 |
| -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) |
| 17 | +5. Pustaka yang menyediakan API dari dirinya sendiri, dalam waktu yang sama menginjeksi beberapa kombinasi di atas. Sebagai contoh [vue-router](https://github.com/vuejs/vue-router) |
18 | 18 |
|
19 |
| -## Using a Plugin |
| 19 | +## Menggunakan Plugin |
20 | 20 |
|
21 |
| -Use plugins by calling the `Vue.use()` global method. This has to be done before you start your app by calling `new Vue()`: |
| 21 | +Menggunakan plugin dengan memanggil metode global `Vue.use()`. Ini harus dilakukan sebelum Anda memulai aplikasi Anda dengan memanggil `new Vue()`: |
22 | 22 |
|
23 | 23 | ``` js
|
24 |
| -// calls `MyPlugin.install(Vue)` |
| 24 | +// memanggil `MyPlugin.install(Vue)` |
25 | 25 | Vue.use(MyPlugin)
|
26 | 26 |
|
27 | 27 | new Vue({
|
28 |
| - //... options |
| 28 | + //... pilihan |
29 | 29 | })
|
30 | 30 | ```
|
31 | 31 |
|
32 |
| -You can optionally pass in some options: |
| 32 | +Secara Opsional, Anda bisa mengoper beberapa opsi: |
33 | 33 |
|
34 | 34 | ``` js
|
35 | 35 | Vue.use(MyPlugin, { someOption: true })
|
36 | 36 | ```
|
37 | 37 |
|
38 |
| -`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. |
| 38 | +`Vue.use` secara otomatis mencegah Anda dari menggunakan plugin yang sama lebih dari satu kali, jadi memanggil plugin yang sama beberapa kali hanya akan menginstal plugin satu kali. |
39 | 39 |
|
40 |
| -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: |
| 40 | +Beberapa plugin disediakan oleh plugin Vue.js resmi seperti `vue-router` secara otomatis memanggil `Vue.use()` jika `Vue` tersedia sebagai variabel global. Bagaimanapun dalam linkungan modul seperti CommonJS, Anda selalu butuh memanggil `Vue.use()` secara eksplisit: |
41 | 41 |
|
42 | 42 | ``` js
|
43 |
| -// When using CommonJS via Browserify or Webpack |
| 43 | +// Ketika menggunakan CommonJS via Browserify atau Webpack |
44 | 44 | var Vue = require('vue')
|
45 | 45 | var VueRouter = require('vue-router')
|
46 | 46 |
|
47 |
| -// Don't forget to call this |
| 47 | +// Jangan lupa untuk memanggil fungsi ini |
48 | 48 | Vue.use(VueRouter)
|
49 | 49 | ```
|
50 | 50 |
|
51 |
| -Checkout [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) for a huge collection of community-contributed plugins and libraries. |
| 51 | +Cek [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) untuk koleksi yang banyak dari kontribusi plugin dan pustaka komunitas. |
52 | 52 |
|
53 |
| -## Writing a Plugin |
| 53 | +## Menulis Plugin |
54 | 54 |
|
55 |
| -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: |
| 55 | +Plugin Vue.js harus membuka metode `install`. Metode akan dipanggil dengan konstruktor `Vue` sebagai argumen pertama, bersama dengan opsi yang memungkinkan: |
56 | 56 |
|
57 | 57 | ``` js
|
58 | 58 | MyPlugin.install = function (Vue, options) {
|
59 |
| - // 1. add global method or property |
| 59 | + // 1. tambahkan metode global atau properti |
60 | 60 | Vue.myGlobalMethod = function () {
|
61 |
| - // some logic ... |
| 61 | + // logika ... |
62 | 62 | }
|
63 | 63 |
|
64 |
| - // 2. add a global asset |
| 64 | + // 2. tambahkan aset global |
65 | 65 | Vue.directive('my-directive', {
|
66 | 66 | bind (el, binding, vnode, oldVnode) {
|
67 |
| - // some logic ... |
| 67 | + // logika ... |
68 | 68 | }
|
69 | 69 | ...
|
70 | 70 | })
|
71 | 71 |
|
72 |
| - // 3. inject some component options |
| 72 | + // 3. injeksi beberapa opsi komponen |
73 | 73 | Vue.mixin({
|
74 | 74 | created: function () {
|
75 |
| - // some logic ... |
| 75 | + // logika ... |
76 | 76 | }
|
77 | 77 | ...
|
78 | 78 | })
|
79 | 79 |
|
80 |
| - // 4. add an instance method |
| 80 | + // 4. tambahkan metode instance |
81 | 81 | Vue.prototype.$myMethod = function (methodOptions) {
|
82 |
| - // some logic ... |
| 82 | + // logika ... |
83 | 83 | }
|
84 | 84 | }
|
85 | 85 | ```
|
0 commit comments