How to set default config for Dialog plugin?



  • I’ve created a custom Dialog Component to be invoked like this:

    // Inside Vue file
    import CustomComponent from '..path.to.component..'
    
    this.$q.dialog({
      component: CustomComponent
    })
    

    but I don’t want to import CustomComponent every time I use this.$q.dialog() on my Vue files. It would be nice if Dialog plugin also have a setDefaults() method where I can set default configurations:

    // src/boot/dialog-default.js 
    import { Dialog} from 'quasar'
    import CustomComponent from '..path.to.component..'
    
    Dialog.setDefaults({
       component: CustomComponent
    })
    

    Is there a workaround for this?


  • Admin

    I thought you could set defaults for this in Quasar.conf.js but after looking, it seems you can’t so this is another way 🙂

    Just create a showDialog method in a mixin and make it a global one. You can then call showDialog wherever you need to and pass through optional options using destructuring to merge them,

    i.e.

    showDialog (options) {
      this.$q.dialog({
        component: CustomComponent,
        ...options
      })
    }
    

Log in to reply