Injecting vue plugins

(Note: This is one of the articles written in a series of vue plugin-based development. If you are new, please check out the whole story here)

Photo by Vlad Hilitanu on Unsplash

In our earlier journey, we saw how to build an application as a plugin. Now let’s see how we can inject plugins into any vue application.

To inject our plugin it is straight forward we have to use the Vue’s native Vue.use method, and we can insert our plugin

import userPlugin from '@myapp/user'
Vue.use(userPlugin, {
  router: router,
  store: store,
  i18n: i18n,
});

That’s it, and our plugin will work in any application. Still, to make development a little easier, we build another plugin core whose primary responsibility is to inject the plugins into any vue application. Not only that, it has some validations, helper methods a small store to use across the plugins. It’s the entry point for anyone, and we can have some common methods and helpers for all the plugins in this.

How it works

So our core plugin will export a method initCore, which is the entry method, and the user (whoever is consuming) has to invoke this method and pass some bunch of configurations to it, and rest will be taken care by core plugin. Let’s see the example initCore initialization.

initCore initialization

Here config is the place where we can be creative by giving a path to the user to control all the plugins, here is our style of configuration

Sample config file

(NOTE: Will see routeController and services in the future article. Why it’s used and what problem it's solving)

We are expecting some standard properties and methods and then in plugins. The user is defining which modules to inject, and also we are giving control to provide submodules to insert inside each module.

Let’s see how we are parsing plugins inside initCore

Sample core with _parseThePlugins method

Again for the configuration part, use your creativeness. It defines the essence of your application. Experiment and let us know if you find a better way.

So in our next journey will see 3 layers of front-end development