Awesome

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')

Remember to have a html handler somewhere with id provided in root option. For example in App.vue:

<template>
  <div id="confirm"></div>
</template>

Then in component with composition api:

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

  export default defineComponent({
    setup: () => {
      const confirm = useConfirm()

      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>

Options

root

Type: string

Default: none

An HTML element where confirm dialog is attached. It should be empty.

yesText

Type string

Default: 'yes'

A text used for confirm button.

noText

Type string

Default: 'no'

A text used for decline button.

Styles

This project is using bulma.io styles. If your project is not using bulma, then you can style confirm for your own or import bulma modal.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/components/modal.sass"