qrcode.vue

Star {{ stargazersCount }}

QRCode 生成用の Vue コンポーネント。Vue 2 と Vue 3 の両方をサポートします。canvas と svg の2種類の QRコード形式を提供します。サイズ、余白、誤り訂正レベル、前景色と背景色、ロゴ画像、グラデーション効果をカスタマイズできます。

インストール

npm install --save qrcode.vue
# or
pnpm add qrcode.vue
yarn add qrcode.vue

このコンポーネントは3種類のビルド形式を提供します：

ファイル形式
qrcode.vue.cjs.jsCommonJS
qrcode.vue.esm.jsES module
qrcode.vue.browser.min.jsUMD (browser)

クイックスタート

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
  data: { value: 'https://example.com' },
  template: '<qrcode-vue :value="value"></qrcode-vue>',
  components: { QrcodeVue },
}).mount('#root')

コンポーネントプロパティ

プロパティタイプデフォルト説明
valuestring''QRコードにエンコードする内容。
sizenumber100QRコード要素のサイズ（幅と高さ）。ピクセル単位。
render-as'canvas' | 'svg''canvas'レンダリング形式。SSR 互換性には svg を使用してください。
marginnumber0QRコード周囲の静寂ゾーン（余白）の幅。
level'L' | 'M' | 'Q' | 'H''L'誤り訂正レベル。レベルが高いほど多くの損傷を復元できます。
backgroundstring'#ffffff'QRコードの背景色。
foregroundstring'#000000'QRコードモジュールの前景色。
radiusnumber0各モジュールの角丸比率（0 から 0.5）。0.5 で円形になります。
gradientbooleanfalseQRコードモジュールのグラデーション塗りつぶしを有効にします。
gradient-type'linear' | 'radial''linear'gradient 有効時のグラデーションタイプ。
gradient-start-colorstring'#000000'グラデーションの開始色。
gradient-end-colorstring'#ffffff'グラデーションの終了色。
image-settingsImageSettings{}ロゴ画像の設定。詳細は下記を参照。
idstringundefinedSVG 内部要素のカスタム ID。SSR ハイドレーションの一貫性のため useId() を渡してください。
classstring''QRコード要素に適用される CSS クラス名。

画像設定

type ImageSettings = {
  src: string            // URL of the logo image
  x?: number             // Horizontal offset (centers by default)
  y?: number             // Vertical offset (centers by default)
  height: number         // Height of the image in pixels
  width: number          // Width of the image in pixels
  excavate?: boolean     // Remove modules behind the image
  borderRadius?: number  // Border radius of the image
  crossOrigin?: 'anonymous' | 'use-credentials' | ''  // CORS attribute for the image
}

TypeScript 例

<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'

const value = ref('https://example.com')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
const background = ref('#ffffff')
const foreground = ref('#000000')
const margin = ref(0)

const imageSettings = ref<ImageSettings>({
  src: 'https://github.com/scopewu.png',
  width: 30,
  height: 30,
  excavate: true,
  // crossOrigin: 'anonymous', // Set this when exporting canvas to image
})

const gradient = ref(false)
const gradientType = ref<GradientType>('linear')
const gradientStartColor = ref('#000000')
const gradientEndColor = ref('#38bdf8')
const radius = ref(0)
</script>

テンプレート Ref メソッド

QrcodeCanvas と QrcodeSvg の両方がテンプレート ref を介して以下のメソッドを公開しています。生成されたQRコードは、ブラウザから直接ダウンロードできます。QrcodeVue は現在の render-as に応じてこれらを転送します：

コンポーネントメソッドシグネチャ説明
QrcodeCanvastoDataURL(type?: string, quality?: number) => string | undefinedQRコードを Data URL に変換します。
download(filename?: string) => voidQRコード画像のダウンロードを開始します。
QrcodeSvgtoDataURL() => string | undefinedSVG 要素を Data URL に変換します。
download(filename?: string) => voidQRコードを SVG 画像としてダウンロードします。

QrcodeCanvas

<script setup lang="ts">
import { ref } from 'vue'
import { QrcodeCanvas } from 'qrcode.vue'

const qrRef = ref()

const handleDownload = () => {
  qrRef.value?.download('my-qrcode.png')
}
</script>

<qrcode-canvas ref="qrRef" value="https://example.com" />

CORS 注意：QRコードにクロスオリジンのロゴ画像を含める場合、imageSettings.crossOrigin: 'anonymous' を設定し、画像サーバーが Access-Control-Allow-Origin ヘッダーを返すことを確認してください。そうでない場合、canvas が「汚染」され、toDataURL / download が SecurityError をスローします。

QrcodeSvg

<script setup lang="ts">
import { ref } from 'vue'
import { QrcodeSvg } from 'qrcode.vue'

const qrRef = ref()

const handleDownload = () => {
  qrRef.value?.download('my-qrcode.svg')
}
</script>

<qrcode-svg ref="qrRef" value="https://example.com" />

名前付きエクスポート (v3.5+)

v3.5から、QrcodeCanvas と QrcodeSvg コンポーネントが個別にエクスポートされます：

import { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'

// CommonJS / CDN usage
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')

プレビュー

生成されたコード

{{ usageExample }}

設定

画像設定