This package preventing hot reloading on my Nuxt 3 app

[keanallen]

When I started to use this plugin, I noticed that my nuxt 3 app does not reflect the code changes on the UI. But when I removed thids plugin, everything's back to normal.

[thlintw]

Same here. Not using Nuxt just plain Vue3. As long as a QRCodeVue3 component is loaded anywhere the app stopped hot reloading.

[keanallen]

@thlintw you can use this QRCodeVue

[boobo94]

Same here. Not using Nuxt just plain Vue3. As long as a QRCodeVue3 component is loaded anywhere the app stopped hot reloading.

Same here.

[SymphonyCR]

Same for me with Quasar v2

[JulianGarcia04]

Same here with Quasar v2

[dmonterde]

Just to confirm this blocks hot reload on Quasar v2.

[boobo94]

My last solution was using https://www.npmjs.com/package/styled-qr-code with vue3. Example below.

Component:

<template>
  <div class="text-center">
    <div class="qrcode_container" ref="qrCodeRef"></div>

    <button @click="download">Download</button>
  </div>
</template>

<script lang="ts" setup>
import QRCodeStyling, { Options } from 'styled-qr-code';
import { watch } from 'vue';
import { onMounted, ref } from 'vue';

const qrCodeRef: any = ref(null);

const props = defineProps({
  data: String,
});

const options: Options = {
  width: 500,
  height: 500,
  type: 'svg',
  data: props.data,
  image: 'logo.png',
  margin: 10,
  qrOptions: {
    typeNumber: 0,
    mode: 'Byte',
    errorCorrectionLevel: 'H',
  },
  imageOptions: {
    hideBackgroundDots: true,
    imageSize: 0.2,
    margin: 0,
    crossOrigin: 'anonymous',
  },
  dotsOptions: {
    color: '#4a4bc6',

    type: 'rounded',
  },
  backgroundOptions: {
    color: '#ffffff',
  },
  cornersSquareOptions: {
    color: '#000000',
    type: 'square',
  },
  cornersDotOptions: {
    color: '#000000',
    type: 'dot',
  },
};

const qrCode = new QRCodeStyling(options);

onMounted(async () => {
  qrCode.append(qrCodeRef.value);
});

watch(
  () => props.data,
  (newValue) => {
    qrCode.update({ ...options, data: newValue });
  }
);

function download() {
  qrCode.download({
    name: `qrcode-${props.data}`,
    extension: 'png',
  });
}
</script>

<style scoped lang="scss">
.qrcode_container {
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>

[dedfft]

Yeah, very sad. Spent some time implementing this module, but it breaks hot reloading for the whole project on VUE3