Simple to use and highly customizable Vue.js 2.0 modal

Vue.js modal

Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with SSR support.

Install

npm install vue-js-modal --save

How to use

Include plugin in your main.js file.

import VModal from 'vue-js-modal'

Vue.use(VModal)

/*
By default plugin will use "modal" name for the component.
If you need to change it, you can do so by providing "componentName" param.

Example:

Vue.use(VModal, { componentName: "foo-modal" })
...
<foo-modal name="bar"></foo-modal>
*/

Create modal:

<modal name="hello-world">
  hello, world!
</modal>

Call it from anywhere in the app:

methods: {
  show () {
    this.$modal.show('hello-world');
  },
  hide () {
    this.$modal.hide('hello-world');
  }
}

You can easily send data into the modal:

this.$modal.show('hello-world', { foo: 'bar' })

And receive it in beforeOpen event handler:

<modal name="hello-world" @before-open="beforeOpen"/>

methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

If you use Bower package manager - you will have to initialize library differently:

Vue.use(window["vue-js-modal"].default);

Dialog

It is a simplified version of the modal, which has most parameters set by default and is pretty useful for quick prototyping, showing alerts or creating mobile-like modals.

To start using <v-dialog/> you must set dialog: true in plugin configuration:

Vue.use(VModal, { dialog: true })

And include it in your project:

<v-dialog/>

Call it (all params except of “text” are optional):

this.$modal.show('dialog', {
  title: 'Alert!',
  text: 'You are too awesome',
  buttons: [
    {
      title: 'Deal with it',
      handler: () => { alert('Woot!') }
    },
    {
      title: '',       // Button title
      default: true,    // Will be triggered by default if 'Enter' pressed.
      handler: () => {} // Button click handler
    },
    {
      title: 'Close'
    }
 ]
})

Dynamic Modals

In order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.

To start using this feature you must set dynamic: true in plugin configuration:

Vue.use(VModal, { dynamic: true })

And include the <modals-container/> component it in your project:

<modals-container/>

Call it (the first argument is the component definition, the second are component properties, and the third modal parameters):

this.$modal.show({
  template: `
    <div>
      <h1>This is created inline</h1>
      <p>{{ text }}</p>
    </div>
  `,
  props: ['text']
}, {
  text: 'This text is passed as a property'
})

It can also be used with .vue files:

import MyComponent from './MyComponent.vue'

this.$modal.show(MyComponent, {
  text: 'This text is passed as a property'
}, {
  draggable: true
})

Other than defining the name modal parameter, it's also possible to close dynamic modals emitting a 'close' event:

this.$modal.show({
  template: `
    <div>
      <p>Close using this button:</p>
      <button @click="$emit('close')">Close</button>
    </div>
  `
})

For more examples please take a look at vue-js-modal.yev.io.

Note: keep in mind that there are some limitations for using dynamic modals. If you need full functionality then use ordinary modal instead.

SSR

Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/vue-js-modal']
}

And your plugins/vue-js-modal.js will look like:

import Vue from 'vue'
import VModal from 'vue-js-modal/dist/ssr.index'

Vue.use(VModal)

For full demo please look at demo/server_side_rendering

Extracted CSS

There is also a ssr build with css file extracted. Take a look in /dist folder.

Properties

Events

Example:

<template>
  <modal name="example"
         :width="300"
         :height="300"
         @before-open="beforeOpen"
         @before-close="beforeClose">
    <b>{{time}}</b>
  </modal>
</template>
<script>
export default {
  name: 'ExampleModal',
  data () {
    return {
      time: 0,
      duration: 5000
    }
  },
  methods: {
    beforeOpen (event) {
      console.log(event)
      // Set the opening time of the modal
      this.time = Date.now()
    },
    beforeClose (event) {
      console.log(event)
      // If modal was open less then 5000 ms - prevent closing it
      if (this.time + this.duration < Date.now()) {
        event.stop()
      }
    }
  }
}
</script>

This example, initializes time variable every time the modal is being opened.
And then forbits closing it for the next 5000 ms

Other

Height: "auto"

From v1.2.6 height can be set to "auto". If you want to be able to scroll modal in case it's height exceeds window height - you can set flag scrollable="true".

p.s. scrollable will only work with height="auto".

Example:

<modal name="foo" height="auto" :scrollable="true">...</modal>

Auto height:

Scrollable content & auto height:

Close button

If you want to have a Close (x) button in the top-right corner, you can use "top-right" slot for it. There is deliberately no predefined Close button style - you will have to implement/use your own button.

Example:

<template>
  <modal name="foo">

    <div slot="top-right">
      <button @click="$modal.hide('foo')">
        ❌
      </button>
    </div>

    Hello, ☀️!

  </modal>
</template>

Draggable handler

Draggable property can accept not only Boolean but also String paramenters. With String value, you can specify a CSS selector to the element which will be a "handler" for dragging.

Example:

<modal name="bar" draggable=".window-header">
  <div class="window-header">DRAG ME HERE</div>
  <div>
     Hello, ?!
  </div>
</modal>

Overlay background color

If you want to change overlay background color, you can easily do it using css.

For all modals:

.v--modal-overlay {
  background: red;
}

For specific modal:

.v--modal-overlay[data-modal="my_modal_name"] {
  background: transparent;
}

Fullscreen

<modal name="fs" :adaptive="true" width="100%" height="100%">
Dont forget about close button :)
</modal>

GitHub