How to invoke Quasar dialog from external component?

Question

I'm using Vue.js 2.x + Quasar 1.x with http-vue-loader (so no build tools) at the moment.

I put a q-dialog in a separate component - let's call it MyComponent, and when I just hook it up in a parent component like so:

<my-component></my-component>

then nothing happens, it's not even in the DOM... When I just insert the whole q-dialog template into the parent component, without having its separate external component, everything works just fine with a simple v-model.

So I imported the component successfully, that part is fine. I was trying to invoke it when I click on a button, but I can't really communicate with the component this way.

Now I've come across two separate ways of creating dialogs in Quasar, the first one is using the component when it's not in its separate component. The second one seems to be the one I might need for a separate dialog component. The problem is that importing an external component with vue-http-loader looks like this:

components: {
  'my-component': httpVueLoader('/components/MyComponent.vue'),
},

while according to the Quasar docs, it should look like this:

import CustomComponent from '..path.to.component..'

...

this.$q.dialog({
  component: CustomComponent,

...

The docs are a bit confusing to me as well. :/

Answer 1

Unfortunately, I can't see the CustomComponent code, which is required to be created following an interface, which is described in this docpage under the warning. Make sure that CustomComponent is valid.

PS - Both of those ways do the same thing but in different ways. With the first one, you'll import that component to another and set him in the template, but with the second one, you'll call a tool, that creates a new modal with passed parameters. But the second one doesn't have all functionality compared to the first one.