Modal not displaying when using router

I’m having an issue with my modal not displaying. I’ve attached a zip file with my code, but here’s the process I went through:

1. I created a baseline project with vue-cli using the following command:

vue init webpack bootstraptest

Through the prompts, I answered Yes for using router, and no for everything else.

1. Then I installed bootstrap and bootstrap-vue with

npm install --save bootstrap bootstrap-vue

1. I added the following to the main.js file:

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)`

1. I modified the Hello.vue file to look like such:

<template>
  <div class="hello">
    <h1>Modal Test</h1>
    <b-btn @click="$root.$emit('show::modal', 'modal1')">Show Modal</b-btn>

    <b-modal id="modal1" title="Submit your name">
      <h3>Hello Modal</h3>
    </b-modal>
  </div>
</template>

<script>
export default {
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Running this (while using the Chrome Vue dev tools) I can click the button and see the event being fired for the modal to display, but it’s not displaying. I tried the same process without using router and it seems to work fine.

bootstraptest.zip

[mosinve]

I downloaded your code. Seems that you use Bootstrap 3 instead of supported 4 please install bootstrap as follows npm install bootstrap@4.0.0-alpha.6

[rwb7041]

That’s bizzare because it worked with bootstrap 3 without using router i thought… oh well. Guess I can’t use this as my project breaks with bootstrap 4 in its current state