First step

First, put ModalProvider on the root component or above the modal component

<!-- App.vue -->
<script setup lang="ts">
import { ModalProvider } from 'vue-modal-provider'
</script>

<template>
  <ModalProvider>
    <RouterView />
  </ModalProvider>
</template>
<!-- App.vue -->
<script setup lang="ts">
import { ModalProvider } from 'vue-modal-provider'
</script>

<template>
  <ModalProvider>
    <RouterView />
  </ModalProvider>
</template>

Base Use

First create a modal component and use useModalRef to manage the state

Then, pass the modal component you just created to useModal and show it with the show method returned by useModal

You can pass the value to the modal component through the show method, and then receive it in the args returned by useModalRef in the popup component

UseModalView.vue

BaseModal.vue

<script lang="ts" setup>
import { useModal } from 'vue-modal-provider'
import BaseModal from './BaseModal.vue'
const modal = useModal(BaseModal)
const modalValue = ref('')
const openModal = () => {
  // The passed props will be type-checked according to the modal’s props
  modal.show({ modalValue: modalValue.value })
}
</script>

<template>
  <input v-model="modalValue">
  <button
    @click="openModal"
  >
    open modal
  </button>
</template>
<script lang="ts" setup>
import { useModal } from 'vue-modal-provider'
import BaseModal from './BaseModal.vue'
const modal = useModal(BaseModal)
const modalValue = ref('')
const openModal = () => {
  // The passed props will be type-checked according to the modal’s props
  modal.show({ modalValue: modalValue.value })
}
</script>

<template>
  <input v-model="modalValue">
  <button
    @click="openModal"
  >
    open modal
  </button>
</template>

Modal result

Sometimes we may need to fill in a form or something in the modal, and how to communicate between the modal and the page is also a tedious thing. We can use promise to pass the result

ModalView.vue

PromiseModal.vue

<script lang="ts" setup>
import { useModal } from "vue-modal-provider";
import BaseModal from "./BaseModal.vue";
const modal = useModal(BaseModal);
const modalValue = ref("");
const openModal = () => {
  modal.show({ modalValue }).then((res) => {
    modalValue = res.value;
  });
};
</script>

<template>
  <input v-model="modalValue" />
  <button @click="openModal">open modal</button>
</template>
<script lang="ts" setup>
import { useModal } from "vue-modal-provider";
import BaseModal from "./BaseModal.vue";
const modal = useModal(BaseModal);
const modalValue = ref("");
const openModal = () => {
  modal.show({ modalValue }).then((res) => {
    modalValue = res.value;
  });
};
</script>

<template>
  <input v-model="modalValue" />
  <button @click="openModal">open modal</button>
</template>

Real Case

Use element-plus

ModalView.vue

ElementModal.vue

<script lang="ts" setup>
import { useModal } from 'vue-modal-provider'
import ElementModal from './ElementModal.vue'

const elModal = useModal(ElementModal)
const openModal = () => {
  elModal.show().then((res) => {
    alert(JSON.stringify(res))
  })
}
</script>

<template>
  <el-button @click="openModal">
    open modal
  </el-button>
</template>
<script lang="ts" setup>
import { useModal } from 'vue-modal-provider'
import ElementModal from './ElementModal.vue'

const elModal = useModal(ElementModal)
const openModal = () => {
  elModal.show().then((res) => {
    alert(JSON.stringify(res))
  })
}
</script>

<template>
  <el-button @click="openModal">
    open modal
  </el-button>
</template>