Em um dos meus projetos Vue 2, utilizei a biblioteca vue-js-modal. Porém, após migrar o projeto do Vue 2 para o Vue 3, o modal não funcionou corretamente. Apesar da extensa pesquisa, não consegui encontrar nenhuma documentação ou discussão abordando esse assunto, o que me levou a escrever este artigo.

Neste artigo, compartilharei as mudanças que fiz para adaptar o vue-js-modal para o Vue 3. Espero que esses insights sejam úteis para você!

Primeiro, revise o tópico do GitHub e aplique as alterações sugeridas aqui: https://github.com/euvl/vue-js-modal/issues/814

Depois de seguir as sugestões do tópico do GitHub, você ainda poderá encontrar problemas com o modal em seu projeto Vue 3. Para resolver totalmente esses problemas, fiz várias alterações nos arquivos PluginCore.js e Plugin.js. Abaixo, você encontrará os detalhes dessas alterações.

Mudanças em Plugin.js
Modifique o 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;

Alterações em PluginCore.js
Importações e inicialização:

Substitua as importações e inicialização existentes pelo seguinte:

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

Mostrar modal dinâmico:

Atualize a lógica para mostrar modais 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
    );
};

Definir contêiner modal dinâmico:

Modifique a função responsável por definir o contêiner 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);
    }
};

Alterações finais em ModalsContainer.vue
Como parte da migração para o Vue 3, foi necessário realizar um ajuste específico no componente ModalsContainer.vue.

Atualizando ouvintes de eventos:

No arquivo ModalsContainer.vue, remova a diretiva v-on="$listeners" existente e substitua-a por:

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

Esta alteração deve ser feita na linha número 13.

Ao fazer esses ajustes, você poderá migrar com sucesso a biblioteca vue-js-modal para funcionar perfeitamente com o Vue 3. Espero que essas etapas ajudem você a resolver quaisquer problemas restantes com seus modais! Se precisar de mais ajuda, não hesite em perguntar na seção de comentários. Além disso, eu apreciaria qualquer feedback ou informação que você tenha, então fique à vontade para deixar seus comentários abaixo

https://www.aliozzaim.com

referências
https://github.com/euvl/vue-js-modal/issues/814
https://github.com/euvl/vue-js-modal