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: 2 months 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 (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-20T15:56:03.000Z (over 3 years ago)
- Last Synced: 2025-09-06T12:22:45.746Z (3 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
Awesome Lists containing this project
- awesome-vue - v3confirm - A plugin dedicated for vue3 to show confirm dialog modal ` 📝 a month ago` (UI Components [🔝](#readme))
- awesome-vue - v3confirm - A plugin dedicated for vue3 to show confirm dialog modal. (Components & Libraries / UI Components)
README
# v3confirm
[](https://codecov.io/gh/malekim/v3confirm)
[](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"
```