Best practice to make multiple Vuejs javascript files work together

Question

I can't find much information on the web with explanation on how to use multiple vuejs instances and make them work together.

Please, can someone show me his code style on how to do that?

I have a main /resources/assets/js/app.js :

Vue.component('google-maps', require('./components/Gmaps.vue'));

export const App = window.App = new Vue({
    el: '#app',

    mounted(){

        // Listen for an event
        socket.on('alarm-channel:App\\Events\\AlarmCreated', ({data}) => {
            return this.alarmCreated(data.alarm);
        });

    },

    data: {
        users:  [],
        alarms: []                      // #01 - should be in Alarms.js
    },

    methods: {

        /* Newly registered alarm */
        alarmCreated(alarm){
            this.alarms.push(alarm);    // #01 - should be in Alarms.js 
        }
    }
});

How can I call a same new Vue() inside /resources/assets/js/alarms.js to make it work together ?:

Answer 1

Assuming you are using a bundler such as webpack, and are able to use ES6 modules, I would create a Vuex store in alarm.js :

// npm install vuex
import Vuex from 'Vuex'

export const store = new Vuex.Store({
  state: {
    users: [],
    alarms: []
  },
  mutations: {
    addAlarm(state, alarm) {
      state.products.push(alarm)
    }
  },
  getters: {
    alarms: state => state.alarms,
    users: state => state.users
  },
  actions: {
    addAlarm: ({ commit }, alarm) => {
      commit('addAlarm', obj)
    }
  }
})

Then import it into app.js :

import Vuex from 'Vuex'
import { store } from './alarm.js'

Vue.use(Vuex)

new Vue({
  el: '#app',
  mounted() {
    // Listen for an event
    socket.on('alarm-channel:App\\Events\\AlarmCreated', ({
      data
    }) => {
      return this.alarmCreated(data.alarm);
    });
  },
  computed: {
    ...Vuex.mapGetters({
      alarms: 'alarms',
      users: 'users'
    })
    // or maybe?
    // alarms: _ => store.alarms
  },
  methods: {
    ...Vuex.mapActions({
        addAlarm: 'addAlarm'
      }),
      alarmCreated(alarm) {
        this.addAlarm(alarm)
      }
  }
});

I have not tested this code, you may have to tweak it a bit to suit your needs.

The ideal place for the store would be in a store directory, with an index.js file to load submodules.

You should definately have a look at the Vuex documentation

Answer 2

If you have two Vue instances that don't have a parent-child relationship, one way to communicate between them is with the event-bus pattern .

This event bus could be shared using Vue plugins , which is another way to share state throughout your Vue app.

vue-event-bus is a plugin that combines these two ideas, and it's used like this:

var VueEventBus = require('vue-event-bus')
Vue.use(VueEventBus)

new Vue({
  created: function () {
    this.$bus.$on('event', function () { console.log('event is received.') })
  }
})

new Vue({
  created: function () {
    this.$bus.$emit('event')
  }
})