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

Error encountered: "Jest error - TypeError: Unable to access property 'preventDefault' because it is undefined."

"Safari (iOS) is experiencing a functionality issue where Alert() is working, but console.log() is

Setting an interval for a specific function to trigger after a delay of 5 seconds

The dark theme in React Material UI will be specifically targeted and applied only to the drawer

How can I stop v-dialog from closing automatically?

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

Learn how to display a "not found" message in a React.js application

Exploring Node.js and JSON: Retrieving specific object attributes

jQuery mobile menu: Scroll to content after closing the menu

Transferring a single dataset from a table to a pop-up modal using Angular

Java servlet is unable to interpret the name of an html select tag

Welcome to the JavaScript NodeJs Open Library!

The AngularJS ng-if directive is failing to function properly, despite the logged boolean accurately reflecting the

Using Javascript to fetch JSON data from a PHP file hosted on an IIS server, incorporating JSONP with

Multiple ngFor loops causing only the final item to be displayed in the inner loop

The deprecated body parser is throwing an error due to the lack of the extended option

The feature to prevent multiple selections in JSTree is not functioning as expected

Exploring the power of Javascript for number lookup

What steps should I take to create an object that can be converted into a JSON schema like the one shown here?

Switch from using pure JavaScript to jQuery or back