Writing Custom Vue Plugins

Vue is a relatively complete framework. It offers most of the features we need in our everyday apps. There are, however, cases where Vue’s default functionality doesn’t cover what we, our users or stakeholders, need. To allow for such additions, Vue offers plugins.

What are Vue plugins?

Vue plugins are pieces of functionality added to Vue. We often see them work with custom libraries. They can offer additional components, instance properties, and methods, or Vuex stores. It is up to the developer which kind of functionality they want to add to Vue.

Writing custom Vue plugins

A Vue plugin is, first and foremost, a JS object that offers a method called install. Vue will call this method while creating a Vue instance. The install method should add the functionality we want. However, the plugin itself can keep most of the functionality to itself as object keys, but, in most cases, we only need the install method.

A common best practice is to prefix any instance methods and instance properties with $ to denote they’re global. All of the default instance properties and methods do so too. Let’s look at a basic example of a Vue plugin that offers a $log method with a given log level: