JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.rawgit.com/javisperez/vuedals/master/dist/vuedals.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h1>Vuedals Example</h1>

<div id="app">
</div>

CSS

body {
  padding: 10px;
}
.sample-component {
  padding: 10px;
  background-color: #EDEDED;
}

JavaScript

const Bus = Vuedals.Bus;
const Component = Vuedals.Component;
const Plugin = Vuedals.default;

Vue.use(Plugin);

// Sample component
const Sample = {
    name: 'sample-component',

    methods: {
        openNewModal() {
            this.$vuedals.open({
                title: 'Cutie',

                component: {
                    name: 'inside-modal',

                    template: `<div>Im a cute modal</div>`
                }
            })
        }
    },

    template: `
        <div class="sample-component">
            <p>
                <h4>Sample Component</h4>
            </p>
            <p>
                <span class="btn btn-primary" @click="openNewModal()">Open a Modal from a component</span>
            </p>
        </div>`
}

// First sample modal
const ModalComponent1 = {

    name: 'inside-modal-1',

    props: ['example'],

    methods: {
        openModal() {
            this.$emit('vuedals:new', {
                title: 'Modal in modal!  wow!',
                component: ModalComponent2
            });
        }
    },

    template: `<div>
        <p>This is a component inside the modal, you can pass some props by using a "props" options.</p>
        <blockquote>{{ example }}</blockquote>
        <span class="btn btn-primary" @click="openModal()">Open another modal</span>
    </div>`
};

// Second sample component
const ModalComponent2 = {
    name: 'inside-modal-2',

    methods: {
        openModal() {
            this.$vuedals.open({
                dismisable: false,
                component: ModalComponent3
            });
        },

        closeModal() {
            this.$vuedals.close();
        }
    },

    template: `<div>
        <p>
            <h3>How awesome is this?</h3>
        </p>

        <p class="text-right">
            <span class="btn btn-primary" @click="openModal()">Another modal?</span>
            <span class="btn btn-default" @click="closeModal()">Close</span>
        </p>
    </div>`
};

// Third sample...