vue2-modal

Vue Modal

A vue.js component for creating modals. Create modals and fill them with whatever components or HTML you want.

How to initialize Vue Modal

Vue modal is built as a vue plugin. It can be initialized just as the Vue documentation states.

import VueModal from "vue2-modal";
 
Vue.use(VueModal);

Usage

Creation

Vue modals are all accessed and run through the name that is given to a modal.
A modal can be created by giving it a name and a function to run when it's closed.
Modals also contain a slot for the title section. Here is a very simple modal.

<vue-modal :on-close="closeModal" name="my-modal">
    <h2 slot="header">Hello World</h2>
    <p>This modal will do stuff.</p>
</vue-modal>

Show and Hide

Vue modals contains a very simple API for interacting with modals.

• Show Modal: this.$modals.show("my-modal")
• Manually close modal: this.$modals.hide("my-modal")
• Check if a modal showing: this.$modals.isActive("my-modal")

Styling

There are some built in stylings that can be changed or a manual theme can also be applied. There are three props which are used to change the size of the modals themselves.

1. size (xsm, sm, md, lg, xlg)
2. width
3. height

To apply custom themes simply create a string of standard css and pass it into the theme prop.

Hooks

There are life cycle hooks that can be utilized to run actions at different points in the modals life.

• onClose: Runs right before the close modal event is emitted
• onShow: Runs after the modal have been rerendered to the screen.

Props

Prop	Description	Value
name	The name of the modal. Used to show and hide modal.	String
size	The size of the modal	xsm, sm, md, lg, xlg
width	A fixed width for the modal	Number
height	A fixed height for the modal	Number
hideCloseBtn	Hides close button	Boolean
theme	Css styles to be applied directly	String
transitionName	The style of transition	zoom-in, zoom-out, fade, slide-in-top
onClose	A function that runs when a modal closes	Function
onShow	A function that runs when a modal is shown	Function
outerClose	Disables closing a modal by clicking outside of it	Boolean

License

This project is covered under the MIT License. Feel free to use it wherever you like.