{"id":12552,"library":"vue-qrcode-component","title":"Vue QR Code Component","description":"vue-qrcode-component is a straightforward Vue.js component designed for embedding QR code generation directly within Vue applications. It provides a simple API for encoding text into QR codes, with options to customize size, foreground color, background color, and error correction level. The current stable version is 2.1.1. Given its last commit was several years ago (around 2020), it appears to be in a maintenance state, suitable for projects requiring basic QR code functionality without extensive configuration or advanced features. Its key differentiator is its minimal setup and direct integration into Vue 2 projects, offering a ready-to-use solution for adding QR codes with common customizations, rather than relying on a separate QR library and manually integrating it into a Vue wrapper. It does not actively support Vue 3.","status":"maintenance","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/gerardreches/vue-qrcode-component","tags":["javascript","qr","code","qrcode","vue","component"],"install":[{"cmd":"npm install vue-qrcode-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-qrcode-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-qrcode-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the Vue component. The component is written for Vue 2.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as a default export. Named imports (e.g., destructuring) will result in `undefined`.","wrong":"import { VueQRCodeComponent } from 'vue-qrcode-component'","symbol":"VueQRCodeComponent","correct":"import VueQRCodeComponent from 'vue-qrcode-component'"},{"note":"This global registration pattern is specific to Vue 2. Attempting to use Vue 3's `app.component` directly will likely not work due to API differences.","wrong":"import { createApp } from 'vue';\nconst app = createApp({});\napp.component('qr-code', VueQRCodeComponent);","symbol":"Global Registration","correct":"import Vue from 'vue';\nimport VueQRCodeComponent from 'vue-qrcode-component';\nVue.component('qr-code', VueQRCodeComponent);"},{"note":"When locally registering, specify the desired HTML tag name (e.g., 'qr-code') as the key and the imported component as the value in the `components` option. Using the variable name directly as a key only works if the variable name matches the desired tag name (which is generally discouraged).","wrong":"export default {\n  components: {\n    VueQRCodeComponent\n  },\n  // ...\n};","symbol":"Local Component Registration","correct":"import VueQRCodeComponent from 'vue-qrcode-component';\n\nexport default {\n  components: {\n    'qr-code': VueQRCodeComponent,\n  },\n  // ...\n};"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueQRCodeComponent from 'vue-qrcode-component';\n\n// Register the component globally for use across your Vue 2 application\nVue.component('qr-code', VueQRCodeComponent);\n\n// Create a new Vue instance to demonstrate the component in action\nnew Vue({\n  el: '#app',\n  template: `\n    <div id=\"app\">\n      <h1>QR Code Example</h1>\n      <p>Scan the code below:</p>\n      <qr-code \n        text=\"https://checklist.day\" \n        size=\"280\" \n        color=\"#2c3e50\" \n        bg-color=\"#ecf0f1\" \n        error-level=\"M\">\n      </qr-code>\n      <p>Customized QR code with specific colors and medium error correction.</p>\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates how to install, globally register the `qr-code` component within a Vue 2 application's entry point, and then use it in a template to display a URL, customizing its size, foreground/background colors, and error correction level."},"warnings":[{"fix":"For Vue 3 projects, consider using a different, Vue 3-native QR code library or a core QR generation library manually integrated into a Vue 3 component.","message":"This component is designed exclusively for Vue 2 applications. It leverages the Vue 2 global API (`Vue.component`) for registration and is not directly compatible with Vue 3's composition API or application instance methods without significant refactoring or a compatibility layer.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Evaluate the project's security and maintenance requirements carefully. For critical applications, consider forking the repository, contributing fixes, or opting for a more actively maintained library.","message":"The package has not received updates for several years (last commit around 2020), indicating it is in a maintenance or abandoned state. This implies that potential security vulnerabilities, critical bug fixes, or new feature requests may not be addressed.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always use a default import: `import VueQRCodeComponent from 'vue-qrcode-component';`","message":"The `vue-qrcode-component` package exports its main component as a default export. Attempting to use named imports (e.g., `import { VueQRCodeComponent } from 'vue-qrcode-component'`) will result in an undefined module or an error during compilation.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have either globally registered the component using `Vue.component('qr-code', VueQRCodeComponent)` (typically in your `main.js`) or locally registered it within the parent component's `components` option where it's being used.","cause":"The `<qr-code>` component was used in a template but was not registered globally using `Vue.component` or locally within the parent component's `components` option.","error":"[Vue warn]: Unknown custom element: <qr-code> - did you register the component correctly?"},{"fix":"Verify that `import Vue from 'vue'` is present and correctly configured for a Vue 2 environment. If you are in a Vue 3 project, this component is not directly compatible; consider a Vue 3-native alternative.","cause":"This error typically occurs when `Vue.component` is called without `Vue` being properly imported or initialized, or when attempting to use Vue 2 global APIs in a Vue 3 context without a compatibility layer.","error":"TypeError: Cannot read properties of undefined (reading 'component')"},{"fix":"Run `npm install vue-qrcode-component` or `yarn add vue-qrcode-component` in your project directory and double-check the import statement for any typos.","cause":"The `vue-qrcode-component` package was not installed or there is a typo in the import path.","error":"Module not found: Error: Can't resolve 'vue-qrcode-component' in '...'"}],"ecosystem":"npm"}