In this article, we are going to explore the implementation of modal popup using '@kouts/vue-modal' plugin in the VueJS application.
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