Vue.js 3 and Modal with DaisyUI (Tailwind CSS)

Question

I'm tinkering with DaisyUI within Vue.js 3 (porting an existing Vue+Bootstrap application to Tailwind CSS). I liked the idea that DaisyUI doesn't have JS wizardry going on behind the scenes, yet there seems to be some CSS voodoo magic that is doing things more complicated than they need to be (or at least this is my impression).

From the DaisyUI examples, here's the modal I'm trying to integrate:

<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
  <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 for="my-modal" class="btn">Yay!</label>
    </div>
  </div>
</div>

no javascript, yet the problem is that the modal will come and go according to some obscure logic under the hood that tests the value of the my-modal input checkbox at the top. That's not what I want. I want my modal to come and go based on my v-show="showModal" vue3 reactive logic! Daisy doesn't seem to make that possible. Or at least not easily. What am I missing?

Not really an answer, but a momentary workaround. I left the checkbox in (set to checked) and added my custom logic to the "always on" modal: `` `
` — Luca P., Nov 08 '22 at 23:01
I have these concerns as well. The checkbox-hack is a classic way to control state locally in a tight package, only using HTML+CSS. However, for some app components (like a modal) you may have strong reasons to maintain state in some global (like Vuex or Pinia), completely negating the need for the checkbox-hack to show/hide the component. So now, the question is, do you get rid of the checkbox and labels (for efficiency/cleanliness) or do you maintain them and pass your global state into local state (messy)? Perhaps there's reasons to keep the input & labels, maybe for accessibility concerns? — Kalnode, Mar 15 '23 at 16:43

score 3 · Answer 1 · answered Apr 18 '23 at 20:36

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>

score 1 · Answer 2 · answered Jan 20 '23 at 13:36

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>

score 0 · Answer 3 · answered Mar 28 '23 at 05:32

<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>

Vue.js 3 and Modal with DaisyUI (Tailwind CSS)

3 Answers3