little-yellow-bean/vue-bs-modal

A Bootstrap modal for Vue.js

vue-bs-modal

A Bootstrap style modal for Vue.js

Demo

Installation

npm install vue-bs-modal

Usage

In main.ts

import { createApp } from "vue";
import App from "./App.vue";
import Modal from "vue-bs-modal";

// you have to include bootstrap css in your project. (Bootstrap 5 is recommended)
import "bootstrap/dist/css/bootstrap.min.css";
// or you can use any css that supports bootstrap class such as material bootstrap MDB.
import "mdb-ui-kit/css/mdb.min.css";
// import bootstrap icons (this is not required, you can use your own icon class)
import "bootstrap-icons/font/bootstrap-icons.css";

const app = createApp(App);
app.use(Modal).mount("#app");

In components

confirmation modal:

 async beforeRouteLeave() {
    // once this library is installed. it will add a $vbsModal global property to the app instance.
    const confirmed = await this.$vbsModal.confirm({
      title: "Unsaved Changes",
      message: "Are you sure you want to leave this page?",
    });
    return confirmed;
  }

common modal:

 openProfileModal() {
      this.$vbsModal
        .open({
          // pass your component as the whole modal content
          // you can also use the component's registered name
          content: EditProfileComponent,
          size: ModalSize.LARGE,
          // pass custom data as props to the EditProfileComponent.
          contentProps: {
            email: "example@example.com",
            username: "yellowbean",
          },
          // pass event listeners to the EditProfileComponent.
          contentEmits: {
            onSubmit: this.onSubmitProfileForm
          },
          center: true, // default is false
          backgroundScrolling: true, // default is false
          staticBackdrop: true, // will disable backdrop click to close modal if true
        });
    },

 onSubmitProfileForm(data: any) {
      // do profile update logic
        ...

      this.$vbsModal.close();
    }

License

MIT