Dans l'un de mes projets Vue 2, j'ai utilisé la bibliothèque vue-js-modal. Cependant, après avoir migré le projet de Vue 2 vers Vue 3, le modal n'a pas fonctionné correctement. Malgré des recherches approfondies, je n'ai trouvé aucune documentation ou discussion traitant de ce problème, ce qui m'a amené à écrire cet article.

Dans cet article, je partagerai les modifications que j'ai apportées pour adapter vue-js-modal pour Vue 3. J'espère que ces informations vous seront utiles !

Tout d'abord, veuillez consulter le fil de discussion GitHub et appliquer les modifications suggérées ici : https://github.com/euvl/vue-js-modal/issues/814

Après avoir suivi les suggestions du fil de discussion GitHub, vous pourriez toujours rencontrer des problèmes avec le modal dans votre projet Vue 3. Pour résoudre complètement ces problèmes, j'ai apporté plusieurs modifications aux fichiers PluginCore.js et Plugin.js. Ci-dessous, vous trouverez le détail de ces modifications.

Modifications dans Plugin.js
Modifier le plugin :

import Modal from './components/Modal.vue';
import Dialog from './components/Dialog.vue';
import PluginCore from './PluginCore';

const Plugin = {
    install(app, options = {}) {
        if (app.config.globalProperties.$modal) {
            return;
        }

        const plugin = PluginCore(options);

        app.config.globalProperties.$modal = plugin;
        app.provide('$modal', plugin);

        app.mixin({
            mounted() {
                if (this.$root === this) {
                    if (!plugin.context.root) {
                        plugin.setDynamicModalContainer(this);
                    }
                }
            },
        });

        app.component(plugin.context.componentName, Modal);

        if (options.dialog) {
            app.component('Dialog', Dialog);
        }
    },
};

export default Plugin;

Modifications dans PluginCore.js
Importations et initialisation :

Remplacez les importations et l'initialisation existantes par ce qui suit :

import { h, render, createVNode } from 'vue';

Afficher le modal dynamique :

Mettre à jour la logique d'affichage des modaux dynamiques :

const showDynamicModal = (
    component,
    componentProps,
    componentSlots,
    modalProps = componentSlots || {},
    modalEvents
) => {
    const container = context.root?.__modalContainer;
    const defaults = options.dynamicDefaults || {};

    if (!container) {
        console.warn('Modal container not found. Make sure the dynamic modal container is set.');
        return;
    }
    container.add(
        component,
        componentProps,
        componentSlots,
        { ...defaults, ...modalProps },
        modalEvents
    );
};

Définir un conteneur modal dynamique :

Modifier la fonction responsable de la définition du conteneur modal :

const setDynamicModalContainer = (root) => {
    context.root = root;

    if (!root) {
        console.warn('Root component is undefined. Make sure the root instance is passed correctly.');
        return;
    }

    const element = createDivInBody();

    const vnode = createVNode(ModalsContainer);
    vnode.appContext = root.$.appContext;

    try {
        return render(vnode, element);
    } catch (error) {
        console.error('Error rendering vnode:', error);
    }
};

Modifications finales dans ModalsContainer.vue
Dans le cadre de la migration vers Vue 3, il a été nécessaire de procéder à un ajustement spécifique dans le composant ModalsContainer.vue.

Mise à jour des écouteurs d'événements :

Dans le fichier ModalsContainer.vue, supprimez la directive v-on="$listeners" existante et remplacez-la par :

v-on="modal.componentListeners" || {}

Cette modification doit être effectuée à la ligne numéro 13.

En effectuant ces ajustements, vous devriez pouvoir migrer avec succès la bibliothèque vue-js-modal pour fonctionner de manière transparente avec Vue 3. J'espère que ces étapes vous aideront à résoudre tous les problèmes restants avec vos modaux ! Si vous avez besoin d'aide supplémentaire, n'hésitez pas à demander dans la section commentaires. De plus, j'apprécierais vos commentaires ou idées, alors n'hésitez pas à laisser vos commentaires ci-dessous

https://www.aliozzaim.com

références
https://github.com/euvl/vue-js-modal/issues/814
https://github.com/euvl/vue-js-modal