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 ?:

You should export a component in alarm.js, and load that component into the App component (import Alarm from './alarm.js' {el: '#app', components: 'Alarm', ... }). You could also use Vuex to manage your state — cl3m
– cl3m, Commented Sep 9, 2017 at 20:29
@cl3m - but again, the question is how should I put my code into the alarms.js file? The same way as app.js did not work — aspirinemaga
– aspirinemaga, Commented Sep 9, 2017 at 20:46
Use vuex and check this fiddle: jsfiddle.net/n9jmu5v7/1269 (from vuex documentation here: vuex.vuejs.org/en/getting-started.html) — cl3m
– cl3m, Commented Sep 9, 2017 at 20:49

cl3m · Accepted Answer · 2017-09-09 21:02:42Z

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

edited Sep 9, 2017 at 21:02

answered Sep 9, 2017 at 20:57

cl3m

2,80121 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aspirinemaga Over a year ago

Thank you so much, I will test it out and give my feedback

tony19 · Accepted Answer · 2022-07-16 04:38:14Z

0

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')
  }
})

edited Jul 16, 2022 at 4:38

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 9, 2017 at 23:43

exclsr

3,35725 silver badges27 bronze badges

Collectives™ on Stack Overflow

Best practice to make multiple Vuejs javascript files work together

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related