Nuxt Confirm

A promise-based, customizable confirmation dialog system for Nuxt 3 applications that simplifies user interactions with elegant UI components.

Features

• 🎨 Fully customizable UI with Nuxt UI integration
• 🔄 Promise-based API for easy use in async functions
• 🎭 Multiple preset styles (info, warning, danger, success)
• 🔄 Seamless compatibility with both Nuxt UI v2 and v3
• 🌙 Dark mode support out of the box
• 🧩 TypeScript support for improved developer experience

Quick Setup

Install the module to your Nuxt application with one command:

# npx
npx nuxi module add @xyz/nuxt-confirm

# npm
npm install @xyz/nuxt-confirm 

# yarn
yarn add @xyz/nuxt-confirm

# pnpm
pnpm add @xyz/nuxt-confirm

# bun
bun add @xyz/nuxt-confirm

Setup

Add @xyz/nuxt-confirm to the modules section of your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@xyz/nuxt-confirm'],
  confirm: {
    // Module options
    version: 2, // 2 or 3 depending on your Nuxt UI version
    type: 'danger', // default type for confirmations
    size: 'md', // default size
    autoImport: true, // auto import the composable
    bgClass: 'bg-white dark:bg-black', // background class for the dialog
  }
})

Usage

Basic Usage

Simply use the useConfirm composable to show confirmation dialogs:

<template>
  <div>
    <UButton @click="confirmDelete">Delete Item</UButton>
  </div>
</template>

<script setup>
const { confirm } = useConfirm();

const confirmDelete = async () => {
    const confirmed = await confirm({
      title: 'Delete Item',
      message: 'Are you sure you want to delete this item?',
      confirm: 'Yes, Delete',
      cancel: 'No, Cancel',
      type: 'danger'
    })

    // User confirmed the action
    if (confirmed) {
      console.log('Item deleted')
    }
    else {
      console.log('Deletion cancelled')
    }
}
</script>

Advanced Usage

Customize every aspect of the confirmation dialog:

<template>
  <div>
    <UButton @click="confirmAction">Perform Action</UButton>
  </div>
</template>

<script setup>
const { confirm } = useConfirm();

const confirmAction = async () => {
  const confirmed = await confirm({
    title: 'Confirm Action',
    message: 'Are you sure you want to perform this action?',
    type: 'info',
    icon: {
      name: 'i-heroicons-question-mark-circle',
      color: 'blue',
      size: 'md'
    },
    confirm: {
      label: 'Yes, Continue',
      color: 'blue',
      size: 'md',
      variant: 'solid'
    },
    cancel: {
      label: 'Cancel',
      color: 'gray',
      size: 'md',
      variant: 'outline'
    },
  })
  
  // Action confirmed
  if (confirmed) {
    console.log('Action confirmed')
  }
  else {
    console.log('Action cancelled')
  }
}
</script>

Using Different Types

The module comes with preset types that apply different styles:

// Success confirmation
const confirmed = await confirm({
  title: 'Success',
  message: 'Operation completed successfully',
  type: 'success',
  confirm: 'OK'
})

// Warning confirmation
const confirmed = await confirm({
  title: 'Warning',
  message: 'This action may have consequences',
  type: 'warning',
  confirm: 'Proceed',
  cancel: 'Cancel'
})

// Info confirmation
const confirmed = await confirm({
  title: 'Information',
  message: 'Here is some important information',
  type: 'info',
  confirm: 'Got it'
})

Configuration

Module Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | version | 2 \| 3 | 3 | The Nuxt UI version to use | | type | 'info' \| 'warning' \| 'danger' \| 'success' | 'danger' | Default type for confirmations | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Default size for the dialog | | bgClass | string | 'bg-white dark:bg-black' | Additional background classes | | autoImport | boolean | true | Whether to auto-import the composable |

Dialog Options

| Option | Type | Description | |--------|------|-------------| | type | 'info' \| 'warning' \| 'danger' \| 'success' | Dialog type (applies default styles) | | title | string | Dialog title | | message | string | Dialog message | | icon | { name: string, color: string, size?: string } | Icon configuration | | confirm | string \| { label: string, color: string, size?: string, variant?: string } | Confirm button configuration | | cancel | string \| { label: string, color: string, size?: string, variant?: string } \| false | Cancel button configuration (set to false to hide) |

TypeScript Support

The module includes full TypeScript definitions:

import type { ConfirmOptions } from '@xyz/nuxt-confirm'

const options: ConfirmOptions = {
  title: 'Confirm Action',
  message: 'Are you sure?',
  type: 'warning'
}

Contribution

We welcome contributions to improve Nuxt Confirm! Please feel free to submit issues and pull requests.

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

License

MIT License