Vue modal comp

A simple modal component for Vue.js.

Version: 0.1.7 Updated: 07/18/2017

By: benjamincrozat License: WTFPL

Downloads Last 30 Days: 26

Latest Version on NPM Software License Build Status npm

vue-modal-component

A simple modal component for Vue.js. Live demo here.

Installation

npm install vue-modal-comp --save

Usage

This package is not finalized yet. Don't use it in production until it reaches 1.0.0.

This package has two main components:

And additional ones for common use cases:

Please note that the CSS is not included. It's totally up to you to make it looks however you want. You can take inspiration from the demo's code, though.

Modal.vue

import { Modal, ModalButton } from 'vue-modal-comp'

export default {
    components: {
        Modal,
        ModalButton
    }
}
<button type="button" @click="$refs.modal.toggle()">
    Toggle
</button>

<modal ref="modal">
    <h1 slot="title">Hello, World!</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum illo corrupti totam necessitatibus iste, accusantium ex, molestias magnam nisi quod!</p>

    <modal-button @click="$refs.modal.close()">OK</modal-button>
</modal>

ModalButton.vue

Coming soon…

Alert.vue

Coming soon…

Confirm.vue

Coming soon…

Prompt.vue

Coming soon…

License

WTFPL

Contributors



benjamincrozat
commits
Categories: Vue js
Tags: