Exposing multiple Vue components as a plugin

Quick Vue tip for package authors! If you publish a package that exposes multiple Vue components, you can write a small plugin to install them all at once.

import Vue from "vue";
import MyPackage from "my-package";

Vue.use(MyPackage);

new Vue({ el: "#app" });

<div id="app">
  <my-package-component></my-package-component>
  <my-other-package-component></my-other-package-component>
</div>

We recently published a tabs package. Initially, users needed to register two components in order to create a tabular interface: Tabs, which acts as a container, and Tab, which defines a single tab and its contents in the interface.

import Vue from "vue";
import { Tabs, Tab } from "vue-tabs-component";

Vue.component("tabs", Tabs);
Vue.component("tab", Tab);

new Vue({ el: "#app" });

<div id="app">
  <tabs> <tab title="Hello!"> Hello, world! </tab> </tabs>
</div>

Since developers are most likely going to use both components together, and there’s a fair chance that they’d want to register them globally like in the example, it made sense to provide some sort of auto-install option.

The cleanest way to provide automatic component registration appeared to be by shipping a Vue plugin with the package.

Here’s what the packages’ default export looks like now:

import Tab from './components/Tab';
import Tabs from './components/Tabs';

export default {
    install (Vue) {
        Vue.component('tab', Tab);
        Vue.component('tabs', Tabs);
    }
}

export { Tab, Tabs };

Like this, all it takes is a Vue.use to register all the packages’ components!

import Vue from 'vue';
import Tabs from 'vue-tabs-component';

Vue.use(Tabs);

new Vue({ el: '#app' });

If developers want more fine grained control over the package features they do and don’t want, they can still use the named exports.

import Vue from 'vue';
import { Tabs } from 'vue-tabs-component';
import MyTab from './MyTab';

Vue.component('tabs', Tabs);
Vue.component('tab', MyTab);

new Vue({ el: '#app' });

Credit to @cristijora for pointing out that this is possible in a vue-tabs-component auto installation PR.