Vue-js-modal: show() method is not a function

[chris-rowe]

I am trying to use the modal in a Vue 2.5.2 project, and it is not working. I am using the latest version of vue-js-modal.

1. Yarn installed vue-js-modal
2. Imported VModal in main.js file
3.Vue.use(VModal) in main.js file
4. Include <modal name="modal">hello world</modal> component in view html
5.Have a button that initiates this.$modal.show("modal")
6.Receive - Uncaught TypeError: this.$modal.show is not a function
7.If I change show() to open() I don't get the error, but the actual modal doesn't show. The overlay appears and close button, but not the actual modal

[euvl]

dont know man, seems to work for everyone else, meaning that the problem is in your code.

[Cholowao]

haha! Savage owner! @euvl

[Cholowao]

Sam herer

[lenzls]

I have the same problem. Trying to use v-dialog.

Edit:
The problem here is that I also use Buefy which apparently also defines this.$modal which overwrites the one from vue-js-modal.

Reassigning $modal between importing vue-js-modal and buefy solved the issue for me.

import VModal from 'vue-js-modal';
Vue.use(VModal, { dialog: true });

Vue.prototype.$vmodal = Vue.prototype.$modal;

import Buefy from 'buefy';
Vue.use(Buefy);