Calling a global popup from nested vue components I have tons of nested Vue components that need to be able to open a global modal. To avoid having tons of listeners and emitters snaking their way all through the app, I am using VueX. The main App has a modal which gets shown if the modal state is not undefined.

Root app template

&lt;template&gt;
   &lt;components&gt;&lt;/components&gt;
   &lt;popup v-if="popupImage" :image="popupImage"&gt;&lt;/popup&gt;
&lt;/template&gt;


Root app script

import { State } from 'vuex-class'
@State(state =&gt; state.popupImage) popupImage:string


Nested component

From within a component I set the popup string, which will trigger the global modal:

this.$store.commit("setPopup", "bla.jpg")


It all works fine, but does it seem a bit overkill to add VueX ONLY for a modal window? The rest of the app doesn't use VueX at all. What is the recommended way to open a modal from anywhere in a Vue app?
Global Event Bus is a solution but since you have to listen emits in components's mounted or created lifecycle hook, it's getting duplicated in each instance.

I had same 'issue' and resolved it by mounting my popup component dynamically and setting it into prototype of my Vue instance. 

Example;

import Vue from 'vue';
import Popup from '@/components/Popup.vue';

Vue.prototoype.$popup = new Vue(Popup).$mount();


Imagine you have show method in your Popup component. Now with this injection you can use it in any component as;

this.$popup.show();