V3confirm NPM | npm.io

v3confirm

A plugin dedicated for vue3 to show confirm dialog modal. Currently the plugin works only with composition api.

Installation

The plugin can be installed by npm or yarn.

NPM

npm install v3confirm --save

Yarn

yarn add v3confirm

Usage

import { createApp } from 'vue'
import VueConfirmPlugin from 'v3confirm'
import App from '@/App.vue'

const app = createApp(App)
app.use(VueConfirmPlugin, {
  root: '#confirm',
  yesText: 'Yes',
  noText: 'No',
})
app.mount('#app')

Then in component with composition api:

<template>
  <button @click="deleteAllUsers">
  <button @click="deleteAllUsersWithAsync">
</template>
<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    setup: () => {
      const deleteAllUsers = () => {
        confirm.show('Are you sure?').then((ok) => {
          if (ok) {
            alert('All users deleted')
          } else {
            alert('Users not deleted')
          }
        })
      }

      const deleteAllUsersWithAsync = async () => {
        const ok = await confirm.show('Are you sure?')

        if (ok) {
          alert('All users deleted')
        } else {
          alert('Users not deleted')
        }
      }

      return {
        deleteAllUsers,
        deleteAllUsersWithAsync,
      }
    },
  })
</script>