Migrate from Vue event hub to Mitt

app/assets/javascripts/clusters/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/deploy_keys/eventhub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/environments/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/filtered_search/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/frequent_items/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/groups/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/import_projects/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/integrations/edit/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/issue_show/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/merge_request_tabs.js

 /* eslint-disable no-new, class-methods-use-this */
 
 import $ from 'jquery';
-import Vue from 'vue';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Cookies from 'js-cookie';
+import createEventHub from '~/helpers/event_hub_factory';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
@@ -93,7 +93,7 @@ export default class MergeRequestTabs {
     this.pipelinesLoaded = false;
     this.commitsLoaded = false;
     this.fixedLayoutPref = null;
-    this.eventHub = new Vue();
+    this.eventHub = createEventHub();
 
     this.setUrl = setUrl !== undefined ? setUrl : true;
     this.setCurrentAction = this.setCurrentAction.bind(this);

app/assets/javascripts/pages/milestones/shared/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/pages/projects/labels/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/serverless/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/set_status_modal/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/vue_merge_request_widget/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

app/assets/javascripts/vue_shared/components/recaptcha_eventhub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
 // see recaptcha_tags in app/views/shared/_recaptcha_form.html.haml
 export const callbackName = 'recaptchaDialogCallback';
 
-export const eventHub = new Vue();
+export const eventHub = createEventHub();
 
 const throwDuplicateCallbackError = () => {
   throw new Error(`${callbackName} is already defined!`);

changelogs/unreleased/chore-vue-event-hub-to-mitt-migration.yml

+---
+title: Migrate from Vue event hub to Mitt
+merge_request: 31666
+author: Arun Kumar Mohan
+type: changed

ee/app/assets/javascripts/geo_nodes/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

ee/app/assets/javascripts/onboarding/onboarding_helper/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

ee/app/assets/javascripts/projects/settings_service_desk/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

ee/app/assets/javascripts/vue_shared/components/accordion/accordion_event_bus.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-const accordionEventBus = new Vue();
-
-export default accordionEventBus;
+export default createEventHub();

ee/app/assets/javascripts/vulnerabilities/components/vulnerabilities_event_bus.js

-// TODO: Replace with mitt implementation for Vue3 once it has been verified
-// (https://gitlab.com/gitlab-org/gitlab/-/issues/215672)
-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();

ee/spec/frontend/vue_shared/components/accordion/accordion_event_bus_spec.js

-import Vue from 'vue';
-import accordionEventBus from 'ee/vue_shared/components/accordion/accordion_event_bus';
-
-describe('Accordion event bus', () => {
-  it('default exports a vue instance', () => {
-    expect(accordionEventBus instanceof Vue).toBe(true);
-  });
-});

ee/spec/frontend/vulnerabilities/vulnerabilities_event_bus_spec.js

-import Vue from 'vue';
-import vulnerabilitiesEventBus from 'ee/vulnerabilities/components/vulnerabilities_event_bus';
-
-describe('Vulnerabilities event bus', () => {
-  it('default exports a vue instance', () => {
-    expect(vulnerabilitiesEventBus instanceof Vue).toBe(true);
-  });
-});

spec/frontend/notes/components/discussion_filter_spec.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 import Vuex from 'vuex';
 
 import { createLocalVue, mount } from '@vue/test-utils';
@@ -132,7 +132,7 @@ describe('DiscussionFilter component', () => {
   });
 
   describe('Merge request tabs', () => {
-    eventHub = new Vue();
+    eventHub = createEventHub();
 
     beforeEach(() => {
       window.mrTabs = {

spec/frontend/notes/mixins/discussion_navigation_spec.js

@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import * as utils from '~/lib/utils/common_utils';
 import discussionNavigation from '~/notes/mixins/discussion_navigation';
 import eventHub from '~/notes/event_hub';
+import createEventHub from '~/helpers/event_hub_factory';
 import notesModule from '~/notes/stores/modules';
 import { setHTMLFixture } from 'helpers/fixtures';
 
@@ -67,8 +68,7 @@ describe('Discussion navigation mixin', () => {
 
   describe('cycle through discussions', () => {
     beforeEach(() => {
-      // eslint-disable-next-line new-cap
-      window.mrTabs = { eventHub: new localVue(), tabShown: jest.fn() };
+      window.mrTabs = { eventHub: createEventHub(), tabShown: jest.fn() };
     });
 
     describe.each`