ERROR

[dennischchch]

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <VueQr3 width=200 height=200 data="https://diadal.com.ng" ... >
at <VueQr3 width=200 height=200 data="https://diadal.com.ng" ... >

I followed the template and get that error. how to solve it?

runtime-core.esm-bundler.js:6142 Uncaught (in promise) RangeError: Maximum call stack size exceeded
at Function.keys ()
at exposeSetupStateOnRenderContext (runtime-core.esm-bundler.js:6142)
at handleSetupResult (runtime-core.esm-bundler.js:6370)
at setupStatefulComponent (runtime-core.esm-bundler.js:6339)
at setupComponent (runtime-core.esm-bundler.js:6273)
at mountComponent (runtime-core.esm-bundler.js:4125)
at processComponent (runtime-core.esm-bundler.js:4100)
at patch (runtime-core.esm-bundler.js:3695)
at mountChildren (runtime-core.esm-bundler.js:3891)
at mountElement (runtime-core.esm-bundler.js:3800)

[JosephShepin]

yup, have the same issue.

[diadal]

can you share your code?

[JosephShepin]

the example code provided on the readme

[diadal]

working try check your vue3 config

[JosephShepin]

I think it has to do with the vue router.

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <VueQr3 width=200 height=200 data="https://diadal.com.ng"  ... > 
  at <VueQr3 width=200 height=200 data="https://diadal.com.ng"  ... > 
**...redacted a ton of lines...**
  at <VueQr3 width=200 height=200 data="https://diadal.com.ng"  ... > 
  at <VueQr3 width=200 height=200 data="https://diadal.com.ng"  ... > 
  at <VueQr3 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
warn @ runtime-core.esm-bundler.js?d2dd:38
logError @ runtime-core.esm-bundler.js?d2dd:212
handleError @ runtime-core.esm-bundler.js?d2dd:204
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:158
flushJobs @ runtime-core.esm-bundler.js?d2dd:394
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?d2dd:285
queueCb @ runtime-core.esm-bundler.js?d2dd:307
queuePreFlushCb @ runtime-core.esm-bundler.js?d2dd:310
scheduler @ runtime-core.esm-bundler.js?d2dd:1807
triggerEffects @ reactivity.esm-bundler.js?89dc:382
triggerRefValue @ reactivity.esm-bundler.js?89dc:982
set value @ reactivity.esm-bundler.js?89dc:1026
finalizeNavigation @ vue-router.esm-bundler.js?ec2d:3194
eval @ vue-router.esm-bundler.js?ec2d:3067
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?ec2d:3038
push @ vue-router.esm-bundler.js?ec2d:2966
navigate @ vue-router.esm-bundler.js?ec2d:2093
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:369
vue-router.esm-bundler.js?ec2d:72 [Vue Router warn

It looks like it's being loaded in there a least a hundred times.

[JosephShepin]

@diadal could you please provide working example code? Thanks!

[diadal]

you need to make a clone of this to your components

than

 components: {
    VueQr3: defineAsyncComponent(() =>
      Promise.resolve(import('components/vue3-qr-code-styling'))
    ),
  },

 <VueQr3
          :width="1200"
          :height="1200"
          :data="tokencode"
          :qrOptions="{
            typeNumber: 0,
            mode: 'Byte',
            errorCorrectionLevel: 'H',
          }"
          :imageOptions="{
            hideBackgroundDots: true,
            imageSize: 0.42,
            margin: 30,
          }"
          :dotsOptions="{
            type: 'dots',
            color: '#000000',
            gradient: {
              type: 'linear',
              rotation: 0,
              colorStops: [
                { offset: 0, color: '#000000' },
                { offset: 1, color: '#000000' },
              ],
            },
          }"
          :backgroundOptions="{ color: '#ffffff' }"
          image="/img/2fa.png"
          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
          :cornersDotOptions="{ type: undefined, color: '#000000' }"
          fileExt="png"
          :download="false"
          myclass=" text-center"
          imgclass="img-qr-i"
          downloadButton="my-button"
          :downloadOptions="{ name: 'vqr', extension: 'png' }"
        ></VueQr3>

use above as sample

[JosephShepin]

Thank you for your help!

[JosephShepin]

I am having issues with the download button, does this feature work for you?