Comments (9)
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
from vue-qr.
plz use <client-only><vue-qr></vue-qr></client-only>
instead
from vue-qr.
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>
from vue-qr.
But now I have some issues with the appearence of the qr code.
what issues you mean
from vue-qr.
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
from vue-qr.
plz set cornerAlignment's scale to 1
from vue-qr.
我加了client-only还是出现window is not defined
from vue-qr.
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?
from vue-qr.
from vue-qr.
Related Issues (20)
- does not provide an export named 'default' HOT 5
- 出现堆栈溢出 HOT 2
- npm ERR! code 1 / Mac M1 Chip HOT 2
- [求助] path-browserify does not provide an export named 'basename' HOT 6
- 添加logoSrc后二维码无法被识别
- vue3+vite 引用提示 import not found: extname HOT 2
- vue3版本类型报错
- 用的3.2.4版本,Vue2打包后UglifyJs报错
- 二维码Logo图片的清晰度怎么调整 HOT 5
- 启动项目报错(Module parse failed: Unexpected token (1:41089)) HOT 3
- vue-qr不支持es5的语法么
- 生成二维码破损
- IE11 页面重定向 HOT 2
- 为什么添加背景图片无法生效,只是前景色变得和背景色一样?
- Cannot read properties of undefined (reading '_c') HOT 1
- 中间logo 图片大小怎么调整? HOT 1
- Changing the ComponentOptions does not make any change to my QR
- Am I able to somehow pass a File object in the logoSrc ? HOT 1
- Access-Control-Allow-Origin CORS policy: HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-qr.