malekim/v3confirm

# v3confirm

codecovopen in new windowsemantic-releaseopen in new window

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
1

# Yarn

yarn add v3confirm
1

# 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')
1
2
3
4
5
6
7
8
9
10
11

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

<template>
  <div id="confirm"></div>
</template>
1
2
3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 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 importopen in new window bulma modal.

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