Basic 'how to show modal component' vue 2.0 example

app.vue

<template>
	<div id='app'>
		<component :is="currentModal" :modal-data="extraData" v-if="showModal"></component>
	</div>
</template>

<script>
import LoginModal from './LoginModal';
import LogoutModal from './LogoutModal';

export default {
	name: 'app',
	components: {
  		LoginModal,
		LogoutModal,
	},
	data() {
		return {
			currentModal: '',
			extraData: null,
			showModal: false,
		};
	},
 	created() {
    // pass modalName to showModal
    // additionally pass additional Modal data, if needed
		this.$eventBus.$on('showModal', (modalName, modalData) => {
			this.showModal = true;
			this.currentModal = modalName;
			this.extraData = modalData;
		});

		this.$eventBus.$on('closeModal', () => {
			this.showModal = false;
		});
	},
};
</script>

main.js

// Setting up your main js
import Vue from 'vue';

// set up an eventBus listener, so you can call it anywhere.
// globally call Vue.$eventBus or
// call this.$eventBus from within a component.
const event = function event(Vue) {
	Vue.prototype.$eventBus = Vue.$eventBus = new Vue();
};
Vue.use(event);

// set up your vue app
new Vue({
	el: '#app',
	template: '<App/>',
	components: { App },
});

modal.js

// This file should basically be a component that has a close method
// which basically calls the same
this.$eventBus.$emit('hideModal');
// event.

// Using THIS modal.vue components created // beforeDestroy methods, you can animate it in/out of your view.

some-other-component.vue

<script>
export default {
	name: 'someComponent',
 	created() {
		// from any component, you can now trigger a modal
		this.$eventBus.$emit('showModal', 'LoginModal');
	},
};
</script>