{"library":"qrcode.vue","title":"qrcode.vue Vue Component","description":"qrcode.vue is a versatile Vue.js component designed for generating QR codes, supporting both Vue 2 (via its 1.x branch) and Vue 3 (via its 3.x branch). The current stable version is 3.8.1, with the package exhibiting an active release cadence, frequently pushing updates for performance enhancements, new features, and bug fixes. Key differentiators include the ability to render QR codes as either `canvas` or `svg`, comprehensive support for embedding logo images with customizable positions, sizes, border radii, and background excavation, as well as recent additions like gradient fill functionality. This flexibility makes it suitable for a wide array of web applications requiring dynamic QR code generation, providing a robust solution for integrating QR code capabilities directly into Vue applications.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install qrcode.vue"],"cli":null},"imports":["import QrcodeVue from 'qrcode.vue'","import { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'","import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { ref } from 'vue'\nimport QrcodeVue from 'qrcode.vue'\nimport type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'\n\n// This code snippet demonstrates how to set up reactive data and import necessary\n// components and types for qrcode.vue within a Vue 3 Composition API setup.\n// In a real Vue component, these refs would be used in the <template> section.\n\nconst value = ref('https://checklist.day/qrcode-example')\nconst level = ref<Level>('H') // High error correction level\nconst renderAs = ref<RenderAs>('svg') // Render as SVG for scalability\nconst constbackground = ref('#ffffff')\nconst foreground = ref('#000000')\nconst margin = ref(4)\n\nconst imageSettings = ref<ImageSettings>({\n  src: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/qrcode.svg', // Example logo\n  width: 40,\n  height: 40,\n  excavate: true, // Excavate QR code behind the image for clarity\n  borderRadius: 8 // Apply border radius to the logo\n})\n\nconst gradient = ref(true)\nconst gradientType = ref<GradientType>('linear')\nconst gradientStartColor = ref('#10b981') // Emerald green\nconst gradientEndColor = ref('#3b82f6')   // Blue\n\n// Usage in a Vue template (example):\n// <template>\n//   <qrcode-vue\n//     :value=\"value\"\n//     :level=\"level\"\n//     :render-as=\"renderAs\"\n//     :background=\"background\"\n//     :foreground='foreground'\n//     :margin=\"margin\"\n//     :gradient=\"gradient\"\n//     :gradient-type=\"gradientType\"\n//     :gradient-start-color=\"gradientStartColor\"\n//     :gradient-end-color=\"gradientEndColor\"\n//     :image-settings='imageSettings'\n//   />\n// </template>\n","lang":"typescript","description":"This quickstart demonstrates how to use qrcode.vue with Vue 3's Composition API, configuring common props like value, error correction level, rendering type (SVG), colors, margins, image settings for a logo, and gradient fills.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}