Vue Modals

July 25, 2020 (updated: July 26, 2020)

Quick tip! I wanted to make some modals in a Vue app—here are the resources I found that helped or could help in future.

vue-js-modal

This library is what I ended up using and it was pretty painless to implement. It was introduced in this YouTube video, which specifically focuses on making the modal accessible. Win.

Vue Docs Example

The Vue docs provide and example and CodeSandbox of how to create a modal without using a library.

This was uses the Vue transition element, which I can’t say I remember learning about before—it looks pretty useful!

Update after using vue-js-modal more…

The vue-js-modal props for sizing and responsiveness were a bit finicky so I opted to adapt the Vue docs example for a modal that contained more content and needed to take up more of the screen.

The only thing that needed a bit of extra help was closing the modal…I added a click event to the modal-mask element, and also temporarily added a window event listener so that the modal would close when someone hits the Esc key. The final methods for the modal looked like this:

methods: {
  show: function() {
    this.showModal = true;
    window.addEventListener('keyup', this.hideOnEscape);
  },
  hide: function() {
    this.showModal = false;
    window.removeEventListener('keyup', this.hideOnEscape);
  },
  hideOnEscape(event) {
    if (event.which === 27) {
      this.showModal = false;
    }
  },
},
Tags icon Stacked price tag looking things Tags: