N Qr Code

Naive UI QR Code Component

QR Code component for generating customizable QR codes with support for icons, colors, and different render types.

When to Use

Use this component when:

• URL sharing: Generate QR codes for website links
• Data encoding: Encode text or data in QR format
• Mobile scanning: Create scannable codes for mobile devices
• Payment QR: Generate payment or identification QR codes

When to Invoke

Invoke this skill when:

• User needs to generate a QR code
• User wants to customize QR code colors or size
• User needs to add an icon to a QR code
• User asks about QR code error correction levels

Features

• Customizable Size: Adjustable QR code dimensions
• Color Options: Custom foreground and background colors
• Icon Support: Add logos or icons to QR codes
• Error Correction: Multiple error correction levels (L, M, Q, H)
• Render Types: Canvas or SVG rendering
• Download Support: Easy QR code download functionality

API Reference

QR Code Props

Error Correction Levels

Basic Usage

Basic QR Code

<template>
  <n-space vertical>
    <n-qr-code :value="text" />
    <n-input v-model:value="text" :maxlength="60" placeholder="Enter text or URL" />
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('https://www.naiveui.com/')
</script>

QR Code with Icon

<template>
  <n-qr-code
    value="https://www.naiveui.com/"
    icon-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
    error-correction-level="H"
  />
</template>

Custom Colors

<template>
  <n-flex>
    <n-qr-code value="https://www.naiveui.com/" color="#18a058" />
    <n-qr-code
      value="https://www.naiveui.com/"
      color="#409eff"
      background-color="#F5F5F5"
    />
  </n-flex>
</template>

Custom Size

<template>
  <n-space vertical>
    <n-slider v-model:value="size" :min="60" :max="300" />
    <n-qr-code value="https://www.naiveui.com/" :size="size" />
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const size = ref(100)
</script>

Common Patterns

Downloadable QR Code

<template>
  <n-space vertical>
    <n-qr-code id="qr-code" value="https://www.naiveui.com/" />
    <n-button @click="handleDownload">
      Download QR Code
    </n-button>
  </n-space>
</template>

<script setup>
const handleDownload = () => {
  const canvas = document.querySelector('#qr-code canvas')
  if (canvas) {
    const url = canvas.toDataURL('image/png')
    const link = document.createElement('a')
    link.download = 'qrcode.png'
    link.href = url
    link.click()
  }
}
</script>

Dynamic QR Code Generator

<template>
  <n-card title="QR Code Generator">
    <n-space vertical>
      <n-input v-model:value="content" placeholder="Enter content" />
      <n-color-picker v-model:value="qrColor" />
      <n-slider v-model:value="qrSize" :min="100" :max="300" />
      <n-qr-code
        :value="content"
        :color="qrColor"
        :size="qrSize"
      />
    </n-space>
  </n-card>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('https://example.com')
const qrColor = ref('#000000')
const qrSize = ref(150)
</script>

QR Code with Error Correction Selection

<template>
  <n-space vertical>
    <n-qr-code
      :value="longText"
      :error-correction-level="errorCorrectionLevel"
    />
    <n-radio-group v-model:value="errorCorrectionLevel">
      <n-radio-button value="L" label="Low (7%)" />
      <n-radio-button value="M" label="Medium (15%)" />
      <n-radio-button value="Q" label="Quarter (25%)" />
      <n-radio-button value="H" label="High (30%)" />
    </n-radio-group>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const longText = ref('A longer text that requires more error correction')
const errorCorrectionLevel = ref('M')
</script>

SVG Render Type

<template>
  <n-space>
    <div>
      <n-text>Canvas:</n-text>
      <n-qr-code :value="text" type="canvas" />
    </div>
    <div>
      <n-text>SVG:</n-text>
      <n-qr-code :value="text" type="svg" />
    </div>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('https://www.naiveui.com/')
</script>

QR Code Card for Sharing

<template>
  <n-card title="Scan to Visit" style="width: 250px">
    <n-space vertical align="center">
      <n-qr-code
        :value="url"
        :size="180"
        icon-src="/logo.png"
        error-correction-level="H"
      />
      <n-text depth="3">{{ url }}</n-text>
      <n-button size="small" @click="copyUrl">
        Copy Link
      </n-button>
    </n-space>
  </n-card>
</template>

<script setup>
import { useMessage } from 'naive-ui'

const url = 'https://www.naiveui.com/'
const message = useMessage()

const copyUrl = async () => {
  await navigator.clipboard.writeText(url)
  message.success('Link copied!')
}
</script>

Styled Icon QR Code

<template>
  <n-flex>
    <n-qr-code
      value="https://www.naiveui.com/"
      icon-src="/logo.png"
      :icon-size="32"
      icon-background-color="#333"
      error-correction-level="H"
    />
    <n-qr-code
      value="https://www.naiveui.com/"
      icon-src="/logo.png"
      :icon-border-radius="8"
      error-correction-level="H"
    />
  </n-flex>
</template>

Best Practices

1. Use high error correction with icons: Set error-correction-level to 'H' when using icons

   <n-qr-code icon-src="logo.png" error-correction-level="H" />
   

2. Use hex color format: Colors must be in hex format

   <n-qr-code color="#18a058" background-color="#ffffff" />
   

3. Choose appropriate size: Ensure QR code is large enough to scan

   <n-qr-code :size="150" /> <!-- Minimum recommended for easy scanning -->
   

4. Test scannability: Always test generated QR codes with actual scanners

   // Test with various devices and lighting conditions
   

5. Use SVG for scalability: Choose SVG type when scaling is needed

   <n-qr-code type="svg" /> <!-- Better for print or responsive designs -->
   

6. Keep content concise: Shorter content creates simpler QR codes

   // Use URL shorteners for long URLs
   const shortUrl = 'https://short.url/abc123'