[Fix] Les composants Vue sont aussi chargés à l'intérieur de HTML renvoyé en Ajax

CHANGELOG.md

 CHANGELOG
 =========
 
+6.2.6 (07/01/2025)
+------------------
+
+- [Fix] Les composants Vue sont aussi chargés à l'intérieur de HTML renvoyé en Ajax
+
+
 6.2.5 (19/09/2024)
 ------------------
 

js/Client/main.js

 import {createApp} from 'vue';
 import {createBootstrap} from 'bootstrap-vue-next';
-
-// on met en place le client d'UnicaenVue
 import unicaenVue from './unicaenVue';
 
 function init(vues, options)
 {
-    const components = {}
+    const components = {};
 
     if (undefined === options) {
         options = {};
     }
 
+    // Convertir les chemins des composants en noms de composants
     for (const path in vues) {
         let compPath = path.slice(2, -4);
         let compName = compPath.replaceAll('/', '');
-
         components[compName] = vues[path].default;
     }
 
-    // instantiate the Vue apps
-    // Note our lookup is a wrapping div with .vue-app class
-    for (const el of document.getElementsByClassName('vue-app')) {
+    // Fonction pour initialiser une application Vue sur un élément
+    function mountVueApp(el)
+    {
         let app = createApp({
             template: el.innerHTML,
             components: components
@@ -31,24 +29,48 @@ function init(vues, options)
             options.beforeMount(app);
         }
 
-        //autoload de tous les composants déclarés
+        // Autoload des composants déclarés
         if (undefined !== options.autoloads) {
-
             for (const alias in options.autoloads) {
                 let compName = options.autoloads[alias].replaceAll('/', '');
                 app.component(alias, components[compName]);
             }
         }
 
-        app.use(createBootstrap({components: true, directives: true}))
+        app.use(createBootstrap({components: true, directives: true}));
         app.mount(el);
 
         if (undefined !== options.afterMount) {
             options.afterMount(app);
         }
     }
+
+    // Initialiser les applications Vue sur les éléments existants
+    for (const el of document.getElementsByClassName('vue-app')) {
+        mountVueApp(el);
+    }
+
+    // Observer les changements du DOM pour détecter les nouveaux éléments chargés en AJAX
+    const observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+                // Vérifier si de nouveaux éléments avec la classe .vue-app ont été ajoutés
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('vue-app')) {
+                        mountVueApp(node);
+                    }
+                }
+            }
+        }
+    });
+
+    // Démarrer l'observation du DOM
+    observer.observe(document.body, {
+        childList: true, // Observer les ajouts/suppressions d'enfants
+        subtree: true,   // Observer tout le sous-arbre du DOM
+    });
 }
 
 export default {
     init
-}
\ No newline at end of file
+};
\ No newline at end of file