Vue.js 2 - How to fix an event from one Vue application / instance to another?

Question

I am using webpack with one file component.

I have 1 Vue instance in my menu header to show the Trash drop-down menu:

import Vue from 'vue';
import App from './AppShoppingCart.vue';

new Vue({
    el: '#shoppingCartApp',
    template: '<App/>',
    components: {App}
});

I have another instance of Vue on the same page (product directory):

import Vue from 'vue';
import App from './AppCatalog.vue';

new Vue({
    el: '#catalogApp',
    template: '<App/>',
    components: {App}
});

I want the $ emit event from one instance to another: when changing a directory, I want to call a function in ShoppingCart.

I am testing eventHub :

import Vue from 'vue';

var eventHub = new Vue();
export default eventHub; 

So, I import the event into each instance:

import eventHub from './events/eventHub';

In the catalog:

eventHub.$emit( "actproductslist-changed" );

At ShoppingCart:

eventHub.$on('actproductslist-changed', function(){ alert('AppShoppingCart') } );

But that will not work. It only works if $ on and $ emit are in the same Vue instance.

I think webpack creates 2 modules and I cannot exchange variables between two instances.

- webpack?

Answer 1

, main.js - .

bus.js

import Vue from "vue"

const bus = new Vue();
export default bus;

main.js

import Vue from 'vue'
import App from './App.vue'
import App2 from './App2.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

new Vue({
  el:"#app2",
  render: h => h(App2)
})

App.vue

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
  import Vue from "vue"
  import bus from "./bus"

  export default {
    methods:{
      sendMessage(){
        bus.$emit("testing")
      }
    }    
  }
</script>

App2.vue

<template></template>

<script>
  import Vue from "vue"
  import bus from "./bus"

  export default {
    mounted(){
        bus.$on("testing", ()=> alert("message received"));
    }
  }
</script>

, bus Vue .

webpack.config.js

  entry: {
    "main": './src/main.js', 
    "main2": './src/main2.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },

bus.js

import Vue from "vue"

window.bus = new Vue();

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

main2.js

import Vue from 'vue'
import App2 from './App2.vue'
import bus from "./bus"

new Vue({
  el:"#app2",
  render: h => h(App2)
})

App.vue

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
  import Vue from "vue"

  export default {
    methods:{
      sendMessage(){
        if (bus)
          bus.$emit("testing")
      }
    }    
  }
</script>

App2.vue

<template></template>

<script>
  import Vue from "vue"

  export default {
    mounted(){
        bus.$on("testing", ()=> alert("message received"));
    }
  }
</script>

, bus main2.js, App.vue , ( main2.js).