Migrate Vue 2 to Vue 3 in OrchardCore.Media module - JavaScript components

Copilot · sebastienros · Copilot · commit b9d7b6101305 · 2025-12-09T21:04:26.000Z
Co-authored-by: sebastienros &lt;1165805+sebastienros@users.noreply.github.com&gt;
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/app.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/app.js
@@ -1,7 +1,37 @@
 var initialized;
 var mediaApp;
 
-var bus = new Vue();
+// Simple event emitter to replace Vue 2 event bus
+class EventBus {
+    constructor() {
+        this.events = {};
+    }
+    
+    $on(event, callback) {
+        if (!this.events[event]) {
+            this.events[event] = [];
+        }
+        this.events[event].push(callback);
+    }
+    
+    $emit(event, ...args) {
+        if (this.events[event]) {
+            this.events[event].forEach(callback => callback(...args));
+        }
+    }
+    
+    $off(event, callback) {
+        if (this.events[event]) {
+            if (callback) {
+                this.events[event] = this.events[event].filter(cb => cb !== callback);
+            } else {
+                delete this.events[event];
+            }
+        }
+    }
+}
+
+var bus = new EventBus();
 
 function initializeMediaApplication(displayMediaApplication, mediaApplicationUrl, pathBase) {
 
@@ -31,20 +61,21 @@ function initializeMediaApplication(displayMediaApplication, mediaApplicationUrl
                 canCreateFolder: $('#allowNewRootFolders').val() === 'true'
             };
 
-            mediaApp = new Vue({
-                el: '#mediaApp',
-                data: {
-                    selectedFolder: {},
-                    mediaItems: [],
-                    selectedMedias: [],
-                    errors: [],
-                    dragDropThumbnail: new Image(),
-                    smallThumbs: false,
-                    gridView: false,
-                    mediaFilter: '',
-                    sortBy: '',
-                    sortAsc: true,
-                    itemsInPage: []
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        selectedFolder: {},
+                        mediaItems: [],
+                        selectedMedias: [],
+                        errors: [],
+                        dragDropThumbnail: new Image(),
+                        smallThumbs: false,
+                        gridView: false,
+                        mediaFilter: '',
+                        sortBy: '',
+                        sortAsc: true,
+                        itemsInPage: []
+                    };
                 },
                 created: function () {
                     var self = this;
@@ -452,6 +483,17 @@ function initializeMediaApplication(displayMediaApplication, mediaApplicationUrl
                 }
             });
 
+            // Register components
+            app.component('folder', folderComponent);
+            app.component('media-items-grid', mediaItemsGridComponent);
+            app.component('media-items-table', mediaItemsTableComponent);
+            app.component('pager', pagerComponent);
+            app.component('sortIndicator', sortIndicatorComponent);
+            app.component('upload', uploadComponent);
+            app.component('uploadList', uploadListComponent);
+
+            mediaApp = app.mount('#mediaApp');
+
             $('#create-folder-name').keydown(function (e) {
                 if (e.key == 'Enter') {
                     $('#modalFooterOk').click();
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/folderComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/folderComponent.js
@@ -1,5 +1,5 @@
 // <folder> component
-Vue.component('folder', {
+var folderComponent = {
     template: `
         <li :class="{selected: isSelected}" 
                 v-on:dragleave.prevent = "handleDragLeave($event);" 
@@ -190,4 +190,4 @@ Vue.component('folder', {
         }
 
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsGridComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsGridComponent.js
@@ -1,5 +1,5 @@
 // <media-items-grid> component
-Vue.component('media-items-grid', {
+var mediaItemsGridComponent = {
     template: `
         <ol class="row media-items-grid">
                 <li v-for="media in filteredMediaItems"
@@ -67,4 +67,4 @@ Vue.component('media-items-grid', {
             return getClassNameForFilename(filename) + ' ' + thumbsize;
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsTableComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsTableComponent.js
@@ -1,5 +1,5 @@
 // <media-items-table> component
-Vue.component('media-items-table', {
+var mediaItemsTableComponent = {
     template: `
         <table class="table media-items-table m-0">
             <thead>
@@ -119,4 +119,4 @@ Vue.component('media-items-table', {
              return   getClassNameForFilename(filename) + ' ' + thumbsize;
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/pagerComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/pagerComponent.js
@@ -1,8 +1,5 @@
-// This component receives a list of all the items, unpaged.
-// As the user interacts with the pager, it raises events with the items in the current page.
-// It's the parent's responsibility to listen for these events and display the received items
 // <pager> component
-Vue.component('pager', {
+var pagerComponent = {
     template: `
     <div>
         <nav id="media-pager" class="d-flex justify-content-center" aria-label="Pagination Navigation" role="navigation" :data-computed-trigger="itemsInCurrentPage.length">
@@ -157,4 +154,4 @@ Vue.component('pager', {
             this.current = 0;
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/sortIndicatorComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/sortIndicatorComponent.js
@@ -1,5 +1,5 @@
 // <sort-indicator> component
-Vue.component('sortIndicator', {
+var sortIndicatorComponent = {
     template: `
         <div v-show="isActive" class="sort-indicator">
             <span v-show="asc"><i class="small fa fa-chevron-up"></i></span>
@@ -16,4 +16,4 @@ Vue.component('sortIndicator', {
             return this.colname.toLowerCase() == this.selectedcolname.toLowerCase();
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/attachedMediaField.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/attachedMediaField.js
@@ -7,20 +7,21 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
     var idprefix = mediaFieldEditor.attr("id");
     var mediaFieldApp;
 
-    mediaFieldApps.push(mediaFieldApp = new Vue({
-        el: mediaFieldEditor.get(0),
-        data: {
-            mediaItems: [],
-            selectedMedia: null,
-            smallThumbs: false,
-            idPrefix: idprefix,
-            initialized: false,
-            allowMediaText: allowMediaText,
-            backupMediaText: '',
-            allowAnchors: allowAnchors,
-            backupAnchor: null,
-            mediaTextmodal: null,
-            anchoringModal: null
+    const app = Vue.createApp({
+        data() {
+            return {
+                mediaItems: [],
+                selectedMedia: null,
+                smallThumbs: false,
+                idPrefix: idprefix,
+                initialized: false,
+                allowMediaText: allowMediaText,
+                backupMediaText: '',
+                allowAnchors: allowAnchors,
+                backupAnchor: null,
+                mediaTextmodal: null,
+                anchoringModal: null
+            };
         },
         created: function () {
             var self = this;
@@ -339,5 +340,14 @@ function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaI
                 localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
             }
         }
-    }));
+    });
+
+    // Register components
+    app.component('mediaFieldThumbsContainer', mediaFieldThumbsContainerComponent);
+    app.component('mediaFieldGalleryContainer', mediaFieldGalleryContainerComponent);
+    app.component('mediaFieldGalleryListItem', mediaFieldGalleryListItemComponent);
+    app.component('mediaFieldGalleryCardItem', mediaFieldGalleryCardItemComponent);
+
+    mediaFieldApp = app.mount(mediaFieldEditor.get(0));
+    mediaFieldApps.push(mediaFieldApp);
 }
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/galleryMediaField.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/galleryMediaField.js
@@ -1,6 +1,6 @@
 const MEDIA_FIELD_GALLERY = "mediaFieldGallery_";
 
-Vue.component("mediaFieldGalleryListItem", {
+var mediaFieldGalleryListItemComponent = {
     template:
     /*html*/
     `
@@ -78,9 +78,9 @@ Vue.component("mediaFieldGalleryListItem", {
             return url + (url.indexOf("?") == -1 ? "?" : "&") + "width=32&height=32";
         },
     },
-});
+};
 
-Vue.component("mediaFieldGalleryCardItem", {
+var mediaFieldGalleryCardItemComponent = {
     template:
     /*html*/
     `
@@ -169,9 +169,9 @@ Vue.component("mediaFieldGalleryCardItem", {
             return (url + (url.indexOf("?") == -1 ? "?" : "&") + "width=240&height=240");
         },
     },
-});
+};
 
-Vue.component("mediaFieldGalleryContainer", {
+var mediaFieldGalleryContainerComponent = {
     template:
     /*html*/
     `
@@ -445,4 +445,4 @@ Vue.component("mediaFieldGalleryContainer", {
             );
         },
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/mediaFieldThumbsContainer.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/mediaFieldThumbsContainer.js
@@ -1,6 +1,6 @@
 // <media-field-thumbs-container> component
 // different media field editors share this component to present the thumbs.
-Vue.component('mediaFieldThumbsContainer', {
+var mediaFieldThumbsContainerComponent = {
     template:
     /* html */
     `
@@ -140,4 +140,4 @@ Vue.component('mediaFieldThumbsContainer', {
             return getClassNameForFilename(filename) + ' ' + thumbsize;
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/mediafield.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/mediafield.js
@@ -15,21 +15,22 @@ function initializeMediaField(el, modalBodyElement, mediaItemUrl, allowMultiple,
         document.getElementById("mediaApp").classList.add("d-none");
     });
 
-    mediaFieldApps.push(mediaFieldApp = new Vue({
-        el: mediaFieldEditor.get(0),
-        data: {
-            mediaItems: [],
-            selectedMedia: null,
-            smallThumbs: false,
-            idPrefix: idprefix,
-            initialized: false,
-            allowMediaText: allowMediaText,
-            backupMediaText: '',
-            allowAnchors: allowAnchors,
-            allowedExtensions: allowedExtensions,
-            backupAnchor: null,
-            mediaTextModal: null,
-            anchoringModal: null
+    const app = Vue.createApp({
+        data() {
+            return {
+                mediaItems: [],
+                selectedMedia: null,
+                smallThumbs: false,
+                idPrefix: idprefix,
+                initialized: false,
+                allowMediaText: allowMediaText,
+                backupMediaText: '',
+                allowAnchors: allowAnchors,
+                allowedExtensions: allowedExtensions,
+                backupAnchor: null,
+                mediaTextModal: null,
+                anchoringModal: null
+            };
         },
         created: function () {
             var self = this;
@@ -127,18 +128,6 @@ function initializeMediaField(el, modalBodyElement, mediaItemUrl, allowMultiple,
             var self = this;
 
             self.paths = initialPaths;
-
-            self.$on('selectAndDeleteMediaRequested', function (media) {
-                self.selectAndDeleteMedia(media);
-            });
-
-            self.$on('selectMediaRequested', function (media) {
-                self.selectMedia(media);
-            });
-
-            self.$on('filesUploaded', function (files) {
-                self.addMediaFiles(files);
-            });
         },
         methods: {
             selectMedia: function (media) {
@@ -291,5 +280,14 @@ function initializeMediaField(el, modalBodyElement, mediaItemUrl, allowMultiple,
                 localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
             }
         }
-    }));
+    });
+
+    // Register components
+    app.component('mediaFieldThumbsContainer', mediaFieldThumbsContainerComponent);
+    app.component('mediaFieldGalleryContainer', mediaFieldGalleryContainerComponent);
+    app.component('mediaFieldGalleryListItem', mediaFieldGalleryListItemComponent);
+    app.component('mediaFieldGalleryCardItem', mediaFieldGalleryCardItemComponent);
+
+    mediaFieldApp = app.mount(mediaFieldEditor.get(0));
+    mediaFieldApps.push(mediaFieldApp);
 }
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/Shared/uploadComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/Shared/uploadComponent.js
@@ -1,5 +1,5 @@
 // <upload> component
-Vue.component('upload', {
+var uploadComponent = {
     template: '\
         <div :class="{ \'upload-warning\' : model.errorMessage }" class="upload m-2 p-2 pt-0"> \
             <span v-if="model.errorMessage" v-on:click="dismissWarning()" class="close-warning"><i class="fa-solid fa-xmark" aria-hidden="true"></i> </span>\
@@ -54,4 +54,4 @@ Vue.component('upload', {
             bus.$emit('removalRequest', this.model);
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/Shared/uploadListComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/Shared/uploadListComponent.js
@@ -1,5 +1,5 @@
 // <upload-list> component
-Vue.component('uploadList', {
+var uploadListComponent = {
     template: '\
         <div class="upload-list" v-show="files.length > 0"> \
             <div class="header" @click="expanded = !expanded"> \
@@ -99,4 +99,4 @@ Vue.component('uploadList', {
             this.updateCount();
         }
     }
-});
+};
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/package.json b/src/OrchardCore.Modules/OrchardCore.Media/Assets/package.json
@@ -6,6 +6,6 @@
     "blueimp-file-upload": "10.32.0",
     "bootstrap": "5.3.8",
     "jquery": "3.7.1",
-    "vue": "2.6.14"
+    "vue": "3.5.13"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`// <folder> component`
`2`		`-Vue.component('folder', {`
	`2`	`+var folderComponent = {`
`3`	`3`	template: `
`4`	`4`	`<li :class="{selected: isSelected}"`
`5`	`5`	`v-on:dragleave.prevent = "handleDragLeave($event);"`
`@@ -190,4 +190,4 @@ Vue.component('folder', {`
`190`	`190`	`}`
`191`	`191`
`192`	`192`	`}`
`193`		`-});`
	`193`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`// <media-items-grid> component`
`2`		`-Vue.component('media-items-grid', {`
	`2`	`+var mediaItemsGridComponent = {`
`3`	`3`	template: `
`4`	`4`	`<ol class="row media-items-grid">`
`5`	`5`	`<li v-for="media in filteredMediaItems"`
`@@ -67,4 +67,4 @@ Vue.component('media-items-grid', {`
`67`	`67`	`return getClassNameForFilename(filename) + ' ' + thumbsize;`
`68`	`68`	`}`
`69`	`69`	`}`
`70`		`-});`
	`70`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`// <media-items-table> component`
`2`		`-Vue.component('media-items-table', {`
	`2`	`+var mediaItemsTableComponent = {`
`3`	`3`	template: `
`4`	`4`	`<table class="table media-items-table m-0">`
`5`	`5`	`<thead>`
`@@ -119,4 +119,4 @@ Vue.component('media-items-table', {`
`119`	`119`	`return getClassNameForFilename(filename) + ' ' + thumbsize;`
`120`	`120`	`}`
`121`	`121`	`}`
`122`		`-});`
	`122`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`// <sort-indicator> component`
`2`		`-Vue.component('sortIndicator', {`
	`2`	`+var sortIndicatorComponent = {`
`3`	`3`	template: `
`4`	`4`	`<div v-show="isActive" class="sort-indicator">`
`5`	`5`	`<span v-show="asc"><i class="small fa fa-chevron-up"></i></span>`
`@@ -16,4 +16,4 @@ Vue.component('sortIndicator', {`
`16`	`16`	`return this.colname.toLowerCase() == this.selectedcolname.toLowerCase();`
`17`	`17`	`}`
`18`	`18`	`}`
`19`		`-});`
	`19`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`// <media-field-thumbs-container> component`
`2`	`2`	`// different media field editors share this component to present the thumbs.`
`3`		`-Vue.component('mediaFieldThumbsContainer', {`
	`3`	`+var mediaFieldThumbsContainerComponent = {`
`4`	`4`	`template:`
`5`	`5`	`/* html */`
`6`	`6`	`
`@@ -140,4 +140,4 @@ Vue.component('mediaFieldThumbsContainer', {`
`140`	`140`	`return getClassNameForFilename(filename) + ' ' + thumbsize;`
`141`	`141`	`}`
`142`	`142`	`}`
`143`		`-});`
	`143`	`+};`