Create a distributable widget with VueJS in Laravel backend

Recently I came across the problem of having to deliver a widget, for a client to place it on their site.

The backend is developed in Laravel, and the few things that it had of the front end, were made with VueJs.

I was wondering how to make a deliverable/distributable widget with VueJs and found this post https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

That is perfect, except that in the example, everything was done from vue-cli.

To integrate it into Laravel, what I did was create a new js file, which only includes the components of the widget, and add it to the webpack.mix.js

In this sliders.js (the widget is a product slider) I made the inclusion of Vue, the main component and the creation of the custom element

Then, everything can be worked normally like any other component.

Once the development is finished, run npm run prod and this generates the sliders.js and the sliders.css and to deliver the widget to any client, just send the url of these two files and the name of the custom element:

<link rel="stylesheet" href="https://your_domain.com/css/webcomponents/sliders.css">
<script src="https://your_domain.com/js/webcomponents/sliders.js"></script>
<custom-slider slider-id="4" site-id="site1"></custom-slider>

And that would be all.

I hope this helps, thank you.