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

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)

------------------

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

            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