Using a Mobile friendly Vue.js Modal

Vue.js 2.0+ modal

Another great component for Vue.js projects is here, the Vue.js 2.0+ modal which is highly customizable, mobile friendly, and offers features like dragging and resizing. You can take a look at the available modes at the Demo page.

The modal can be simple, draggable, can resize, use a condition in order the user to be able to close it, or all these mixed together. Below you will find an example using some of these properties.

Modes:

  • Simple Yet another boring modal
  • Adaptive Tries to adjust to the page size
  • Resizable Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
  • Mixed Is resizable, but if the size of the screen is changed - modal will try to adapt to the page size

For a list for the available props and events click here.

Example

Install via yarn

yarn add vue-js-modal

Import it into your project

import vmodal from 'vue-js-modal'
Vue.use(vmodal)

Use it in your templates

<modal name="example-modal" 
    :resizable="resizable" 
    :adaptive="adaptive" 
    :draggable="draggable"
    >
<h1>Vuejs Lorem</h1>
<p>Lorem ipsum...</p>
</modal>
<button @click="show">
    Resizable & Draggable
</button>

export default {
  name: 'app',
  data () {
    return {
      resizable: true,
      adaptive: true,
      draggable: true
    }
  },
  methods: {
    show () {
      this.$modal.show('example-modal')
    },
    hide () {
      this.$modal.hide('example-modal')
    }
  }
}
</script>

This plugin is available on GitHub, where you will find everything you need to know.