Vue3+Vite使用vue-final-modal报错：未导出$vfm

错误原因 #

你尝试直接从vue-final-modal导入$vfm，但$vfm并非该库的导出成员——它是插件通过app.use()注入到Vue应用实例的全局属性，直接import会触发导出不存在的错误。

修复步骤 #

1. 使用官方推荐的组合式API获取$vfm #

在<script setup>中，改用vue-final-modal提供的useVfm函数获取实例（推荐方式）：

<template>
  <div>
    <AppButton :text="'Submit'" @click="submit()" />
  </div>
</template>

<script setup lang="ts">
import AppButton from '../components/custom/buttons/AppButton.vue';
import HistoryDialog from '../components/dialogs/HistoryDialog.vue';
import { useVfm } from 'vue-final-modal'; // 导入useVfm组合式函数

const $vfm = useVfm(); // 获取vfm实例

const submit = () => {
  $vfm.show(
    { component: HistoryDialog }, 
    { type: 'Case' } // 注意：原代码末尾多了个多余的'd'，已删除
  );
};
</script>

2. 备选方案：通过getCurrentInstance获取全局属性 #

若不想使用useVfm，也可通过Vue的getCurrentInstance获取注入的全局属性：

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
// ...其他导入代码

const appContext = getCurrentInstance()?.appContext;
const $vfm = appContext?.config.globalProperties.$vfm;

const submit = () => {
  $vfm?.show(
    { component: HistoryDialog }, 
    { type: 'Case' }
  );
};
</script>

3. 额外修复：代码笔误 #

原组件代码中{ type : 'Case' }d末尾多了一个d，这会导致语法错误，必须删除。

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