[Vuejs]-Vue.js 3 and Modal with DaisyUI (Tailwind CSS)

You can use the modal-toggle class from DaisyUI to control a modal. To achieve this, you can use showModal as a ref and bind a class to an object. Then you can toggle showModal value on click. Another option is to give the modal-toggle class to your modal div and use v-if or v-show when showModal is true.

<template>
  <button
    class="btn"
    @click="toggleModal">
    Toggle modal
  </button>

  <div
    class="modal"
    :class="{ 'modal-open': showModal }">
    <div class="modal-box">
      <p class="py-4">Content</p>
      <div class="modal-action">
        <button
          class="btn"
          @click="toggleModal">
          Close modal
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const showModal = ref(false);

function toggleModal(): void {
  showModal.value = !showModal.value;
}
</script>

The modal is controller by the input field, so to open or close the modal just toggle the value of that input:

<template>
       <!-- The button to open payment modal -->
    <label class="btn" @click="openPaymentModal">open modal</label>

    <!-- Put this part before </body> tag -->
    <input type="checkbox" v-model="paymentModalInput" id="payment-modal" class="modal-toggle" />
    <div class="modal modal-bottom sm:modal-middle">
      <div class="modal-box">
        <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
        <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
        <div class="modal-action">
          <label class="btn" @click="closePaymentModal">Yay!</label>
        </div>
      </div>
    </div>
</template> 
<script lang="ts" setup>
    const paymentModalInput = ref()
    const openPaymentModal = () => {
        paymentModalInput.value = true
    }
    const closePaymentModal = () => {
        paymentModalInput.value = false
    }
</script>

<div class="modal" :class="aBooleanValue?'modal-open':''">
  <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
  <div class="modal-action">
    <label for="my-modal" class="btn">Yay!</label>
  </div>
</div>