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

Quickly integrate Bootstrap 4 components with Vue.js

<div id="app">
    <b-btn v-b-modal.modal1>Launch demo 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 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>