Dialogs

A simple style useful dialog component collection for Vue3

Repository status

Detailed changes for each release are documented in Changelog

If you are using vue 2.x version, please use v-dialogs 2.x version instead

Installation

Install v-dialogs component in to your project

npm

npm i v-dialogs

yarn

yarn add v-dialogs

pnpm

pnpm add v-dialogs

Application scenario

• Alert Interactive dialog boxes, for notifications that require explicit feedback from the user
• Modal Modal container dialog, It is displayed at the center of the screen
• Drawer Another modal container dialog, It is displayed at the edge of the screen, and it is the better choice for quickly viewing details
• Message Silent message notification, displayed in the vertical center area of ​​the screen
• Toast Silent message notification, displayed in the corner of the screen
• Mask A screen mask that blocks user actions

Built-in language

Language built into the component

Language	Language code
Chinese	cn
English	en
Portuguese	pt
Japanese	jp
Turkish	tr

Globally instance

v-dialogs also provides a globally instance to open dialogs, you can use it in any component

The default instance name is $dlg

import { createApp } from 'vue'
import dialogs from 'v-dialogs'
import App from 'App.vue'

createApp(App).use(dialogs).mount('#app')

The global instance are only supported as a feature and are not recommended for use

Option API

export default {
  mounted () {
    this.$dlg.message('Saved successfully!')
  }
}

Composition API

import { getCurrentInstance } from 'vue'

// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg
const $dlg = getCurrentInstance().proxy.$dlg

$dlg.message('Saved successfully!')

Modules

• Alert
• Modal
• Drawer
• Message
• Toast
• Mask