Pass Quasar component name to Vue 3 render function-CodePudding

I'm trying to dynamically create a Vue 3 app with a component given by name, e.g. "div", "button" or Quasar's "q-btn". But I struggle to pass the latter to Vue's render function Vue.h:

<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({
        render: () => Vue.h("q-btn", { color: "blue" }, "Click me"),
      });
      app.use(Quasar);
      app.mount("#app");
    </script>
  </body>
</html>

I'd expect Vue to translate q-btn into a <button> tag. But instead the resulting HTML contains <q-btn> tags which are not correctly rendered by the browser.

When replacing "q-btn" with Quasar.QBtn, it works as expected. But shouldn't Vue know how to render "q-btn", after Quasar has been installed with app.use(Quasar)?

I could find some hacky solution to handle Quasar components, but there will be other libraries as well as custom components and I hope there is a more general solution.

CodePudding user response：

Oh, I think I found the answer using Vue.resolveComponent:

render: () => Vue.h(Vue.resolveComponent("q-btn"), { color: "blue" }, "Click me"),

Now the Quasar button is rendered correctly.