Accessing vue method from external JavaScript

[somascope]

I have some non-Vue/non-Quasar content that I want to be able to call a Vue method from. How can I call a method in my app from other external JavaScript code?

In this case, I just want to have this other content be able to change the app’s route to go home, like

this.$router.push('/')

That would be in a Vue method, but I just don’t know how to call that from “outside” the Quasar build.

Does anybody have ideas on how to do such a thing?

[lucasfernog]

I guess you can import the router instance from the route definition file and just use it

[somascope]

Thanks for the idea, @lucasfernog, but I’m not sure that could be done. The “external JavaScript” that would need to be able to communicate to the Quasar app would be dumb ol’ vanilla JavaScript, with no use of any Vue stuff.

[lucasfernog]

I dont understand your use case… maybe the way is to binding context to the function to call, so you can use this.$router directly, but its weird

[qyloxe]

@somascope there’s always window events - ie like this:

...
  created () {
    if (window.addEventListener) {
      window.addEventListener('message', this.listenWindowMessage, false)
    } else {
      window.attachEvent('onmessage', this.listenWindowMessage)
    }
  },
  beforeDestroy () {
    if (window.addEventListener) {
      window.removeEventListener('message', this.listenWindowMessage, false)
    } else {
      window.detachEvent('onmessage', this.listenWindowMessage)
    }
  },
  methods: {
    listenWindowMessage (event) {
      console.log(event)
    },
    ...

[somascope]

@lucasfernog I’m sorry, I might not have been very clear - thanks for helping though!

@qyloxe I had begun thinking about events, and then saw your comment. This is exactly what I needed - thank you! Bonus points for including old IE event listeners and also removing the event.

I’ll dispatch a new event from my non-Vue/Quasar code with:

window.dispatchEvent(new CustomEvent('myEventNameHere'));