search

Home  >  Q&A  >  body text

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

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粉990008428P粉990008428247 days ago475

reply all(2)I'll reply

  • P粉561438407

    P粉5614384072024-03-28 11:47:35

    You can use app.provide() to set the provider on Vue app instead of the <App/> 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 <body>.

    reply
    0
  • P粉018653751

    P粉0186537512024-03-28 09:00:31

    It is always installed under <body> (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

    reply
    0
  • Cancelreply