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.

[yusufkandemir]

If you mean import { render } from 'vue', then it won't work if you are using any plugin, e.g. Quasar, vue-i18n, vue-router, Pinia, etc. Since evt.toolTip is an existing DOM element, you can use const tooltipApp = createApp(GraphTooltip), copy things from your original app instance, then do tooltipApp.mount(toolTip).

For copying stuff from the main to the child app, you can take this as an example:

quasar/ui/src/install-quasar.js

Lines 30 to 39 in c43dc46

	export function createChildApp (appCfg, parentApp) {
	const app = createApp(appCfg)
	app.config.globalProperties = parentApp.config.globalProperties
	const { reload, ...appContext } = parentApp._context
	Object.assign(app._context, appContext)
	return app
	}

You can use a boot file to access the app. If you can't get it together, I am afraid I won't be able to provide further help.

[wiese42]

Amazing. This actually worked. Many thanks. To get access to the parent app I used app.provide('parentApp', app) in the boot file and to retrieve it in my component setup I used const parentApp = inject('parentApp').