ND Confirmation Dialog

A modern, customizable confirmation dialog component for Vue 3 applications that provides async/await support for user confirmations.

Why ND Confirmation Dialog?

Standard browser alert() and confirm() dialogs have limitations:

• Browser alert(): Doesn't wait for user confirmation before executing subsequent code
• Browser confirm(): Uses the default browser styling which can't be customized and may not match your app's design

ND Confirmation Dialog solves these problems by providing:

✅ Async/await support - Wait for user confirmation before proceeding
✅ Customizable design - Style it to match your application
✅ Vue 3 integration - Built specifically for Vue 3 projects
✅ Simple API - Easy to implement and use

Installation

npm install nd-confirmation-dialog

Setup

1. Register the Plugin

In your main.ts or main.js file:

import { createApp } from "vue";
import App from "./App.vue";
import NDConfirmDialog from "nd-confirmation-dialog";

const app = createApp(App);

app.use(NDConfirmDialog);

app.mount("#app");

2. Add the Component

In your App.vue (or root component):

<template>
  <div id="app">
    <!-- Your app content -->
    <ConfirmDialog />
  </div>
</template>

<script setup lang="ts">
// No imports needed - ConfirmDialog is globally registered
</script>

Usage

Import the ndConfirmService and use it with async/await to get user confirmation:

<template>
  <button @click="handleDelete">Delete Item</button>
</template>

<script setup lang="ts">
import { ndConfirmService } from "nd-confirmation-dialog";

const handleDelete = async () => {
  const isConfirmed = await ndConfirmService.ask(
    "Are you sure you want to delete this?",
  );

  console.log("Response from the user:", isConfirmed);

  if (isConfirmed) {
    // User clicked "Confirm"
    console.log("Deleted successfully!");
    // Your delete logic here
  } else {
    // User clicked "Cancel"
    console.log("Deletion cancelled");
  }
};
</script>

Examples

Basic Confirmation

const handleSubmit = async () => {
  const confirmed = await ndConfirmService.ask("Submit this form?");

  if (confirmed) {
    // Submit form
  }
};

Delete Confirmation

const deleteUser = async (userId: string) => {
  const confirmed = await ndConfirmService.ask(
    "Are you sure you want to delete this user? This action cannot be undone.",
  );

  if (confirmed) {
    await api.deleteUser(userId);
    showSuccessMessage("User deleted successfully");
  }
};

Logout Confirmation

const logout = async () => {
  const confirmed = await ndConfirmService.ask(
    "Are you sure you want to log out?",
  );

  if (confirmed) {
    await authService.logout();
    router.push("/login");
  }
};

Form Navigation Warning

const navigateAway = async () => {
  if (formHasUnsavedChanges.value) {
    const confirmed = await ndConfirmService.ask(
      "You have unsaved changes. Are you sure you want to leave?",
    );

    if (confirmed) {
      router.push("/dashboard");
    }
  } else {
    router.push("/dashboard");
  }
};

API Reference

ndConfirmService.ask(message: string): Promise<boolean>

Shows a confirmation dialog and returns a promise that resolves to:

• true - User confirmed the action
• false - User cancelled the action

Parameters:

• message (string): The confirmation message to display to the user

Returns:

• Promise<boolean>: Resolves to true if confirmed, false if cancelled

How It Works

1. When you call ndConfirmService.ask(), it displays a modal dialog
2. The function execution pauses (awaits) until the user responds
3. Based on the user's choice (Confirm/Cancel), it returns true or false
4. Your code continues execution based on the returned value

Browser Compatibility

• Vue 3.x
• Modern browsers (Chrome, Firefox, Safari, Edge)

TypeScript Support

This package includes TypeScript definitions out of the box.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Made with ❤️ for the Vue community