SOURCE

Vue.component('modal', {
  template: '#modal',
	props: {
		show: {
			twoWay: true
		}
	}
});

new Vue({
  el: '#app',
  data: {
		showModal: false
	},
  methods: {
		open: function () {
			this.showModal = !this.showModal
		}
	}
});

<template id="modal">
  <transition name="vnc">
    <div class="vnc-modal" v-show="show">
      <div class="vnc-mask">
      </div>
      <div class="vnc-container">
        <div class="vnc-dialog">
          <slot name="header">
            <div class="vnc-header">
              Default Header
            </div>
          </slot>
          <slot name="body">
            <div class="vnc-body">
              Default Body.
            </div>
          </slot>
          <slot name="footer">
            <div class="vnc-footer">
              <button v-on:click="show = false">Close</button>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<div id="app">
  <modal :show.sync="showModal"></modal>
	<button v-on:click="open">Open</button>
</div>

.vnc-mask, .vnc-container {
	position: fixed;
}

.vnc-mask {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .45);
	z-index: 1;
	transition: opacity .4s ease;
}

.vnc-container {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	
	.vnc-dialog {
		background-color: white;
		border-radius: 5px;
		transition: all .4s ease;
		width: 320px;
		
		> div {
			padding: 20px;
		}
	}
}

.vnc-enter, .vnc-leave {
	opacity: 0;
}

.vnc-enter .vnc-dialog,
.vnc-leave .vnc-dialog {
	transform: scale(1.1);
}

/* button style */
button {
	padding: 6px 12px;
	background-color: white;
	border-radius: 4px;
	border: 1px solid #ddd;
	cursor: pointer;
	
	&:focus {
		outline: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
}