When working with version 3 of Vue.js, you have the option to incorporate a third-party library or utilize the features of the publisher-subscriber (PubSub) programming pattern.

eventHandler.js

//eventsHandler - a simple Javascript implementation of the publish subscribe pattern

class EventHandler{
    constructor(){
        this.events = {};
    }

    on(eventName, fn) {
        this.events[eventName] = this.events[eventName] || [];
        this.events[eventName].push(fn);
    }

    off(eventName, fn) {
        if (this.events[eventName]) {
            for (var i = 0; i < this.events[eventName].length; i++) {
                if (this.events[eventName][i] === fn) {
                    this.events[eventName].splice(i, 1);
                    break;
                }
            };
        }
    }

    trigger(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }
}

export default new EventHandler();

main.js

import Vue from 'vue';
import $bus from '.../eventHandler.js';

const app = Vue.createApp({})
app.config.globalProperties.$bus = $bus;

Content of CommunicationChannel file:

class ChannelMessage extends Message {
  public content: any

  constructor({type, content} : {type: string, content: any}) {
    super(type)
    this.content = content
  }
}

class CommunicationChannel extends Channel {
  private static _instance: CommunicationChannel

  public static getInstance() : CommunicationChannel {
    if (!this._instance) this._instance = new CommunicationChannel()
    return this._instance
  }

  public send(type : string, content?: any) : void {
    this.sendMessage(new ChannelMessage({type, content}))
  }
}

export default CommunicationChannel.getInstance()

usage in project, send message:

