Vue3+TS Vitesse-lite项目集成Vue Final Modal报Invalid VNode无法弹框

问题原因 #

你遇到的Invalid VNode错误是Vue在渲染过程中无法识别对应组件导致的，共有三个核心错误点，按以下步骤修复即可： #

修复方案 #

1. 修正main.ts中插件注册顺序
   app.mount()必须放在所有app.use()调用之后，否则Vue Final Modal插件注册的全局配置不会生效，修改后代码：

// register vue composition api globally
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages'
import App from './App.vue'
import VueFinalModal from 'vue-final-modal'

// windicss layers
import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import './styles/main.css'
import 'virtual:windi-utilities.css'

const app = createApp(App)
const router = createRouter({
  history: createWebHistory(),
  routes,
})
app.use(router)
app.use(VueFinalModal)
app.mount('#app')

2. 补全缺失的图标组件导入
   你代码中使用的<mdi-close>没有注册，是触发VNode错误的直接原因，按以下方式修复：
   先安装图标依赖：

npm i @iconify/vue @iconify-json/mdi

修改VTailwindModal.vue的script部分：

import { defineComponent } from 'vue'
import VueFinalModal from 'vue-final-modal'
import { Icon } from '@iconify/vue'

export default defineComponent({
    components: {
        VueFinalModal,
        Icon
    },
    inheritAttrs: false,
    emits: ['cancel', 'confirm', 'update:modelValue']
})

将模板中的<mdi-close></mdi-close>替换为：

<Icon icon="mdi:close" />

3. 在Modal.vue中注册自定义模态框组件
   你在Modal.vue中直接使用<VTailwindModal>但未导入注册，修改Modal.vue的script部分：

import { defineComponent } from 'vue';
import VTailwindModal from './VTailwindModal.vue'
export default defineComponent({
    components: { VTailwindModal },
    data (): { show: boolean; todos: { text: string; }[]; } {
        return {
            show: false,
            todos: [
                { text: "Learn Typescript" },
            ],
        };
    },
});

完成以上修改后重新运行项目即可正常触发模态框。

内容的提问来源于stack exchange，提问作者user2460448