Plug-ins are self-contained code that typically adds global-level functionality to the Vue. It can be either an object that exposes the install() method or a function
There are no hard and fast limits to what a plug-in can do — there are usually:
-
Add global methods or properties. Such as: the vue – custom – element
-
Add global resources: directives/filters/transitions, etc. Such as: the vue – touch)
-
Add some component options through global mixins. (e.g., vue – the router)
-
Add global instance methods by adding them to config.globalProperties(Vue 3.x)/vue.prototype (Vue 2.x).
-
A library that provides its own API and provides one or more of the functions mentioned above. Such as the vue – the router
Vue 3.x
Writing a plug-in
To better understand how to create your own version of the vue.js plug-in, we’ll create a very simplified version of the plug-in that displays strings prepared by i18n.
Whenever this plug-in is added to the application, the Install method is called if it is an object. If it is a function, the function itself will be called. In both cases — it receives two arguments: the App object generated by Vue’s createApp and the option passed in by the user.
Let’s start by setting up the plug-in object. It is recommended to create it in a separate file and export it, as shown below, to preserve the contained and detached logic.
// plugins/i18n.js
export default {
install: (app, options) = > {
// Plugin code goes here}}Copy the codeWe want a function to translate the whole application available key, so we will use the app. The config. GlobalProperties exposed it.
This function will receive a key string, which we will use to find the transformed string in the user-provided options.
// plugins/i18n.js
export default {
install: (app, options) = > {
app.config.globalProperties.$translate = key= > {
return key.split('. ').reduce((o, i) = > {
if (o) return o[i]
}, options)
}
}
}
Copy the codeWe assume that when the user uses the plug-in, an object containing the translated key will be passed in the Options parameter. Our $translate function will use a string such as greetings.hello to look inside the user-supplied configuration and return the transformed value – in this case Bonjour! .
greetings: {
hello: 'Bonjour! '
}
Copy the codePlug-ins also allow us to use Inject to provide functionality or attributes to the users of the plug-in. For example, we can allow the application to access the options parameter to be able to use the translation object.
// plugins/i18n.js
export default {
install: (app, options) = > {
app.config.globalProperties.$translate = key= > {
return key.split('. ').reduce((o, i) = > {
if (o) return o[i]
}, options)
}
app.provide('i18n', options)
}
}
Copy the codePlug-in users can now inject[i18N] into their components and access the object.
In addition, since we have access to app objects, the plug-in can use all other functions, such as mixin and directive. To learn more about createApp and Application instances, see the Application API documentation.
// plugins/i18n.js
export default {
install: (app, options) = > {
app.config.globalProperties.$translate = (key) = > {
return key.split('. ')
.reduce((o, i) = > { if (o) return o[i] }, options)
}
app.provide('i18n', options)
app.directive('my-directive', {
mounted (el, binding, vnode, oldVnode) {
// some logic ...}... }) app.mixin({created() {
// some logic ...}... }}})Copy the codeThe use of plug-in
After initializing the Vue application with createApp(), you can add the plug-in to your application by calling the Use () method.
We will demonstrate this using the i18nPlugin created in the writing plug-in section.
The use() method takes two arguments. The first is the plug-in to install, in this case the i18nPlugin.
It also automatically prevents you from using the same plug-in more than once, so multiple calls to the same plug-in will only install the plug-in once.
The second parameter is optional and depends on each specific plug-in. In the case of the i18nPlugin, it is an object with a transformed string.
import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(Root)
const i18nStrings = {
greetings: {
hi: 'Hallo! '
}
}
app.use(i18nPlugin, i18nStrings)
app.mount('#app')
Copy the codeVue 2.x
Developing a plug-in
Vue.js plug-ins should expose an install method. The first argument to this method is the Vue constructor, and the second argument is an optional option object:
MyPlugin.install = function (Vue, options) {
// 1. Add a global method or property
Vue.myGlobalMethod = function () {
/ / logic...
}
// 2. Add global resources
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
/ / logic...}... })// 3. Inject component options
Vue.mixin({
created: function () {
/ / logic...}... })// 4. Add instance methods
Vue.prototype.$myMethod = function (methodOptions) {
/ / logic...}}Copy the codeAn example of registering a global component
Writing a component
tab-bar.vue
Copy the codeImplement the install() method
// tab-bar.js
// Import components
import TabBarComponent from 'components/tab-bar';
// Define the TabBar object
const TabBar = {
// install is the default method. When the component is used, the install method itself is called and a Vue class parameter is passed.
install: function (Vue) { Vue.component(TabBarComponent.name, TabBarComponent); }};export default TabBar;
Copy the codeThe use of plug-in
Use the plug-in with the global method vue.use (). It needs to be done before you call new Vue() to start the application:
import TabBar from '@/modules/tab-bar';
/ / call ` MyPlugin. Install ` (Vue)
Vue.use(MyPlugin)
Vue.use(TabBar);
new Vue({
/ /... Component options
})
Copy the codeAn optional option object can also be passed:
Vue.use(MyPlugin, { someOption: true })
Copy the codeVue.use automatically prevents multiple registrations of the same plug-in, and the plug-in will only be registered once even after multiple calls.