Install Quasar Dialog under root component or parent component: How to do it?

Question

The dynamically created Dialog is mounted under the <body> tag by default, so the global Provide and Inject cannot be used. How to mount Dialog under div#app or under parent?

P粉561438407 · Answer

You can use app.provide() to set the provider on Vue app instead of the component . For example, in the entry script

import { createApp } from 'vue'
import { Quasar, Dialog } from 'quasar'
import App from './App.vue'
createApp(App)
    .provide('name', value)
    .use(Quasar, {
        plugins: {
            Dialog,
        }
    })
    .mount('#app')

You will then be able to use

inject() the same item in a Quasar dialog child, even if the dialog is installed under .

P粉018653751 · Answer

It is always installed under (non-SSR) or nowhere (SSR mode) - not just "by default". Just check the source - https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/private/global-nodes.js#L6