vuex-modal v0.2.1

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,
     // ...
   })

2. (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'

3. 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