bootstrap-vue/src/components/modal/fixtures/modal.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">
    <b-btn ref="modalButton" v-b-modal.modal1 v-if="enableModal">Launch demo modal</b-btn>
    <b-btn ref="button" v-else>Doesn't launch modal</b-btn>
    <!-- Main UI -->
    <div class="mt-3 mb-3">
        Submitted Names:
        <ul>
            <li v-for="n in names">{{n}}</li>
        </ul>
    </div>

    <!-- Modal Component -->
    <b-modal ref="modal"
             id="modal1"
             title="Submit your name"
             header-bg-variant="info"
             header-text-variant="light"
             header-border-variant="info"
             @ok="submit"
             @shown="clearName">

        <form @submit.stop.prevent="submit">
            <b-form-input type="text"
                          placeholder="Enter your name"
                          v-model="name"></b-form-input>
        </form>

    </b-modal>

</div>