Vue 2 프로젝트 중 하나에서 vue-js-modal 라이브러리를 활용했습니다. 그런데 프로젝트를 Vue 2에서 Vue 3으로 마이그레이션한 후 모달이 제대로 작동하지 않았습니다. 광범위한 조사에도 불구하고 이 문제를 다루는 문서나 토론을 찾을 수 없어서 이 기사를 작성하게 되었습니다.

이 글에서는 Vue 3에 vue-js-modal을 적용하기 위해 변경한 내용을 공유하겠습니다. 이러한 통찰력이 도움이 되기를 바랍니다!

먼저 GitHub 스레드를 검토하고 여기에 제안된 변경 사항을 적용하세요: https://github.com/euvl/vue-js-modal/issues/814

GitHub 스레드의 제안을 따른 후에도 Vue 3 프로젝트의 모달 관련 문제가 계속 발생할 수 있습니다. 이러한 문제를 완전히 해결하기 위해 PluginCore.js 및 Plugin.js 파일을 몇 가지 변경했습니다. 아래에서 이러한 변경 사항에 대한 세부정보를 확인할 수 있습니다.

Plugin.js의 변경 사항
플러그인 수정:

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;

PluginCore.js의 변경 사항
가져오기 및 초기화:

기존 가져오기 및 초기화를 다음으로 바꿉니다.

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

동적 모달 표시:

동적 모달 표시 논리 업데이트:

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

동적 모달 컨테이너 설정:

모달 컨테이너 설정을 담당하는 함수를 수정합니다.

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

ModalsContainer.vue의 최종 변경 사항
Vue 3으로 마이그레이션하는 과정에서 ModalsContainer.vue 구성 요소를 구체적으로 조정해야 했습니다.

이벤트 리스너 업데이트:

ModalsContainer.vue 파일에서 기존 v-on="$listeners" 지시문을 제거하고 다음으로 바꿉니다.

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

이 변경은 13번 줄에서 이루어져야 합니다.

이러한 조정을 통해 vue-js-modal 라이브러리를 성공적으로 마이그레이션하여 Vue 3과 원활하게 작동할 수 있어야 합니다. 이 단계가 모달과 관련된 남은 문제를 해결하는 데 도움이 되기를 바랍니다! 추가 도움이 필요하면 주저하지 말고 댓글 섹션에 문의하세요. 또한 귀하의 의견이나 통찰력에 감사드립니다. 아래에 의견을 남겨주세요.

https://www.aliozzaim.com

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