@gn5r/vue-confirm

Confirm components for Vue.js projects
6,730 1
vue confirm
Install
npm install @gn5r/vue-confirm
Latest Version:4.1.6
Vue:3
Older releases:2
License:MIT
Last Updated:Oct 11, 2026
Links: GitHub  ·  npm
Maintainer: gn5r

Vue Confirm Component

downloads latest stable

next beta legacy

license npm type definitions

GitHub Workflow Status

日本語版 README はこちら

Dependencies version

vue version @mdi/js version

Playground

Playground | Vue Confirm

Version matrix

Vue.js version Package version Type definition Branch
2.x 1.x No 1.x
2.x 2.x Yes 2.x
3.x 3.x Yes 3.x
3.x 4.x Yes main

Installation

npm tag martix

Package version tag Volar support EOL
1.x - - ○
2.x legacy - ○
3.x stable Yes ×
4.x latest Yes ×
*-beta beta - -
*-next next - -

commands

npm
npm i @gn5r/vue-confirm
yarn
yarn add @gn5r/vue-confirm

Usage

Using Vue.use

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
// Importing Plugin Function and css
import { createVConfirm } from "@gn5r/vue-confirm";
import "@gn5r/vue-confirm/styles";

const app = createApp(App);
const vconfirm = createVConfirm();
app.use(vconfirm).mount("#app");

<!-- SampleComponent.vue -->
<template>
  <button type="button" @click="show">show</button>
  <v-confirm
    v-model="config.dialog"
    :title="config.title"
    :message="config.message"
    :btns="config.btns"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { VConfirmBtn } from "@gn5r/vue-confirm";

export default defineComponent({
  name: "sample-component",
  setup() {
    const config = ref({
      dialog: false,
      title: "title",
      message: "message!",
      btns: [] as VConfirmBtn[],
    });

    function show() {
      config.value.btns = [
        {
          text: "OK",
          onClick: () => (config.value.dialog = false),
        },
      ];
      config.value.dialog = true;
    }

    return {
      config,
      show,
    };
  },
});
</script>

Not using Vue.use

<!-- SampleComponent.vue -->
<template>
  <button type="button" @click="show">show</button>
  <v-confirm
    v-model="config.dialog"
    :title="config.title"
    :message="config.message"
    :btns="config.btns"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import VConfirm, { VConfirmBtn } from "@gn5r/vue-confirm";

export default defineComponent({
  name: "sample-component",
  setup() {
    const config = ref({
      dialog: false,
      title: "title",
      message: "message!",
      btns: [] as VConfirmBtn[],
    });

    function show() {
      config.value.btns = [
        {
          text: "OK",
          onClick: () => (config.value.dialog = false),
        },
      ];
      config.value.dialog = true;
    }

    return {
      config,
      show,
    };
  },
  components: {
    VConfirm,
  },
});
</script>

Confirm component props

props description type default
btn-align justify-content css property.
Available options are start,cenetr,end,space-between,space-around.		 Alignment(string) end
btns Action buttons VConfirmBtn[] []
closable show / hide flag of close icon to dialog boolean false
dark Enable dark theme boolean false
hide-header hidden default header boolean false
message Message text string undefined
modelValue show / hide flag of dialog boolean false
no-actions-divider show / hide flag of between message and actions divider boolean false
persistent Clicking outside of the element not deactivate it boolean false
title Title text string undefined
title-color Toolbar color string inherit
title-text-color Text color of title bar string inherit
width Component width number | string 800px

VConfirmBtn description

name description type default
class css classes for button string | string[] undefined
color background-color for button.
It can be specify css style color (#fff or transparent or inherit) or class style color (btn-primary)		 string undefined
onClick function executed when the button is clicked Function | VoidFunction undefined
text text in button string undefined
textColor color for button text.
It can be specify css style color (#fff or transparent or inherit) or class style color (btn-primary)		 string undefined

License

MIT

Copyright (c) 2026 shangyuan.tuolang

Related Packages

vuetify-confirm

Extends vuetify with confirm dialog

93,915 142
confirm vuetify vuetify-confirm
vue-confirm-gold

Confirm dialog for Vue: simple and flexible

320
confirm vue confirm dialog
vue-msgbox

A message box (like Sweet Alert) for vue.js.

10,121 233
confirm vue alert message box
vue3-confirm-dialog

Simple Confirm Dialog verification plugin with Vue 3.

9,660
confirm dialog popup vue3
vue-confirm-dialog

simple action confirm

673,100 190
confirm vue dialog plugin popup

Version History

Version Released Vue License
4.1.6 >=3.3 MIT
4.1.5 >=3.3 MIT
4.1.4 >=3.3 MIT
4.1.3 >=3.3 MIT
4.1.2 >=3.3 MIT
Pre-releases (20)
Version Released Vue License
4.1.0-beta.0 ^>=3.3 MIT
4.0.0-next.0 ^3.3.4 MIT
3.3.0-beta.3 ^3.3.4 MIT
3.3.0-beta.2 ^3.3.4 MIT
3.3.0-beta.1 ^3.3.4 MIT