Async setup possible?

[khrise]

In my original app, I have an async setup. Among other async stuff, a configuration is fetched from a remote server.

loadConfig().then(() => {
  const app = createApp(App);
  app
   .use(...)
   .use(...)
   .mount('#app')
});

Is there a way to accomplish this with vue-web-component-wrapper? Basically, I'd like to be able to make "createApp" wait for an arbitrary (configurable) promise. Thanks!

[EranGrin]

Hi @khrise, Interesting use case, I would suggest to try use the createWebComponent in the loadConfig().then(() => {

maybe something like this

loadConfig().then(() => {
createWebComponent({
  rootComponent: app,
  elementName: 'my-web-component',
  plugins: pluginsWrapper,
  cssFrameworkStyles: style,
  VueDefineCustomElement,
  h,
  createApp,
  getCurrentInstance,
})
});

[tbl0605]

Hi @EranGrin, I have a similar question, but concerning vue-router. My original code is:

const app = createApp(App);

app.use(router);
...

router.isReady().then(() => {
  app.mount('#app');
});

I don't know how to add the router.isReady()... code to the pluginsWrapper object.

The problem that this piece of code solves is described here: Vue Router 4: Route Params Not Available on Created/Setup Also described here: All navigations are now always asynchronous

Thank you!

[EranGrin]

Hi @tbl0605,

Could you please provide more details about your use case? It appears to be an edge case that the current plugin configuration does not support. Understanding your specific requirements better will help me assess the feasibility of incorporating this feature. Alternatively, you are welcome to contribute by opening a pull request for this feature.

Thanks

[tbl0605]

Hi @EranGrin, thank you for your fast answer! :)

Could you please provide more details about your use case?

I have a Vue application (that I would like to convert to a web component) that contains <router-links> with query parameters. The users like to open each link in separate navigator tabs (by right-clicking on them and doing "Open the link in a new tab"), so they are able to use different pages of the application "at same time".

Without the router.isReady() hack, I loose the query informations at the startup of the new application instance in the new tab. It's really like the problem described here: Vue Router 4: Route Params Not Available on Created/Setup

router.isReady() is also needed to solve another kind of "page refresh" problem explained here.

Alternatively, you are welcome to contribute by opening a pull request for this feature.

Frankly, I have no idea how to fix this in your code :/ Ideally there should be some asynchronous callback somewhere so I could do await router.isReady() inside it, but can this really be implemented on your side to delay the web component mounting?

[EranGrin]

I was working on the async solution, but I noticed that for the query param it is not needed, meaning it seems to work without any changes. Could you please check?

[tbl0605]

H @EranGrin, from my few tests lately, you're right it seems router.isReady() is not needed. I'm a little surprised though. I hope I'm not wrong in my assumptions ^^