CODEWITHSUNDEEP
vue.jsvuejs3quasar-framework
Leon
Leon

Reputation: 331

How can Quasar Dialog be mounted under root or parent component?

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

Upvotes: 0

Views: 662

Answers (2)

hagabaka
hagabaka

Reputation: 81

You can setup the provide on the Vue app, using app.provide() instead of an <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')

Then you will be able to use inject() the same item in Quasar dialog children, even though the dialog is mounted under <body>.

Upvotes: 0

IVO GELOV
IVO GELOV

Reputation: 14259

It is always mounted either under <body> (non-SSR) or nowhere (SSR mode) - not just "by default". Just look at the sources - https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/private/global-nodes.js#L6

Upvotes: 1

Related Questions