Easy to Use Overlay Libraries for Vue Apps

John Au-Yeung
May 10, 2020 · 4 min read
Photo by Ludwig S on Unsplash

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at some easy to use overlay libraries to show dialog boxes and modal the way we like in a Vue app.

Vuedals

This is an easy to use Vue library to let us add modals to our Vue app. To use it, we first install it by running:

Then we add it to our app by registering the component and then reference it in our components. We do that as follows:

main.js :

App.vue :

In the code above, we registered the Vuedals plugin in main.js . Then we add the vuedal component on the template.

Once we did that, we can call the VuedalBus.$emit method to create a new modal with the given template.

To close a modal programmatically, we can call the this.$vuedals.close method. We can pass in data to send to the vuedals:closed listener.

We can call it as follows:

Other options include size , dismissable , escapable , title , header , onClose , and onDismiss .

size is the size of the modal expressed as a string. Possible values are:

  • xs: 350px width
  • sm: 550px width
  • md: 650px width
  • lg: 850px width
  • xl: 1024px width

dismissable is a boolean to include the X to close the modal.escapable lets us enable closing the modal by pressing the Esc key. title is the title string of the modal.

header is an object that’ll generate a custom header. We can set it to the following object:

Then we can create a custom header-component to use as the custom header.

onClose and onDismiss our event handlers that are called when those events are emitted. They both have the data parameter that is passed in when the events are emitted.

Photo by Gavin Allanwood on Unsplash

vue-js-modal

vue-js-modal is another easy to use modal component for Vue apps. To install it, we run:

Then we can use it as follows:

main.js :

App.vue :

We just have to register the plugin in main.js . Then we can call this.$modal.show to show the modal. with the given name value.

Also, we can send data to the modal. For instance, we can write:

What we passed will be available in the event object of the beforeOpen handler.

This package also has a v-dialog component, which is a simplified version of the modal. It’s useful for quick prototyping since it has most of the parameters set by default.

To use it, we write:

main.js :

App.vue :

In the code above, we created a dialog with 2 buttons, a Woo button, and a Close button.

The Woo button shows an alert when clicked as it runs code in the handler function. The Close button just closes the dialog.

Conclusion

Both the Vuedals and the vue-js-modal libraries are easy to use modal libraries that we can use to add modals to our page anywhere. They don’t need many configurations to get them running, but we can also customize them as we need to.

The Startup

Get smarter at building your thing. Join The Startup’s +799K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +799K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +799K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store