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
Copy file name to clipboardExpand all lines: src/guide/plugins.md
+32-29Lines changed: 32 additions & 29 deletions
Original file line number
Diff line number
Diff line change
@@ -1,39 +1,40 @@
1
-
# Plugins
1
+
# プラグイン
2
2
3
-
Plugins are self-contained code that usually add global-level functionality to Vue. It is either an `object` that exposes an `install()`method, or a`function`.
4.Add some global instance methods by attaching them to `config.globalProperties`.
13
+
4.`config.globalProperties` にグローバルインスタンスメソッドを追加する
14
14
15
-
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)).
In order to better understand how to create your own Vue.js plugins, we will create a very simplified version of a plugin that displays `i18n`ready strings.
Whenever this plugin is added to an application, the `install` method will be called if it is an object. If it is a `function`, the function itself will be called. In both cases, it will receive two parameters - the `app` object resulting from Vue's `createApp`, and the options passed in by the user.
Let's begin by setting up the plugin object. It is recommended to create it in a separate file and export it, as shown below to keep the logic contained and separate.
We will assume that our users will pass in an object containing the translated keys in the `options` parameter when they use the plugin. Our `$translate` function will take a string such as `greetings.hello`, look inside the user provided configuration and return the translated value - in this case, `Bonjour!`
Plugins also allow us to use `inject`to provide a function or attribute to the plugin's users. For example, we can allow the application to have access to the `options`parameter to be able to use the translations object.
Additionally, since we have access to the `app`object, all other capabilities like using `mixin`and`directive`are available to the plugin. To learn more about `createApp`and the application instance, check out the [Application API documentation](/api/application-api.html).
82
+
さらに、`app`オブジェクトにアクセスできるため、`mixin`や`directive`など、他のすべての機能をプラグインで利用できます。`createApp`とアプリケーションインスタンスについて更に詳しく学ぶには、[アプリケーション API ドキュメント](/api/application-api.html) をチェックしてください。
81
83
82
84
```js
83
85
// plugins/i18n.js
@@ -92,35 +94,35 @@ export default {
92
94
93
95
app.directive('my-directive', {
94
96
mounted (el, binding, vnode, oldVnode) {
95
-
//some logic ...
97
+
//何らかのロジック ...
96
98
}
97
99
...
98
100
})
99
101
100
102
app.mixin({
101
103
created() {
102
-
//some logic ...
104
+
//何らかのロジック ...
103
105
}
104
106
...
105
107
})
106
108
}
107
109
}
108
110
```
109
111
110
-
## Using a Plugin
112
+
## プラグインを使う
111
113
112
-
After a Vue app has been initialized with `createApp()`, you can add a plugin to your application by calling the `use()`method.
It also 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.
The second parameter is optional, and depends on each particular plugin. In the case of the demo `i18nPlugin`, it is an object with the translated strings.
If you are using third party plugins such as `Vuex`or`Vue Router`, always check the documentation to know what that particular plugin expects to receive as a second parameter.
Checkout [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) for a huge collection of community-contributed plugins and libraries.
0 commit comments