vue-simple-modal-form

Simple modal form

Simple modal window based on Vue and Vuex for adding custom content

Installation

Install vue-simple-modal-form with npm

  npm install vue-simple-modal-form

or using yarn

 yarn add vue-simple-modal-form

Browser

Include the script file, e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-simple-modal-form/dist/plugin.min.js"></script>

Module

import SimpleModalForm from 'vue-simple-modal-form';

Settings

Import modal form states:

import Vuex from 'vuex'
import SimpleModalStorage from 'vue-simple-modal-form/dist/storage.js'

export default new Vuex.Store({
    modules: {
        ...
        modal: SimpleModalStorage
    }
})

Using

Once installed, it can be used in a template as simply as:

<simple-modal-form :window-small="false">
    <div class="my-class">
        Hellow, world!
    </div>
</simple-modal-form>

<button @click="$store.commit('modal/CALL_MODAL', true)">
    Open modal window
</button>