https://github.com/malekim/v3confirm

A plugin dedicated for vue3 to show confirm dialog modal
https://github.com/malekim/v3confirm

composition-api confirm-dialog modal vue vue3

Last synced: about 1 month ago
JSON representation

A plugin dedicated for vue3 to show confirm dialog modal

• Host: GitHub
• URL: https://github.com/malekim/v3confirm
• Owner: malekim
• License: mit
• Created: 2021-05-27T12:58:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-20T15:56:03.000Z (about 2 years ago)
• Last Synced: 2024-01-24T06:46:53.267Z (4 months ago)
• Topics: composition-api, confirm-dialog, modal, vue, vue3
• Language: TypeScript
• Homepage: https://malekim.github.io/v3confirm/
• Size: 237 KB
• Stars: 4
• Watchers: 2
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - v3confirm - A plugin dedicated for vue3 to show confirm dialog modal. (Components & Libraries / UI Components)
• awesome-vue - v3confirm - A plugin dedicated for vue3 to show confirm dialog modal. (Components & Libraries / UI Components)
• awesome-vue - v3confirm - A plugin dedicated for vue3 to show confirm dialog modal. (Components & Libraries / UI Components)

README

        
# v3confirm

[![codecov](https://codecov.io/gh/malekim/v3confirm/branch/main/graph/badge.svg?token=CFUBKUJKVB)](https://codecov.io/gh/malekim/v3confirm)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

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

```bash

npm install v3confirm --save

```

### Yarn

```bash

yarn add v3confirm

```

## Usage

```javascript

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:

```html

  


```

Then in component with composition api:

```html

  

  

  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,

      }

    },

  })

```

## 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](https://bulma.io/documentation/overview/modular/) bulma modal. 

```scss

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

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

```