Vue.js Modal

# Introduction

The library supports 2 types of modals - static and dynamic.

  • Static are defined explicitly though the template.
  • Dynamic are generated based on the configuration passed into the "show modal" function.

# Static modals

Modals are defined by simply using the <modal /> component. To control it's visibility - use $modal.show / $modal.hide functions, for example:


 

 







 


 








<template>
    <modal name="my-first-modal">
        This is my first modal
    </modal>
</template>

<script>
export default {
    name: 'MyComponent',
    methods: {
        show () {
            this.$modal.show('my-first-modal');
        },
        hide () {
            this.$modal.hide('my-first-modal');
        }
    },
    mount () {
        this.show()
    }
}
</script>

# Dynamic modals

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

To show dynamic modal you can use the same $modal.show function with extended API:

this.$modal.show(
  component,
  component_properties,
  modal_properties,
  modal_events
)
  • component - inline or imported Vue component definition
  • component_properties - any properties that are used within the component_definition
  • modal_properties -modal component properties (see Properties section)
  • modal_events - modal event handlers (see Events section)

Using imported component definition:

import MyComponent from './MyComponent.vue'

...

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

Using inline component definition:

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' },
  { height: 'auto' },
  { 'before-close': event => {} }
)

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





 




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

It is possible to set default property values for dynamic modals:




 
 
 
 
 


import VModal from 'vue-js-modal'

Vue.use(VModal, {
  dynamicDefaults: {
    draggable: true,
    resizable: true,
    height: 'auto'
  }
})

# Dialogs

Dialog is a simplified version of the modal which has most parameters set by default and is useful for quick prototyping, alerts, etc. Dialog is merely an example of how easy it is to create modals that fit your project needs. Nevertheless, you can use it if you set dialog: true in plugin configuration:

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

And include this component in your project:

<v-dialog />

To show modal follow this example (all params except of “text” are optional):

this.$modal.show('dialog', {
  title: 'The standard Lorem Ipsum passage',
  text: 'Lorem ipsum dolor sit amet, ...',
  buttons: [
    {
      title: 'Cancel',
      handler: () => {
        this.$modal.hide('dialog')
      }
    },
    {
      title: 'Like',
      handler: () => {
        alert('Like action')
      }
    },
    {
      title: 'Repost',
      handler: () => {
        alert('Repost action')
      }
    }
  ]
})

← Usage →