Will I be able to achieve what I need with this module?

[andykov]

Hello. Before digging further, I wanted to ask you.

Will I be able to achieve what I need with this module? I need.

1. Create multiple widgets with built-in VUE. Separate files. (widget_1.js, widget_2.js ...)
2. Create a simple vue application, a widget manager. It will have a visual live example of widgets and several fields that will add parameters for the widget. Well, for example, the background color or the parameter with client_id. Then the client can copy the ready-made code to paste.

There are no such examples on the network anywhere :(

[karol-f]

In short Yes. Detailed answer:

1. You can create separate apps/files with widgets, but it will be probably easier to just have one Webpack build and load Custom Elements lazily - https://karol-f.github.io/vue-custom-element/#/demos/lazy-loading. That way You have it in one place but user will download only that elements that he/she use.
2. Yes, docs are made in such way (https://karol-f.github.io/vue-custom-element)

Regards

[andykov]

Thanks for the quick response.

1. Could you tell me how to split into files? Yes, I was thinking about asynchronous loading. But my widgets will be large, the resulting file will be large. Therefore, I would like to separate them separately.

[karol-f]

@andykov With lazy load Your file is not large. It's splitted to chunks and first file (entry) decides if load the rest.

But if You really want to split files (as in your question) - prepare multiple Webpack entry points - https://webpack.js.org/concepts/entry-points/

Regards.

[andykov]

@karol-f

I sketched an example. https://github.com/andykov/vue-custom-element

How do I insert styles in ShadowDom? I saw the shadowCss option when registering a component, but it's terribly inconvenient to write styles there. I tried to include shadowMode in the webpack, but in this case the styles do not work at all and there is an error in the console (screen) Are there any other ways or am I missing something?

Regards.