vue-cli-service build --target lib-async

[EvanBurbidge]

What problem does this feature solve?

At the moment we can create libs and web-components. In the course of my current project the companies architecture has shifted from a giant app to wanting to manage each "module" of the application with a separate npm package. Within these packages one thing that will be exported is a router config that will then be registered within a new Vue Router instance on the main application. This works, until you try to lazy load a component into the router config. Webpack cannot resolve the chunks.

In the description of async web components you say " When targeting multiple web components, the bundle may become quite large, and the user may only use a few of the components your bundle registers. The async web component mode produces a code-split bundle with a small entry file that provides the shared runtime between all the components, and registers all the custom elements upfront. The actual implementation of a component is then fetched on-demand only when an instance of the corresponding custom element is used on the page: "

This feature would simply replicate this to a common / umd module

What does the proposed API look like?

vue-cli-service build --target lib-async --name

[LinusBorg]

This works, until you try to lazy load a component into the router config. Webpack cannot resolve the chunks.

Why?

[EvanBurbidge]

@LinusBorg my assumption would be because webpack is looking for the chunks in the wrong place, the chunks exist inside the node_modules/app2 folder and at a guess i'd say when the router tries to load it its looking in the /src folder for those elements. I've attached screenshots of the configurations.

[EvanBurbidge]

@LinusBorg wondering was there any thought / movement on this, if not, could you help point me in the right direction to fork the repo and try it myself please.

Thanks,
Evan

[LinusBorg]

There hasn't been any movement. I would't really recommend to fork @vue/cli-service as a package.

You should rather look at the code of the build process (/packages/@vue/cli-service/lib/commands/build) and reimplement your own version of or wrapper around that code, then use a "project local plugin" to ad that command to your project.

[EvanBurbidge]

Thanks will give that a shot.

[EvanBurbidge]

@LinusBorg no joy, got quite stuck on using it, am trying to get webpack to work now, I think one problem i'm running into with this is that webpack is looking in the wrong place for app2.about.js I think its looking for it in the context of app1's views. Would you have any ideas on this?

[chris-canipe]

There is more discussion and a workaround in this StackOverflow post and this webpack issue.

[EvanBurbidge]

@epicyclist thats my stack overflow post :) but yes I may of found a few work arounds for it! thank you! :)

[chris-canipe]

@EvanBurbidge Aye, I was documenting it for myself and others since the workaround was not posted here. Did you find any other approaches or do those links cover everything?