Package Exports

vue-base-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-base-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Modals

Minimalistic promise-based, programmatically-opening & stacking modal plugin for Vue.js.

Instalation

Import and use the plugin in your main file.

import VueModals from 'vue-modals'
Vue.use(VueModals)

Add modals-stack component to the end of your root component (i.e. App.vue). This is a placeholder for all modals in the app.

<template>
  <div class="App">
    ...
    <modals-stack />
  </div>
</template>

Create your modal component (i.e. WelcomeModal.vue). Use $emit('close', result) to close the modal (with optional return value that is going to be passed to the resolved promise).

<template>
  <modal class="WelcomeModal">
    <template slot="header">
      Hello there!
    </template>

    <template slot="content">
     My name is {{ name }}
    </template>

    <template slot="footer">
      <button @click="$emit('close')">
        Cancel
      </button>

      <button @click="$emit('close', true)">
        Confirm
      </button>
    </template>
  </modal>
</template>

<script>
  export default {
    props: {
      name: String
    }
  }
</script>

And then open your modal programmatically by calling this.$modal(component, props).

import WelcomeModal from '@/components/modals/WelcomeModal.vue'

export default {
  ...
  methods: {
    async openWelcome() {
      const result = await this.$modal(WelcomeModal, {
        name: 'Doggo'
      })

      if (result) {
        console.log('confirmed!')
      } else {
        console.log('canceled!')
      }
    }
  }
}