Overview On @kouts/vue-modal Plugin:
Some key features of this plugin are as below:
- LightWeight, the minified gzipped version is < 8kb
- Opens and closes with a data variable using v-model
- Includes sensible default styling but it's also highly customizable via user CSS classes and styles
- Override modal title and content via slots
- Modal intro and outro effects using CSS animation classes
- Exposes Component events like before-open, opening, after-open, before-close, after-close
- Scrollable when it's contents exceed screen height.
- Closeable by clicking on the upper right "x", the overlay, or the ESC key.
- Stackable - Multiple modal windows on top of each other.
- Ability to set initialFocus on an element when the modal window opens just set the autofocus attribute on an element inside the modal.
- Focus management traps keyboard focus - tabbed navigation inside the modal window.
- Ability to have unclosable modal windows.
- Render on-demand or stay always in DOM with "live" mode.
- Modals append to <body> by default, ability to append to the custom element.
Create A VueJS Sample App:
Command To Install Vue CLI Globally On Your System:
npm run -g @vue/cli
Command To Create Vue App:
vue create your_application_name
After creating a sample application run the following command to start the application.
Command To Run Vue App:
npm run serve
Install @kouts/vue-modal Npm Package:
Command To Install Modal Popup:
npm i @kouts/vue-modal --save
After installing the package successfully reference of the package will be added to the package.json.
Configure Plugin Globally:
As a first step, we need to import the plugin and configure it with vue instance to make it global(plugin modal component will available throughout the application) use main.js(entry file).
src/main.js:
import Vue from 'vue'
import App from './App.vue'
import VueModal from '@kouts/vue-modal'
import '@kouts/vue-modal/dist/vue-modal.css'
Vue.component('Modal', VueModal)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- (Line: 3) Loads the '@kouts/vue-modal' plugin.
- (Line: 4) Loads styles of the modal popup plugin.
- (Line: 6) Integrating the 'VueModal' component instance to the Vue instance globally this makes modal popup available all over the application.
Open Modal Popup:
The 'VueModal' component popup opening and closing is so simple integration like assigning a boolean value to the 'v-model'.
src/components/HelloWorld.vue:
<template>
<div>
<button type="button" class="btn btn-primary" @click="showModal=true" >Open a modal</button>
<Modal v-model="showModal">
<p>Modal content goes here...</p>
</Modal>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
showModal: false
};
}
};
</script>
- (Line: 3) Button to open the modal popup. Click event assigned to 'showModal' property as true.
- (Line: 4) 'Modal' component set with 'v-model' by assigning the boolean property. This 'v-model' core part to open and closing of the modal popup. If 'v-model' set true opens the popup if 'v-model' set false close the popup.
- (Line: 15) The 'showModal' boolean property declared as vue component data property.
Title Property Of Modal Popup:
The configurable title property of the modal popup.
src/components/HelloWorld.vue:(Html Part)
<Modal v-model="showModal" :title="modalTitle"> <p>Modal content goes here...</p> </Modal>src/components/HelloWorld.vue:(Script Part):
data() {
return {
showModal: false,
modalTitle:'Welcome Tech Seeker'
};
}
Stackable Modals:
This modal plugin supports the opening of multiple or stackable modal popups.
src/components/HelloWorld.vue:(Html Part)
<template>
<div>
<button type="button" class="btn btn-primary" @click="showModal=true" >Open a modal</button>
<Modal v-model="showModal" :title="modalTitle">
<p>Modal content goes here...</p>
<p>Modal content goes here...</p>
<p>Modal content goes here...</p>
<p>Modal content goes here...</p>
<button type="button" class="btn btn-primary" @click="showSecondModal=true">Open 2nd window</button>
</Modal>
<Modal v-model="showSecondModal" title="Stackable Model">
<p>Hi I'm second Modal</p>
</Modal>
</div>
</template>
- (Line: 9) On first modal popup added a button to which click event assigned a boolean property 'showSecondModal' to show 2nd modal popup on top of the 1st modal popup.
- (Line: 11) The 2nd modal popup declared by using the 'showSecondModal' boolean property as value to 'v-model'.
data() {
return {
showModal: false,
showSecondModal:false,
modalTitle:'Welcome Tech Seeker'
};
}
Modal Events:
The events supported by this plugin modal popup are:
src/components/HelloWorld.vue:(Html Part)- before-open
- after-open
- before-close
- after-close
<Modal v-model="showModal" :title="modalTitle" @before-open="beforeOpen" @before-close="beforeClose" @after-open="afterOpen" @after-close="afterClose"> <p>Modal content goes here...</p> </Modal>src/components/HelloWorld.vue(Script Part):
methods:{
beforeOpen(){
alert("hi i'm before open");
},
beforeClose(){
alert("hi i'm before close");
},
afterOpen(){
alert("hi i'm after open");
},
afterClose(){
alert("hi i'm after close");
}
}
That's all about modal popup integration using '@kouts/vue-modal' plugin. To learn more options about this plugin visit "https://github.com/kouts/vue-modal".
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on the @kouts/vue-modal plugin to integrate into the VueJs application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment