does not provide an export named '$vfm'

[georginklv]

I am using Vue3, composition API with vite.
In main.ts am setting vue final modal like this

import { vfmPlugin } from 'vue-final-modal';
import './scss/main.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

createApp(App)
  .use(vfmPlugin({
    key: '$vfm',
    componentName: 'VueFinalModal',
    dynamicContainerName: 'ModalsContainer'
  }))

and when i want to call the the modal from the component and i get this error which is says that $vfm is not provide in the modules

  <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 { $vfm } from 'vue-final-modal' 

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

Also i added import { ModalsContainer } from 'vue-final-modal' in App.vue

[georginklv]

https://stackoverflow.com/a/76170969/10607669 This solved my problem

[hunterliu1003]

Duplicate with #404