:lobo_tuerto

Posts tagged demo

Posts under this tag. Back to all posts when you want the full stream.

@latest_post

A confirmation dialog component with Vue 3 and Tailwind CSS

Prerequisites

We'll use the <BaseModal> component we wrote in:
A basic modal component with Vue 3 and Tailwind CSS .

Desired API

Let's suppose we already have a <ConfirmationDialog> component, and we'd like to use it like this:

Dialog 1

HTML

<script setup lang="ts">
import { ref } from 'vue'
import ConfirmationDialog from '@/components/modals/ConfirmationDialog.vue'

const showDialog = ref(false)

function handleResult(value: boolean) {
  showDialog.value = false
  // Do something with `value`
  console.log('value', value)
}
</script>

<template>
  <ConfirmationDialog :show="showDialog1" @result="handleResult" />
</template>