Efficient use of multiple custom elements in a single project

[micdobro]

First - great project which enables me to nicely transition from jQuery to Vue without a need of total rewrite on day one.

Assumptions:

• hybrid project (i.e. Vue custom elements are dropped in - not a SPA)
• not all elements are always needed
• several custom elements that don't share state - they are bound by API/WS

At this point I have one custom element: bees. I would like to develop now horses and cows - and drop them in on the hybrid project (that uses jQuery for current prod).

Each animal has its own custom-element project - and that means I will get:

• x3 app js files
• x3 vendor chunks files

Vendor files will obviously contain Vue.js & co - and including them all will result in including the same base libs multiple times.

How to tackle this problem? I could in theory smash everything into just one big app and do in main.js:

Vue.customElement('vue-bees', BeesApp)
Vue.customElement('vue-horses', HorsesApp)
Vue.customElement('vue-cows', CowsApp)

and that would work. Although it would mean also that everything is crammed into one project (and one repo) - somehow resulting in a mess.

What is the best strategy for doing that?

As I wrote in the beginning - custom-element has the potential of being one of the best approaches when transitioning from jQuery into Vue. I don't have enough knowledge in the Vue-area to help documenting that - but I think it would be super cool to extend the documentation with this scenario (and I will gladly contribute with my findings, working configs etc. afterwards). Thanks!

[karol-f]

Hi, as I'm currently out till next week I will just give You a hint - use one app with custom elements loaded lazily (like in last example from demo) - that way you won't have duplicated dependencies and load only what is needed.

[micdobro]

I think I know what you mean - create one "master project" to bind them all - and use the lazy load feature. This way I can bundle one app and one vendor file - and let the client side decide what should be loaded on a given page. The rest irrelevant - because only the right stuff will be loaded.

Although that poses another question - what happens when I deploy new version? (does webpack/sth else handle it automatically?)

To sum up - it's the boilerplate code I am stuck with - I will be glad to wait for your suggestion as I would really like to keep all components in separate repositories (based on that I will be glad to contribute and document this pattern - as I mentioned before - based on my research this is the cleanest way of adding the Vue sauce into the jQuery soup and start going away from it).

[my9074]

@karol-f This is also my application scenario. Build a library based on vue-custom-element packaged as one bunlde js, which contains multiple custom-element. After the user refers to this bunlde, he can use different custom-element as needed. But I am not sure if it supports.

Like:

// lib, build as one bundle.js
Vue.customElement('custom-el-1', Custom1);
Vue.customElement('custom-el-2', Custom2);
Vue.customElement('custom-el-3, Custom3);

//user

<script src="path/to/bundle.js"></script>

<custom-el-1 ...prop></custom-el-1>
<custom-el-2 ...prop2></custom-el-2>
<custom-el-3 ...prop2></custom-el-3>