How can I use Vue's render() function with Quasar components?

[wiese42]

I am trying to use Vue's render function to create a piece of DOM for a Quasar component. So I try

const elem = document.createElement('div')
const vNode = h(QCard, { class:'my-card' })
render(vNode, elem)

Unfortunatelly this will create an error indicating the the quasar component somehow is undefined
chunk-W5AEE7CF.js?v=71eb7514:1696 Uncaught TypeError: Cannot read properties of undefined (reading 'dark')
at constructor.$e1 (

When I try this with my own Component that does NOT use Quasar components it works fine. We I use quasar components inside my component I get the same error as above.

I should be noted that I tried this with QCard, QItem, QBtn, and QBadge. Interestingly enough, it worked for QBadge, but not for the others.

Maybe someone can try to explain what's going on, and maybe even suggest how to accomplish my task.

If anyone is wondering why on earth I try to use render() with quasar component, I am trying to hook into a third party graph component that provides a means to display your own tooltips. The means consists in providing the DOM element that represents the tooltip.

[yusufkandemir]

Cannot read properties of undefined (reading 'dark')

Suggests that $q is undefined, when accessing $q.dark. You need to use the Quasar Vue plugin, e.g. app.use(Quasar, { /* any config here if needed */ }). That render() seems to happen outside the default app instance that your Vue app uses. So, you need to configure the other app somehow. Likewise, if you were trying to render a custom component where you use vue-i18n, pinia, etc. you would have faced the same problem.

[yusufkandemir]

I would also suggest you share some info about that third-party chart library if it's not top secret. People might check it out and suggest an alternative way to approach this problem.

[wiese42]

Thanks for your suggestion. I put app.use(Quasar) in a boot file. I get the warning [Vue warn]: Plugin has already been applied to target app. suggesting that Quasar Plugin has already been registered (by default). Also, the situation did not improve with that line of code.

The diagramming library I am using is yFiles (www.yfiles.com). Here's the piece of code that configures the component's tooltip

function initializeTooltips (graphComponent) {
const inputMode = graphComponent.inputMode
const mouseHoverInputMode = inputMode.mouseHoverInputMode
inputMode.addQueryItemToolTipListener((src, evt) => {
if (evt.handled) return
evt.toolTip = document.createElement('div')
const vNode = h(GraphTooltip, { evt.item })
render(vNode, evt.toolTip)
evt.handled = true
})
}

GraphTooltip is a Vue SFC that represents the tooltip. I really would like to use Quasar components inside GraphTooltip but this yields the mentioned error.