{"id":14846,"library":"qrcode-vue","title":"qrcode-vue","description":"This `qrcode-vue` package offers a Vue.js component for rendering QR codes directly within Vue applications. It utilizes the underlying `qr.js` library for all core QR code encoding functionalities, simplifying integration for Vue 2 developers. Key features include dynamic adjustment of QR code size, customization of background and foreground colors, and the ability to embed a logo image at the center of the generated QR code. While the latest version available on npm is 1.2.0, reportedly published approximately a year ago, the linked GitHub repository (l-ll/qrcode-vue) shows a severe lack of recent development, with the last commits and official releases (like v1.0.0) dating back to 2017. This strong indication of abandonment means the package is not actively maintained and lacks crucial updates or support for modern Vue ecosystems, particularly Vue 3, with which it is not inherently compatible without significant refactoring. Its release cadence is effectively non-existent, making it a risky choice for new projects.","status":"abandoned","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/l-ll/qrcode-vue","tags":["javascript","vue","qrcode","logo"],"install":[{"cmd":"npm install qrcode-vue","lang":"bash","label":"npm"},{"cmd":"yarn add qrcode-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add qrcode-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core QR code generation library.","package":"qr.js","optional":false}],"imports":[{"note":"The component is exported as the default export of the module.","wrong":"import { QrcodeVue } from 'qrcode-vue';","symbol":"QrcodeVue","correct":"import QrcodeVue from 'qrcode-vue'; // In a Vue component's script section"},{"note":"When globally registering, ensure you import the default export.","wrong":"import { QrcodeVue } from 'qrcode-vue';\nVue.component('qrcode-vue', QrcodeVue);","symbol":"QrcodeVue","correct":"import QrcodeVue from 'qrcode-vue';\nVue.component('qrcode-vue', QrcodeVue); // For global registration in main.js"},{"note":"In CommonJS environments, the default export is accessed via the `.default` property.","wrong":"const QrcodeVue = require('qrcode-vue'); // Will return an object { default: Component }","symbol":"QrcodeVue","correct":"const QrcodeVue = require('qrcode-vue').default;"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <p>Scan this QR code!</p>\n    <qrcode-vue \n      :size=\"size\" \n      :value=\"value\" \n      :logo=\"logo\" \n      :bgColor=\"bgColor\" \n      :fgColor=\"fgColor\"\n      level=\"H\"\n    ></qrcode-vue>\n    <p>Current value: {{ value }}</p>\n    <p>Size: {{ size }}px</p>\n    <p>\n      <button @click=\"changeValue\">Change Value</button>\n      <button @click=\"changeSize\">Toggle Size</button>\n    </p>\n  </div>\n</template>\n\n<script>\n  import QrcodeVue from 'qrcode-vue';\n\n  export default {\n    components: {\n      QrcodeVue\n    },\n    data () {\n      return {\n        size: 160,\n        bgColor: '#ffffff',\n        fgColor: '#000000',\n        value: 'https://checklist.day/quickstart-example',\n        logo: 'https://vuejs.org/images/logo.png' // Using Vue logo for example\n      }\n    },\n    methods: {\n      changeValue() {\n        this.value = this.value === 'https://checklist.day/quickstart-example'\n          ? 'https://github.com/l-ll/qrcode-vue'\n          : 'https://checklist.day/quickstart-example';\n      },\n      changeSize() {\n        this.size = this.size === 160 ? 200 : 160;\n      }\n    }\n  }\n</script>","lang":"javascript","description":"Demonstrates basic integration of `qrcode-vue` into a Vue 2 application, showing prop binding for value, size, colors, and logo, along with dynamic updates."},"warnings":[{"fix":"Consider using alternative QR code libraries designed for Vue 3, or manually adapt the component for Vue 3's composition API and new rendering concepts, which requires significant effort.","message":"This package is built for Vue 2.x and is not directly compatible with Vue 3.x applications. Attempting to use it in a Vue 3 project will result in runtime errors due to fundamental API changes.","severity":"breaking","affected_versions":"All versions"},{"fix":"For new projects, prefer actively maintained QR code libraries. If already in use, be aware of potential vulnerabilities and lack of support.","message":"The primary GitHub repository (l-ll/qrcode-vue) has been inactive since 2017, and while npm shows a version 1.2.0 published roughly a year ago, the project is effectively abandoned. This means no new features, bug fixes, or security patches are expected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure the logo image is served from the same origin as your application, or configure the image server with appropriate CORS headers (e.g., `Access-Control-Allow-Origin: *`). Alternatively, host the logo image as a base64 data URL.","message":"Embedding a logo via the `logo` prop can lead to Cross-Origin Resource Sharing (CORS) errors if the logo image is hosted on a different domain than your application and does not provide appropriate CORS headers.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Regularly audit dependencies for known vulnerabilities. If handling sensitive data, consider more actively maintained alternatives that adhere to modern security practices.","message":"The underlying `qr.js` library, on which `qrcode-vue` depends, might not receive timely security updates. Using an unmaintained QR code generator could pose security risks, especially if generating QR codes from untrusted input.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `QrcodeVue` is listed in the `components` option of your Vue component: `components: { QrcodeVue }` or globally registered via `Vue.component('qrcode-vue', QrcodeVue)`.","cause":"The `qrcode-vue` component was imported but not registered either locally in a component or globally in the Vue instance.","error":"[Vue warn]: Unknown custom element: <qrcode-vue> - did you register the component correctly?"},{"fix":"Host the logo image on the same domain as your application, ensure the image server sends `Access-Control-Allow-Origin` headers, or convert the logo image to a base64 data URL.","cause":"Attempting to generate a QR code with a logo URL from a different origin without proper CORS headers.","error":"Error: Tainted canvases may not be exported. Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement'"},{"fix":"Always provide a valid string for the `:value` prop, e.g., `:value=\"myUrl\"`.","cause":"The `value` prop, which is mandatory for QR code generation, was not provided or was `undefined`.","error":"TypeError: Cannot read properties of undefined (reading 'value')"}],"ecosystem":"npm"}