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.