Cannot read property 'show' of undefined in BoostrapVue Modal

1
votes
    <b-button
      id="show-btn"
      @click="$bvModal.show('bv-modal-example')"
    >
      Open Modal
    </b-button>
    <b-modal id="bv-modal-example">Hello From My Modal!</b-modal>

Vue version: 2.6.10

Installed and set Bootstrap in App.js

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

I got the error TypeError: Cannot read property 'show' of undefined when I tried to open the modal.

What else should I install or set for BoostrapVue Modal to use as the instance method?

Thanks, everyone!

1
javascriptvue.jsbootstrap-vue
can you paste the whole error from console? so it will be easy to find error. Apart from that did you install bootstrap and bootstrap-vue both ? – Dcoder14

1 Answers

3
votes

I have some approaches that you can try to get what you want finally working.

  1. Make sure whether you import Bootstrap and BootstrapVue CSS files:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
  1. If you are using a module bundler you need to try to import only specific components groups(plugins) like this.
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)
  1. If those are not working, please please check you have both bootstrap and boostrapVue installed in your node_module. In order to make sure, please remove the node_modules folder and run npm install or run npm install bootstrap bootstrap-vue --save in your terminal of the root directory of the project.

Hopefully, this would help you.