Refactor from Vue2 to Vue3 (#20044)

Close #19902 

1 files changed, 4 insertions, 9 deletions

diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index f4e660be3f..d29da6d951 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Vue from 'vue';
+import {createApp} from 'vue';
 import ContextPopup from '../components/ContextPopup.vue';
 import {parseIssueHref} from '../utils.js';
 import {createTippy} from '../modules/tippy.js';
@@ -17,17 +17,12 @@ export default function initContextPopups() {
     if (!owner) return;
 
     const el = document.createElement('div');
-    el.innerHTML = '<div></div>';
     this.parentNode.insertBefore(el, this.nextSibling);
 
-    const View = Vue.extend({
-      render: (createElement) => createElement(ContextPopup),
-    });
-
-    const view = new View();
+    const view = createApp(ContextPopup);
 
     try {
-      view.$mount(el.firstChild);
+      view.mount(el);
     } catch (err) {
       console.error(err);
       el.textContent = 'ContextPopup failed to load';
@@ -37,7 +32,7 @@ export default function initContextPopups() {
       content: el,
       interactive: true,
       onShow: () => {
-        view.$emit('load-context-popup', {owner, repo, index});
+        el.firstChild.dispatchEvent(new CustomEvent('us-load-context-popup', {detail: {owner, repo, index}}));
       }
     });
   });