Building plugins in Vue

I really love when a framework has a defined and well designed approach to extending the core functionality with custom features. This allows to help the framework to work even better in different scenarios where core functionality wasn't prepared to work with.

In the Nuxt ecosystem, you have modules - a domain code that can be used as a wrapper to help you achieve certain functionality like:

1. Integrate with third party service like Algolia Search, Storyblok CMS, Cloudinary Digital Asset Management, or Supabase Database
2. UI components library like Nuxt UI or Storefront UI
3. Quality improvement like Security, Performance, Accessibility

And the same approach works for Vue but in this particular case, we are not talking about the modules but about the ecosystem of plugins.

In this article, we will go through the process of building such a plugin to extend the core Vue framework with some custom functionality that can be used throughout the whole application.

🤔 What are Vue plugins?

As it is stated in the Vue.js documentation:

Plugins are self-contained code
that usually add app-level functionality to Vue.

A plugin is defined as either an object that exposes an install() method, or simply a function that acts as the install function itself. The install function receives the app instance along with additional options passed to app.use():

const myPlugin = {
  install(app, options) {
    // configure the app
  }
}

Plugins can be used to:

1. Register global components or directives
2. Inject a resource with app.provide()
3. Add global properties to app

This allows to encapsulate functionality into logically separated blocks that you can easily enable or disable at will.

🟢 Building a Vue plugin

To understand how Vue plugins work we will build a plugin that will convert a string so that the first letter will be capitalized.

First, let's create a new plugin in plugins directory:

// plugins/capitalizeFirstLetter.js

export default {
  install: (app, options) => {
    app.config.globalProperties.$capitalizeFirstLetter = (text) => {
      return text.charAt(0).toUpperCase() + text.slice(1);
    };
  }
}

This plugin will register a new global property in a form of a function that will allow to capitalize it's first letter and return a new string with that.

Next, we need to use this plugin in our Vue application:

import { createApp } from 'vue'

import capitalizeFirstLetter from './plugins/capitalizeFirstLetter.js'

createApp(App).use(capitalizeFirstLetter).mount('#app');
// or

And finally, let's use this new global property in our Vue app

<h1>{{ $capitalizeFirstLetter('text') }}</h1>

And that's it! This is how fully functional Vue plugin can look like. To make it even more interactive, you can pass configuration options to the plugin like following:

import { createApp } from 'vue'

import capitalizeFirstLetter from './plugins/capitalizeFirstLetter.js'

createApp(App).use(capitalizeFirstLetter, {
  foo: 'bar'
}).mount('#app');

These options can be then passed to the install function to further modify the behavior.

If you would like to learn more about Vue plugns, checkout the docs.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned about the concept plugins and how to build one in Vue framework.

Take care and see you next time!

And happy coding as always 🖥️