Nuxt3 - doesn't work unless you resize your screen

[1sd15]

Hey! A bit of an odd one here but the vue-signature-pad won't show your drawing visually if the canvas is within a grid unless you resize your screen. Mostly making this ticket to help others out there who have this bug

[philliphartin]

@1sd15 Did you ever find a resolution? I'm experiencing the same. I wrapped it in ClientOnly tags, but it didn't help.

[philliphartin]

As a heads up, I'm working around the issue with the following setTimeout approach.

<template>
  <ClientOnly>
    <VueSignaturePad
      height="250px"
      ref="signaturePad"
      class="rounded-xl border bg-gray-50"
    />
  </ClientOnly>
</template>

<script setup>
  import { VueSignaturePad } from "vue-signature-pad"

  const signaturePad = ref()

  onMounted(() => {
    setTimeout(() => {
      signaturePad.value.resizeCanvas()
    }, 100)
  })
</script>

[DanWithams]

@pjhartin thanks for this work around, I noticed that the SignaturePad would only work after opening a keyboard on Android, which must do the same by resizing the canvas. I hope a solution is easily found by those who maintain this repo.

So this is not Nuxt specific.

[rbluethl]

Hey there! I'm having the same issue in a Vue 3 app. The setTimeout approach works, although I hate these kinds of workarounds with magic waits. Did anyone find another solution?