En uno de mis proyectos de Vue 2, utilicé la biblioteca vue-js-modal. Sin embargo, después de migrar el proyecto de Vue 2 a Vue 3, el modal no funcionó correctamente. A pesar de una extensa investigación, no pude encontrar ninguna documentación o discusión que abordara este tema, lo que me llevó a escribir este artículo.

En este artículo, compartiré los cambios que hice para adaptar vue-js-modal para Vue 3. ¡Espero que estas ideas te resulten útiles!

Primero, revise el hilo de GitHub y aplique los cambios sugeridos aquí: https://github.com/euvl/vue-js-modal/issues/814

Después de seguir las sugerencias del hilo de GitHub, es posible que aún encuentres problemas con el modal en tu proyecto de Vue 3. Para resolver completamente estos problemas, realicé varios cambios en los archivos PluginCore.js y Plugin.js. A continuación encontrarás los detalles de estos cambios.

Cambios en Plugin.js
Modificar el complemento:

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;

Cambios en PluginCore.js
Importaciones e inicialización:

Reemplace las importaciones e inicialización existentes con lo siguiente:

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

Mostrar modal dinámico:

Actualiza la lógica para mostrar modales dinámicos:

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
    );
};

Establecer contenedor modal dinámico:

Modificar la función responsable de configurar el contenedor 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);
    }
};

Cambios finales en ModalsContainer.vue
Como parte de la migración a Vue 3, fue necesario realizar un ajuste específico en el componente ModalsContainer.vue.

Actualización de oyentes de eventos:

En el archivo ModalsContainer.vue, elimine la directiva v-on="$listeners" existente y reemplácela con:

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

Este cambio debe realizarse en la línea número 13.

Al realizar estos ajustes, deberías poder migrar exitosamente la biblioteca vue-js-modal para que funcione sin problemas con Vue 3. ¡Espero que estos pasos te ayuden a resolver cualquier problema restante con tus modales! Si necesita más ayuda, no dude en preguntar en la sección de comentarios. Además, agradecería cualquier comentario o idea que tenga, así que no dude en dejar sus comentarios a continuación

https://www.aliozzaim.com

referencias
https://github.com/euvl/vue-js-modal/issues/814
https://github.com/euvl/vue-js-modal