Skip to main content


Showing posts with the label Vue Modal

VueJS Modal Popup Integration Using @kouts/vue-modal Plugin

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 - t