Unoverlay-vue NPM

vue-overlays

Oh, this image is from vuejs-overlay, but he's really cool and I'm lazy so I stole it (sorry)
中文 | English or see github.io/unoverlay-vue

A universal overlay (popup) Vue2/Vue3 utils

it can achieve:

Make Message or Dialog similar to element-plus / naiveui / vuetifyjs / vant...
Supports two calling methods at the same time (template or js/ts)
Integrate and customize functions using existing component libraries (such as element-plus)

⚙️ Install

pnpm add unoverlay-vue
# Or Yarn
yarn add unoverlay-vue

Global installation makes all overlay inherit the app context

// main.js
import { createApp } from 'vue-demi'
import unoverlay from 'unoverlay-vue'
import App from './App.vue'

const app = createApp(App)
app.use(unoverlay)
app.mount('#app')

📖 Usage(Basic)

define overlay component

<!-- overlay.vue -->
<script setup>
import { defineEmits, defineProps } from 'vue-demi'
import { useOverlayMeta } from 'unoverlay-vue'
const props = defineProps({
  title: String,
  // If you want to use it as a component in template,
  // you need to define visible in props
  visible: Boolean
})

// Define the events used in the component(optional)
// This allows you to use hints in components
defineEmits(['cancel', 'confirm'])

// Get Overlay information from useOverlayMeta
const { visible, confirm, cancel } = useOverlayMeta({
  // Animation duration to avoid premature destruction of components
  // Only use component in template and no need to define
  animation: 1000
})
</script>

<template>
  <div v-if="visible" @click="confirm(`${title}:confirmed`)">
    {{ title }}
  </div>
</template>

Create a callback, call it in Javascript/Typescript

import { createOverlay } from 'unoverlay-vue'
import OverlayComponent from './overlay.vue'

// Convert to imperative overlay
const callback = createOverlay(OverlayComponent)
// Call the component and get the value of confirm
const value = await callback({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"

or use in setup

import { renderOverlay } from 'unoverlay-vue'
import OverlayComponent from './overlay.vue'

const value = await renderOverlay(OverlayComponent, {
  props: { title: 'useOverlay' }
})
// value === "useOverlay:confirmed"

or use in component

<!-- overlay.vue -->
<script setup>
import OverlayComponent from './overlay.vue'
const visible = ref(false)

const confirm = () => {
  // ...
}
const cancel = () => {
  // ...
}
</script>

<template>
  <overlay-component
    v-model:visible="visible"
    @confirm="confirm"
    @cancel="cancel"
  />
</template>

You can use your imagination boldly!

If you want to know more advanced features, you can check the detailed document of unoverlay-vue