Confirm

Promise-based confirmation helper rendered through the AlertDialog primitive.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { ConfirmProvider } from "@vizejs/ui/confirm";

Or copy the source into your project with vize lib pull confirm (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Awaits a destructive confirmation through the provider's promise-based confirm API. -->
<script setup lang="ts">
import { ref, useTemplateRef } from "vue";

import { ConfirmProvider, type ConfirmProviderExpose } from "@vizejs/ui/confirm";

const confirmRef = useTemplateRef<ConfirmProviderExpose>("confirm");
const files = ref(["invoice-march.pdf", "invoice-april.pdf"]);

async function deleteAll(): Promise<void> {
  const provider = confirmRef.value;
  if (provider === null) return;
  const accepted = await provider.confirm({
    title: "Delete all invoices?",
    description: "This permanently removes every invoice in this folder.",
    confirmLabel: "Delete invoices",
    destructive: true,
  });
  if (accepted) files.value = [];
}
</script>

<template>
  <ConfirmProvider ref="confirm">
    <ul>
      <li v-for="file in files" :key="file">{{ file }}</li>
    </ul>
    <button type="button" :disabled="files.length === 0" @click="deleteAll">Delete all</button>
  </ConfirmProvider>
</template>

API

ConfirmProvider

Source: src/families/overlays/confirm/confirm-provider.vue

Props

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for @vizejs/ui/confirm (confirm-provider.vue plus useConfirm() / createConfirmQueue() in confirm-runtime.ts). The provider renders the existing AlertDialog primitive (alert-dialog-content.vue inside the Dialog root, portal, overlay, title, description, and close parts) for the request at the head of a FIFO queue. Every row names the test that proves it (confirm.test.ts, confirm-ssr.test.ts, or confirm.types.test-d.ts).