Nuxt 3 support

[waysagency]

Any plans on Nuxt 3 support? I'm now getting errors

[nuxt] [request error] [unhandled] [500] window is not defined
  at $id_hUmYHrepnE (/C:/frontend/.nuxt/dist/server/server.mjs:7890:5)    
  at async __instantiateModule__ (/C:/frontend/.nuxt/dist/server/server.mjs:121789:3)

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

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

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

[quiet-dog]

我加了client-only还是出现window is not defined

[lcrislforcel]

It turns out that I have the same problem, I added the build in the nuxt configuration, however it gives me another error, about 'TextEncoder is not defined', I could see that the error occurs in the /io.js file; Any idea why the error occurs?

[Binaryify]

make sure you use import vueQr from 'vue-qr/src/packages/vue-qr.vue' and ClientOnly tag