Every two weeks I send out a newsletter containing lots of interesting stuff for the modern PHP developer. You can expect quick tips, links to interesting tutorials, opinions and packages. Want to learn the cool stuff? Then sign up now!

Exposing Multiple Vue Components as a Plugin

In a new post on his blog Sebastian De Deyne, JavaScript (and all-round) wizard at Spatie, describes a technique to expose Vue components as a plugin.

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.

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.

https://sebastiandedeyne.com/posts/2017/exposing-multiple-vue-components-as-a-plugin

Freek Van der Herten is a partner and developer at Spatie, an Antwerp based company that specializes in creating web apps with Laravel. After hours he writes about modern PHP and Laravel on this blog. When not coding he’s probably rehearsing with his kraut rock band. He loves waffles and butterflies.
  • Mu.Ah

    you can also try a simpler approach, so instead of

    “`js
    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 };

    // somewhere else
    import Tabs from ‘vue-tabs-component’;

    Vue.use(Tabs)
    “`

    use
    “`js
    Vue.component(‘tab’, require(‘./components/Tab’));
    Vue.component(‘tabs’, require(‘./components/Tabs’));

    // somewhere else
    require(‘vue-tabs-component’)
    “`