A modal for Vue.js 2

Installation:

npm install vue-super-modal

Setup

Add a mount point in the html:

<div id='#app'></div>
<div id='#modal'></div>

In the main application file (main.js if you're using vue-cli):

import SuperModal from 'vue-super-modal'

or

const SuperModal = require('vue-super-modal')

or in your html like:

<script src='https://unpkg.com/[email protected]'></script>

and in the main.js

Usage

Vue.use(SuperModal, {
  'mount@': '#modal'
})

Install the plugin in your app.

const vm = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Save the vue instance and finish the setup like:

vm.$superModalSetup()

Usage

With the setup out of the way, you can call it from any vue instance like:

this.$modal.show({
    messageHTML: `There are these things to keep in mind though:
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>consectetur adipisicing elit, sed do eiusmod tempor</li>
            <li>incididunt ut labore et dolore magna aliqua.</li>
            <li>sunt in culpa qui officia deserunt mollit anim id est laborum..</li>
        </ul>`,
    onAccept: () => { alert('YAY! It worked') }
}, '+.btn2'))

This produces an output like:

and on click of the accept button