# simple-confirm-vue3

> *_**Read this in other languages:**_*

Latest version **1.0.5** (published 2022-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-confirm-vue3
pnpm add simple-confirm-vue3
yarn add simple-confirm-vue3
bun add simple-confirm-vue3
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-08-30 |
| First published | 2022-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | swaggyplin |
| Keywords | confirm, vue3, simple, dialog, prompt, vue |

## Links

- npm: https://www.npmjs.com/package/simple-confirm-vue3
- Repository: https://github.com/swaggyp7/simple-confirm-vue3
- npm.io page: https://npm.io/package/simple-confirm-vue3

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.37

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2022-08-30
- 1.0.4 — 2022-08-30
- 1.0.3 — 2022-08-30
- 1.0.2 — 2022-08-30
- 1.0.1 — 2022-08-30
- 1.0.0 — 2022-08-30

## README

# Vue3 Simple Confirm

*_**Read this in other languages:**_*

[_简体中文_](README.zh-CN.md)

Simple confirm dialog for Vue 3, for people who want to use confirm dialog without any UI framework to create some simple web pages

## ![demo](./demo.gif)

## Features

- Component-style supported
- Composition-style supported
- Typescript supported
- Promise based API.

## Sizes

| File                        | Size                      |
| --------------------------- | ------------------------- |
| style.css                   | 0.76 KiB / gzip: 0.38 KiB |
| simple-confirm-vue3.umd.cjs | 1.76 KiB / gzip: 0.81 KiB |
| simple-confirm-vue3.js      | 1.78 KiB / gzip: 0.72 KiB |

## Installation

```bash
npm i simple-confirm-vue3
```

or

```bash
yarn add simple-confirm-vue3
```

import css file in main.ts

```typescript
import "simple-confirm-vue3/lib/style.css";
```

## Basic Usage

### Components style

#### Import global (component name always be "vue-confirm" while you import in global)

```typescript
import { createApp } from "vue";
import "simple-confirm-vue3/lib/style.css";
import SimpleConfirm from "simple-confirm-vue3";

createApp(App).use(SimpleConfirm).mount("#app");
```

##### Using

```vue
<script setup>
import { ref } from "vue";
const showDialog = ref(false);
</script>

<template>
  <vue-confirm
    title="Component Style"
    content="A ham sandwich walks into a bar and orders a beer, bartender says
          “sorry, we don’t serve food here.”"
    v-model="showDialog"
    :rounded="true"
    confirmText="Okay"
    cancelText="Nope"
  >
  </vue-confirm>
</template>
```

#### Import in single component

```vue
<script setup>
import { Confirm as myConfirm } from "simple-confirm-vue3";
import { ref } from "vue";

const showDialog = ref(false);
</script>

<template>
  <my-confirm
    title="Component Style"
    content="A ham sandwich walks into a bar and orders a beer, bartender says
          “sorry, we don’t serve food here.”"
    v-model="showDialog"
    :rounded="true"
    confirmText="Okay"
    cancelText="Nope"
  ></my-confirm>
</template>
```

### Composition Style

```typescript
import { useConfirm } from "simple-confirm-vue3";

useConfirm({
  /* options */
})
  .then(() => {
    // do something when user confirmed
  })
  .catch(() => {
    // do something when user canceled
  });
```

## Properties

|    Name     |   Type   |            Description             |
| :---------: | :------: | :--------------------------------: |
|    title    | string?  |                 -                  |
|   content   |  string  |                 -                  |
| modelValue  | boolean  |       for component v-model        |
|   rounded   | boolean? |         is border rounded          |
|    cross    | boolean? | is show close button on top-right  |
| cancelText  | string?  |         cancel button text         |
| confirmText | string?  |        confirm button text         |
| customClass | string?  | **_custom class can't be scoped_** |

---
_Source: https://npm.io/package/simple-confirm-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._