Skip to content
master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Vuex Modal

Simple modal component/Vuex module.

Installation

$ npm install --save vuex-modal
# or
$ yarn add vuex-modal

Usage

  1. Import modalModule and set it into Vuex module.
import Vue from 'vue'
import Vuex from 'vuex'
import { modalModule } from 'vuex-modal'

Vue.use(Vuex)

const store = new Vuex.Store({
  // ...
  modules: {
    modal: modalModule
  }
})

new Vue({
  el: '#app',
  store,
  // ...
})
  1. (Optional) Import base CSS file for the modal wherever you want or you can define your own styles.
import 'vuex-modal/dist/vuex-modal.css'
  1. Use Modal component in your apps. You can dispatch PUSH, POP, REPLACE actions to manage modals.
<template>
  <div>
    <button type="button" @click="open">Open Modal</button>
    <modal name="example">
      <div class="basic-modal">
        <h1 class="title">Modal Title</h1>
        <button class="button" type="button" @click="close">Close Modal</button>
      </div>
    </modal>
  </div>
</template>

<script>
import { Modal, PUSH, POP } from 'vuex-modal'

export default {
  methods: {
    open () {
      this.$store.dispatch(PUSH, { name: 'example' })
    },

    close () {
      this.$store.dispatch(POP)
    }
  },

  components: {
    Modal
  }
}
</script>

See Also

vue-thin-modal

License

MIT