Nuxt 3 support

[waysagency]

Nuxt 3 support

[waysagency]

Alright I've got it working now. Had to add the package to build.transpile.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ["vue-qr", "@diadal/vue3-qr-code-styling"],
  },
});

But now I have some issues with the appearence of the qr code.

Here is my code

<script setup lang="ts">
import vueQr from "vue-qr/src/packages/vue-qr.vue";

const ComponentOptions = reactive({
  data: {
    scale: 1,
  },
  timing: {
    scale: 1,
    protectors: true,
  },
  alignment: {
    scale: 0.5,
    protectors: true,
  },
  cornerAlignment: {
    scale: 0.5,
    protectors: true,
  },
});
</script>

<template>
  <div>
    <ClientOnly>
      <vueQr text="https://test.nl/" :size="500" :components="ComponentOptions"></vueQr>
    </ClientOnly>
  </div>
</template>

And this is what it looks like

[Binaryify]

plz use <client-only><vue-qr></vue-qr></client-only> instead

[waysagency]

I don't get the window error anymore. Even without the client-only. But I do get this error now.

<script setup>
import vueQr from "vue-qr/src/packages/vue-qr.vue";
</script>

<template>
  <div>
    <client-only><vue-qr></vue-qr></client-only>
  </div>
</template>

[Binaryify]

But now I have some issues with the appearence of the qr code.

what issues you mean

[waysagency]

Look at the bottom right square. There are the small squares smaller then the rest of the squares. Don't think this is normal behaviour

[Binaryify]

plz set cornerAlignment's scale to 1