import CommunicationChannel from '...path to communication channel file with class'
//...bla bla bla... code...
CommunicationChannel.send('message type', {..some content..}')

receive message:

import CommunicationChannel from '...path to communication channel file with class' 
//...bla bla bla... code...
CommunicationChannel.addEventListener('message type', (message) => { console.log(message.content) })

Let me share an interesting tidbit with you - you can also leverage the functionality of useEventBus provided by VueUse.

For instance, take a look at this TypeScript example that involves using an injection key:

//myInjectionKey.ts
import type { EventBusKey } from '@vueuse/core'
export const myInjectionKey: EventBusKey<string> = Symbol('my-injection-key')

//emmitter
import { useEventBus } from '@vueuse/core'
import { myInjectionKey } from "src/config/myInjectionKey";

const bus = useEventBus(mapInjectionKey)
bus.emit("Hello")

//receiver
import { useEventBus } from '@vueuse/core'
import { myInjectionKey } from "src/config/myInjectionKey";
const bus = useEventBus(myInjectionKey)
bus.on((e) => {
    console.log(e) // "Hello"
})

I have modified an existing solution to mimic the interface of a Vue instance, allowing for seamless integration as a substitute without altering the consuming code.

This updated iteration now includes support for the $off method, where the first argument can be an array of event names. It also resolves a previous issue in the $off method where unregistering multiple event listeners would inadvertently remove the wrong one due to forward iteration over the array while simultaneously removing elements from it.

event-bus.js:

// @ts-check

/**
 * A replacement for the traditional Vue 2-based EventBus.
 *
 * @template EventName
 */
class Bus {
  constructor() {
    /**
     * @type {Map<EventName, Array<{ callback: Function, once: boolean }>>}
     */
    this.eventListeners = new Map()
  }

  /**
   * @param {EventName} eventName
   * @param {Function} callback
   * @param {boolean} [once]
   * @private
   */
  registerEventListener(eventName, callback, once = false) {
    if (!this.eventListeners.has(eventName)) {
      this.eventListeners.set(eventName, [])
    }

    const eventListeners = this.eventListeners.get(eventName)
    eventListeners.push({ callback, once })
  }

  /**
   * Refer to: https://v2.vuejs.org/v2/api/#vm-on
   *
   * @param {EventName} eventName
   * @param {Function} callback
   */
  $on(eventName, callback) {
    this.registerEventListener(eventName, callback)
  }
  
  // Additional methods omitted for brevity...

}

const EventBus = new Bus()

export default EventBus

old-event-bus.js:

import Vue from 'vue'

const EventBus = new Vue()

export default EventBus

example.js:

// import EventBus from './old-event-bus.js'
import EventBus from './event-bus.js'

Check out this enhanced version of Boussadjra Brahim's response utilizing the composition API. This method gives you the ability to trigger an event multiple times with or without a payload. Keep in mind that the counter is simply used to signal a change if no payload is provided, or if the same payload is triggered repeatedly.

It's important to exercise caution with SSR; in such cases, the bus variable will be shared, potentially causing state pollution across requests. An effective solution is to implement the event bus as a plugin and expose it through a composable. This ensures that the bus variable is initialized for each request.

utilizeEventBus.js

import { ref, watch } from 'vue';

const bus = ref(new Map());

export function useEventsBus() {
  const emit = (event, props) => {
    const currentValue = bus.value.get(event);
    const counter = currentValue ? ++currentValue[1] : 1;
    bus.value.set(event, [props, counter]);
  };

  const on = (event, callback) => {
    watch(() => bus.value.get(event), (val) => {
      callback(val[0]);
    });
  };

  return {
    emit,
    on,
    bus,
  };
}

PublisherComponent.vue

<script setup lang="ts">
import { useEventsBus } from '~/composables/useEventsBus';
</script>

<template>
  <Button
    @click="useEventsBus().emit('btn-clicked', 'Hello there')"
  >
    Button with payload
  </Button>
  <Button
    @click="useEventsBus().emit('btn-another-clicked')"
  >
    Button without payload
  </Button>
</template>

SubscriberComponent.vue

<script setup lang="ts">
import { useEventsBus } from '~/composables/useEventsBus';

useEventsBus().on('btn-clicked', (payload) => {
  console.log(payload); // 'Hello there'
});

useEventsBus().on('btn-another-clicked', (payload) => {
  console.log(payload); // undefined
})
// you can subscribe on the event several times
useEventsBus().on('btn-another-clicked', (payload) => {
  console.log(payload); // undefined
})
</script>

It's interesting to note that the vue3 documentation doesn't mention it, but we have the ability to utilize javascript custom events on the window and catch the event in our desired vue3 component:

Imagine you wish to trigger a modal from any part of your vue3 project (App.vue) and your source component (App.vue) could contain:

<script setup>
function showMyCustomModal() {
  const showModal = new CustomEvent('modal::show', {
    // to hide, emit `modal::hide`, ensuring
    // the component is currently active and can respond to this event
    detail: 'my-custom-modal',
  })
  window.dispatchEvent(showModal);
}
</script>

Subsequently, your modal component (Modal.vue) can start monitoring that event when mounted:

<script setup>
  // define function to handle show modal event
  function handleModalShowEvent(event) {
    if (event.detail === props.id) {
      show();
    }
  }

  // define another for handling hide modal event
  function handleModalHideEvent(event) {
    if (event.detail === props.id) {
      hide();
    }
  }

  onMounted(() => {
    // when mounted, listen for the events
    window.addEventListener('modal::show', handleModalShowEvent);
    window.addEventListener('modal::hide', handleModalHideEvent);
  })

  onUnmounted(() => {
    // when unmounted, remove them:
    window.removeEventListener('modal::show', handleModalShowEvent);
    window.removeEventListener('modal::hide', handleModalHideEvent);
  })
</script>

When moving from Vue 2.x to Vue 3.0, transitioning to https://www.npmjs.com/package/vue-eventer involves only minimal code adjustments (simply initialization)...

// Vue 2.x
Vue.prototype.$eventBus = new Vue();

->

// Vue 3.x
import VueEventer from 'vue-eventer';
YourVueApp.config.globalProperties.$eventBus = new VueEventer();

Utilizing Vue composition along with defineEmit can simplify the process:

<!-- Parent -->
<script setup>
  import { defineEmit } from 'vue'
  const emit = defineEmit(['selected'])
  const onEmit = (data) => console.log(data)
</script>

<template>
    <btnList
        v-for="x in y"
        :key="x"
        :emit="emit"
        @selected="onEmit"
    />
</template>

<!-- Children (BtnList.vue) -->
<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
      emit: Function
  })
</script>

<template>
    <button v-for="x in 10" :key="x" @click="props.emit('selected', x)">Click {{ x }}</button>
</template>

This demonstration features one child component, but you have the ability to pass the emit function down to additional children as well.

This solution utilizes the mitt library for event handling.

EventBus.js

import mitt from 'mitt'

const emitter = mitt()
export default {
    $on: (...args) => emitter.on(...args),
    $once: (...args) => emitter.once(...args),
    $off: (...args) => emitter.off(...args),
    $emit: (...args) => emitter.emit(...args)
}

How to use in a project:
Component-emiter.js

import EventBus from "../../EventBus"; // provide path to EventBus.js

// ... component code ...
EventBus.$emit('event name',{'some': 'data'});

Component-receiver.js

import EventBus from "../../EventBus"; // provide path to EventBus.js

// ... component code ...
EventBus.$on('event name', (data) => {
    console.log('Event emitted:', data);      
});