How to emit an event with Vue.js inside the bootstrap?

Question

What I want

I'd like to emit an event if there is a request and another event if there is a response and listen to it inside my App.vue .

Situation

I am using VueResource and the built in interceptor:

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.http.interceptors.push((request, next) => {
  next((response) => {
  })

})

const app = new Vue({
  render: h => h(App)
}).$mount('#app')

What I tried

Bootstrap

Vue.http.interceptors.push((request, next) => {
  Vue.emit('request', request)

  next((response) => {
     Vue.emit('response', response)
  })
})

App.vue

<template>
  <div v-on:request="doStuff">
    <navigation-bar></navigation-bar>
    <router-view></router-view>
  </div>
</template>

I get this error:

TypeError: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.$emit is not a function

---

New App.vue after discussion

<template>
  <div>
     <router-view></router-view>
  </div>
</template>

<script>
  import EventBus from './EventBus'

  export default {
    created () {
      EventBus.$on('request', this.invokeLoading())
      EventBus.$on('response', this.stopLoading())
    },

    methods: {
      invokeLoading () {
        console.log('Start')
      },

      stopLoading () {
        console.log('Stop')
      },
    }
  }
</script>

Answer 1

You can use an eventBus to handle this scenario like:

import Vue from 'vue'
import VueResource from 'vue-resource'
import bus from 'path/to/event-bus'

Vue.http.interceptors.push((request, next) => {
  bus.$emit('request', request)

  next((response) => {
    bus.$emit('response', response)
  })

})

const app = new Vue({
  render: h => h(App)
}).$mount('#app')

and the eventBus can be created like:

import Vue from 'vue'

export default new Vue()

You can read more about eventBus es here .

The problem in your way of doing it is: Vue is a constructor function, it doesn't have the emit method on itself.

---

To listen to the emitted events in any component you need to have eventBus imported. So, assuming the app component:

import bus from 'path/to/event-bus'

export default {
  created () {
    bus.on('request', this.onRequest)
    bus.on('response', this.onRequest)
  },
  methods: {
    onRequest () {
      // do something.
    },
    onResponse () {
      // do something.
    }
  }
}

Here, the app component starts listening to both the events the moment the app component is created. You can use other life-cycle hooks but since these events are emitted by a separate Vue instance, which is bus you can't do something like: <div v-on:request="doStuff">...</div>