動態 modal $vfm.show 的 component 參數帶入 "字串" 沒有作用

[johnson0903]

Version

vue-final-modal: 3.4.11 vue: 3.2.45

OS

Windows

Steps to reproduce

1. npm init vue@latest 建立 vue
2. npm install vue-final-modal@3
3. 按照 API 文件的動態 modal 基本範例，建立 VDynamicModal 及相關程式
4. 呼叫 $vfm.show({component: 'VDynamicModal'})

What is Expected?

modals-container 中應該產生對應的 vfm HMTL DOM

What is actually happening?

modals-container 中只出現 <vdynamicmodal modelvalue="true"></vdynamicmodal>

測試發現若 component 參數帶入Vue Component 物件而非字串格式可正常運作，如下

import VDynamicModal from './components/VDynamicModal.vue'
$vfm.show({
    component: VDynamicModal
});

另外，中英文文件中 動態 modal 最上方的文件內容不同 中文：

import { $vfm } from 'vue-final-modal'
$vfm.show({ component: 'MyDynamicModal' })

英文：

import { $vfm } from 'vue-final-modal'
$vfm.show({ component: MyDynamicModal })

[sergor5]

@johnson0903 If you really need this to work for you right now, defining the component globally worked for me. I did it in Nuxt 3, like:

components: [
    {
        path: '~/components/',
    },
    {
        global: true,
        path: '~/views/',
        prefix: 'View',
    },
],

So after this I could open the modal by string as:

 $vfm.show({
      component: 'ViewCustomModal',
});

I guess you could achieve the same in a Vue 3 app by:

import { createApp } from "vue";
import CustomModalfrom "./components/CustomModal";
import App from "./App.vue";

const app = createApp(App);

App.component('CustomModal', CustomModal); // global registration - can be used anywhere

app.mount("#app");