Quasar modals should take a VM instance instead of a component config object

[mlenormand]

Quasar modals should take a VM instance instead of a component config object

[rstoenescu]

The Modal constructor indeed takes a Vue component object and NOT an instance. The reason is simple: it wraps the given template with required HTML markup so you won't have to.

An instantiated VM would have to already contain the markup. But let's think for a moment: we wanna be able to pass instantiated VM so we can also pass data, right? But we can already do that. If we want to be able to access data scope for our Modal, just pass a Javascript reference when creating Modal:

var someData = {
   progress: 5,
   list: [....]
}
let modal = Modal.create({
   data: {
     someData
   },
   template: '...'
})

// don't destroy it when we close it,
// so we can show it up again when we want to
modal.set({selfDestroy: false})
modal.show()

someData.progress = 7
modal.close()
modal.show()
modal.close()
someData.progress = 10
// ....or even
modal.vm.someData.progress = 10

modal.show()
....
modal.close()
/// finally when we don't need it anymore:
modal.destroy()

It's easier to write a *.vue component file and use it to create your Modal:

import { Modal } from 'quasar'
import LoginScreen from './login.vue'
Modal.create(LoginScreen)

Ok, so we've seen we can skip accessing data through events, vuex etc, but Vue best practices dictates that it's best to anyway use Vuex due to its many advantages.

Next Quasar (v0.6.0 -- skipping 0.5.1 due to its many novelties) will also make Modal be able to use a VM object containing an element, so you can use an existing template in DOM.

Given said that, is there still a case you wanna use and can't with current Modal?

[rstoenescu]

Updated the documentation too to make it more clear. Will update website in a few hours.

[mlenormand]

Yes, you're right, we can just set data to the vm object backed by this Modal once it is instanciated. We loose the features of props (data validation, types, ...) but in my current case current case, the way you describe fits my needs. I think there is more advanced cases where passing a VM instance could be useful

[rstoenescu]

Well, the validation can still be done through VM object. Even if set from "outside" of it. Add a watcher for your VM data prop on the VM object and validate it there, for example.

[rstoenescu]

Will make a thorough analysis on how Modal management can be improved though. Thanks for opening this issue!