0.7.9 • Published 2 years ago
vue-bs-modal v0.7.9
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
0.7.9
2 years ago
0.7.8
2 years ago
0.7.7
2 years ago
0.7.6
2 years ago
0.7.5
2 years ago
0.7.4
2 years ago
0.7.3
2 years ago
0.7.2
2 years ago
0.7.1
2 years ago
0.7.0
2 years ago
0.6.9
2 years ago
0.6.8
2 years ago
0.6.7
2 years ago
0.6.6
2 years ago
0.6.5
2 years ago
0.6.4
2 years ago
0.6.3
2 years ago
0.6.2
2 years ago
0.6.1
2 years ago
0.6.0
2 years ago
0.5.9
2 years ago
0.5.8
2 years ago
0.5.7
2 years ago
0.5.6
2 years ago
0.5.5
2 years ago
0.5.4
2 years ago
0.5.3
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.5.0
2 years ago
0.4.9
2 years ago
0.4.8
2 years ago
0.4.7
2 years ago
0.4.6
2 years ago
0.4.5
2 years ago
0.4.4
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.3.9
2 years ago
0.3.8
2 years ago
0.3.7
2 years ago
0.3.6
2 years ago
0.3.5
2 years ago
0.3.4
2 years ago
0.3.3
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.9
2 years ago
0.2.8
2 years ago
0.2.7
2 years ago
0.2.6
2 years ago
0.2.5
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago