Vue3 Simple Confirm

Read this in other languages:

简体中文

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

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

npm i simple-confirm-vue3

or

yarn add simple-confirm-vue3

import css file in main.ts

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

Basic Usage

Components style

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

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

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

Using

<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

<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

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 |