Resolve "Vue-Komponenten UserAvatar und UserAvatarDropdown als globale Komponenten registrieren"

Closes #5924

Merge request studip/studip!4526

2 files changed, 18 insertions, 14 deletions

diff --git a/resources/assets/javascripts/bootstrap/forms.js b/resources/assets/javascripts/bootstrap/forms.js
index dc57674..d22b15a 100644
--- a/resources/assets/javascripts/bootstrap/forms.js
+++ b/resources/assets/javascripts/bootstrap/forms.js
@@ -435,20 +435,6 @@ STUDIP.ready(function () {
         });
     }
 
-    /*
-     * Form elements with the "simplevue" class are meant for forms that just need some vue components
-     * to do something fancy inside the form but which do not need the full functionality of the form builder.
-     */
-    let simple_vue_items = document.querySelectorAll('form .simplevue:not(.vueified)');
-    if (simple_vue_items.length > 0) {
-        STUDIP.Vue.load().then(({createApp}) => {
-            simple_vue_items.forEach(f => {
-                f.classList.add('vueified');
-                createApp().mount(f);
-            });
-        });
-    }
-
     // Well, this is really nasty: Select2 can't determine the select
     // element's width if it is hidden (by itself or by its parent).
     // This is due to the fact that elements are not rendered when hidden
diff --git a/resources/assets/javascripts/bootstrap/use-vue-components.js b/resources/assets/javascripts/bootstrap/use-vue-components.js
new file mode 100644
index 0000000..e262899
--- /dev/null
+++ b/resources/assets/javascripts/bootstrap/use-vue-components.js
@@ -0,0 +1,18 @@
+STUDIP.ready(function () {
+    const selectors = [
+        '.use-vue-components',
+        'form .simplevue'
+    ];
+    const selector = selectors.map(selector => `${selector}:not(.vueified)`).join(',');
+
+    const containers = document.querySelectorAll(selector);
+
+    if (containers.length > 0) {
+        STUDIP.Vue.load().then(({ createApp }) => {
+            containers.forEach(container => {
+                container.classList.add('vueified');
+                createApp().mount(container)
+            });
+        });
+    }
+});