What is a plug-in

In the Vue framework, if we need to add some functions to Vue, Vue has left me a way of plug-in. We can write our own plug-in, register the plug-in in in Vue, and then use it.

Through Vue plug-ins, we can realize some functions that Vue framework does not have, or use plug-ins written by others to help us realize some functions more quickly.

There are no strict requirements for the functional scope of plug-ins. According to official examples, there are generally the following:

1. Add global methods or attributes, such as: vue-custom-element , we can add some global components in the form of plug-ins, and then use it in any page or component. This is also the way to install components in the Element UI or Ant Design component library.
2. Add global resources: instructions / transitions, etc. For example: vue-touch , we can also use plug-ins to add some global custom instructions to realize our functions.
3. Add some component options through global mixin s. (e.g vue-router)
4. Add global instance methods by adding them to config.globalProperties. For example, we may put the $http request on the global instance method, which is convenient for us to use in any page or component, and there is no need to import it explicitly.
5. A library that provides its own API and one or more of the above-mentioned functions, such as vue-router,vuex Wait.

Writing plug-ins

Writing a Vue plug-in is actually very simple. A plug-in is actually an object or a function. If it is an object, it will call the install method in the object. If it is a function, it will call this function. Whether it is the install method of the object or the way of calling the function, they will receive two parameters: 1. A generated by Vue's create app PP object, 2 is the parameter passed in by the user.

Let's start with the simplest i18n function.

Generally, we put the plug-ins in the plugins folder, which is easy to maintain and manage

We create an i18n.js file

export default {
  install: (app, options) => {
    // Write plug-in code
  }
}

For example, we need a global function to translate the whole program. We can hang the method on the app.config.globalProperties property to expose it.

Function receives a key string. We will use it to find the converted String in the parameter object provided by the user.

// 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)
    }
  }
}

Suppose 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, so the value found will be Bonjour!.

For example:

greetings: {
  hello: 'Bonjour!'
}

We can also use inject to provide functions or properties. For example, we can allow the application to access the options parameter to use the parameter object passed in when installing the plug-in.

// 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)
  }
}

Now we can use inject[i18n] to inject into some pages or components to access the object.

Because Vue provided me with the app object as the first parameter of the plug-in, the plug-in can use all other functions, such as mixin and directive. To learn more about createApp and application instances, see Application API documentation.

For example, we have registered new user-defined instructions and global mixin methods in the plug-in:

// 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 ...
      }
      //...
    })
  }
}

Using plug-ins

After we have written the plug-in above, we can use the plug-in. It is also very simple to use the plug-in in Vue. We can add the plug-in to our application by using the use() method.

The use() method has two parameters. The first is the plug-in to install.

The second parameter is optional. We can pass some custom parameters to the plug-in.

// main.js
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')

Finally, we use this plug-in in the page:

<template>
  <h1>{{ $translate("greetings.hi") }}</h1>
  <div>i18n Plug in Example</div>
</template>

Final display:

This sample online code: https://codesandbox.io/s/vue3-i18n-plugins-pbcb0

last

Reference: Vue plug-in - official documentation: https://v3.cn.vuejs.org/guide/plugins.html

Learn more front-end knowledge together. Wechat searches [Xiaoshuai's Programming Notes] and updates them every day