Nuxt•4mo ago

"Are you sure?" component

What component should I use for an are you sure dialog?

2 Replies

Hi @pearbender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- For an "Are you sure?" dialog in a Nuxt project using Nuxt UI, the recommended component is the Modal component (UModal). The Modal is designed to display messages or request user input, making it ideal for confirmation dialogs. You can customize its title, description, and content, and control its visibility programmatically. Here’s a basic example of how you might implement an "Are you sure?" dialog:

<template>
  <UModal v-model:open="isOpen" title="Are you sure?">
    <template #body>
      <p>Do you really want to proceed with this action?</p>
    </template>
    <template #footer>
      <UButton @click="isOpen = false">Cancel</UButton>
      <UButton color="primary" @click="confirmAction">Confirm</UButton>
    </template>
  </UModal>
  <UButton label="Trigger Dialog" @click="isOpen = true" />
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
function confirmAction() {
  // Your confirmation logic here
  isOpen.value = false
}
</script>

<template>
  <UModal v-model:open="isOpen" title="Are you sure?">
    <template #body>
      <p>Do you really want to proceed with this action?</p>
    </template>
    <template #footer>
      <UButton @click="isOpen = false">Cancel</UButton>
      <UButton color="primary" @click="confirmAction">Confirm</UButton>
    </template>
  </UModal>
  <UButton label="Trigger Dialog" @click="isOpen = true" />
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
function confirmAction() {
  // Your confirmation logic here
  isOpen.value = false
}
</script>

The Modal component supports slots for header, body, and footer, allowing you to fully customize the dialog’s appearance and actions. You can also control its open state using v-model:open or the open prop, which is useful for programmatic control in response to user actions UModal documentation. If you want a dialog that slides in from the side, you can also consider the Slideover component, which has similar API and slot structure Slideover API. Both components are suitable for confirmation dialogs, but Modal is the most common choice for "Are you sure?" prompts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

"Are you sure?" component

Did you find this page helpful?