Vue 3 event bus implementation

I have vue-cli apllication based on vue 3. I am learning on it. I would like to implement event bus according this article but it does not work.

Code is like in the example:
EventBuss.js

import Vue from 'vue';

export const EventBus = new Vue();

About component emmits EventBus event

    methods: {
        clickHandler: function() {
    			EventBus.$emit("some-root-event", "teeeeeeeeeeeeeeeeeeeeest");
        }
    }

AboutListener component

	mounted() {
		EventBus.$on("some-root-event", function(data) {
			console.log("About listener catch $root some-root-event"); console.log(data)
		})
	},

This throws me an error: Uncaught (in promise) Error: Couldn’t resolve component “default” for the following record with path “/about”

What is wrong with that? I would like to understand it. Thanks for help.

The article is not using Vue 3.

Support for this kind of events has been removed: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md

While it is still possible to use an event bus (see the RFC), many people consider using an event bus in Vue to be an anti-pattern.

So I should not use event bus at all. Ok I am learning dont know what to do or not to do. Thank you.

It is worth knowing about the event bus ‘pattern’ because it is commonly used and you may come across it on projects written by other people.

To back up my claim that many people don’t like it, the ‘Enjoy The Vue’ podcast panel discuss it at around 48 minutes in this episode: https://enjoythevue.io/episodes/24.

Thank you.

The official Vue3 strategy is using mitt instead. Its a 80lines dead simple eventBus implementation that provides you with 95% of Vue2 EB functionality.