Nuxt3使用vue3-qrcode-reader读二维码无显示，报vnode错误

你遇到的问题是使用vue3-qrcode-reader的<QrcodeReader>组件时，页面无内容显示，控制台抛出Invalid vnode type when creating vnode: undefined.警告且关联<Qrbox onVnodeUnmounted=fn>，根源是QrcodeReader依赖的Qrbox组件未被正确注册或导入。以下是具体解决方法：

1. 手动导入并注册Qrbox组件 #

部分版本的vue3-qrcode-reader不会自动注册内部依赖的Qrbox组件，需要手动导入并通过插槽传入：

修改代码如下：

<template>
  <div>
    <ClientOnly>
      <qrcode-reader @decode="onDecode" @error="onError">
        <!-- 通过默认插槽传入Qrbox组件 -->
        <template #default="{ props }">
          <qrbox v-bind="props" />
        </template>
      </qrcode-reader>
    </ClientOnly>
  </div>
</template>

<script setup>
// 同时导入QrcodeReader和Qrbox
import { QrcodeReader, Qrbox } from "vue3-qrcode-reader";

const onDecode = (content) => {
  console.log("Decoded QR code:", content);
};

const onError = (error) => {
  console.error("QR code scanning error:", error);
};
</script>

2. 检查版本兼容性 #

若使用vue3-qrcode-reader v5及以上版本，组件插槽结构有更新，必须通过插槽传递Qrbox组件才能正常渲染。同时确保Vue版本在3.2.x及以上，组件依赖Vue 3的Composition API和<script setup>语法。

3. 确认摄像头权限与运行环境 #

页面无内容也可能是浏览器权限或环境问题：

• 检查浏览器地址栏的权限提示，点击允许摄像头访问；
• 确保在HTTPS环境下测试（localhost本地开发除外），多数现代浏览器仅允许在安全上下文调用摄像头API。

内容的提问来源于stack exchange，提问作者Nopmd