Trigger a unique event using Vanilla JS and then detect it on Vue instances

Question

Trigger a unique event using Vanilla JS and then detect it on Vue instances

I am currently in the process of incorporating multiple Vue instances into my website. I have encountered issues preventing me from making the entire website a Vue instance and using components due to potential conflicts and other complications.

For example, consider the following:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="vueOne"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac commodo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
    <div id="vueTwo"></div>
    <script>
        new Vue({
            el: '#vueOne',
            data: {
                count: 0
            }
        });
        new Vue({
            el: '#vueTwo',
            data: {
                count: 0
            }
        });

    </script>
  </body>
</html>

Is there a method to trigger a custom event in Vanilla JS and have the Vue instances recognize it?

javascript vue.js

Answer 1

Answer №1

When setting up events on your Vue elements or components, the event listeners used are similar to those set up on regular HTML elements. This means that you can obtain a reference to the element where the event listener is attached and trigger a custom event using dispatchEvent.

For example, if you have an event named my-event set up on a div like this:

<div id="vueOne" v-on:my-event="myListener">{{count}}</div>

You can use querySelector("#vueOne") to access that specific element and then call dispatchEvent() on it

document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );

Demo

new Vue({
  el: '#vueOne',
  data: {
    count: 0
  },
  methods:{
    myListener:function(){
      this.count++;
      console.log("listener called");
    }
  }
});
new Vue({
  el: '#vueTwo',
  data: {
    count: 0
  }
});

setTimeout(function(){
  document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );
},2000);

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="vueOne" v-on:my-event="myListener">{{count}}</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac commodo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam
  ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
<div id="vueTwo"></div>

Answer 2

When setting up events on your Vue elements or components, the event listeners used are similar to those set up on regular HTML elements. This means that you can obtain a reference to the element where the event listener is attached and trigger a custom event using dispatchEvent.

For example, if you have an event named my-event set up on a div like this:

<div id="vueOne" v-on:my-event="myListener">{{count}}</div>

You can use querySelector("#vueOne") to access that specific element and then call dispatchEvent() on it

document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );

Demo

new Vue({
  el: '#vueOne',
  data: {
    count: 0
  },
  methods:{
    myListener:function(){
      this.count++;
      console.log("listener called");
    }
  }
});
new Vue({
  el: '#vueTwo',
  data: {
    count: 0
  }
});

setTimeout(function(){
  document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );
},2000);

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="vueOne" v-on:my-event="myListener">{{count}}</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac commodo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam
  ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
<div id="vueTwo"></div>

Answer 3

Answer №2

I implement a similar approach by creating a separate Vue instance dedicated to messaging functions only. This allows me to trigger events from non-Vue components and utilize them within Vue, as well as vice versa.

window.Event = new class {
  constructor() {
    this.vue = new Vue();
  }
  fire(event, data = null) {
    this.vue.$emit(event, data);
  }
  listen(event, callback) {
    this.vue.$on(event, callback);
  }
}

Within a component, I set up an event listener:

created () {
    Event.listen('notification', function (msg) {
      console.log(msg);
    });
  }

This enables me to send messages like so:

Event.fire('notification', {
    title: 'Hello from notification through message :)';
});

Because the event class is attached to the window object, it remains accessible across all components and functions. This provides a simple way to facilitate communication between different Vue instances, Vue to vanilla JS, and vice versa.

Furthermore, since the Vue instance is specialized for messaging purposes only, the overhead is minimal. Multiple event listeners can be added, accommodating various types of messages directed at different recipients or setting up multiple handlers for the same message.

Answer 4

I implement a similar approach by creating a separate Vue instance dedicated to messaging functions only. This allows me to trigger events from non-Vue components and utilize them within Vue, as well as vice versa.

window.Event = new class {
  constructor() {
    this.vue = new Vue();
  }
  fire(event, data = null) {
    this.vue.$emit(event, data);
  }
  listen(event, callback) {
    this.vue.$on(event, callback);
  }
}

Within a component, I set up an event listener:

created () {
    Event.listen('notification', function (msg) {
      console.log(msg);
    });
  }

This enables me to send messages like so:

Event.fire('notification', {
    title: 'Hello from notification through message :)';
});

Because the event class is attached to the window object, it remains accessible across all components and functions. This provides a simple way to facilitate communication between different Vue instances, Vue to vanilla JS, and vice versa.

Furthermore, since the Vue instance is specialized for messaging purposes only, the overhead is minimal. Multiple event listeners can be added, accommodating various types of messages directed at different recipients or setting up multiple handlers for the same message.

Trigger a unique event using Vanilla JS and then detect it on Vue instances

Answer №1

Answer №2

Similar questions

Encountering an unexpected token ';' in a random generator while attempting to utilize an if-else statement for determining DOM manipulation

"By selecting the image, you can initiate the submission of the form

unusual behavior of UTF-8 characters in Blogger when utilizing JavaScript

How come my total isn't zero after I get a 1 on the dice roll?

Error: The function initMap() is not recognized in the Google Maps API

Vessel situated after the helm

A ReactJS Error occurred: {error: 400, reason: "Failed match", message: "Failed match [400]", errorType: "Meteor.Error"}

Unable to retrieve basic profile data from LinkedIn Members using their email ID unless they are signed in

Stop the reoccurring action for a jQuery plugin by using the clearInterval function

Create geometric shapes on Google Maps version 2

Dealing with prompt boxes in Robot Framework: A Guide

Variations between <div/> and <div></div>

Unable to fetch a new session from the selenium server due to an error

Proceed with downloading the file only when a checkbox has been ticked off and the form has been

Converting a UUID from a string to an integer in JavaScript

What is the best way to remove extra information from a redirect URL?

Choose a particular text node from the element that has been selected

broker handling numerous ajax requests simultaneously

The template for a Vue dynamic component refuses to function properly with a promise

Activate Bootstrap datetimepicker by using the enter key to automatically populate the initial date