qrcode
nuxt-qrcode

QRコードの生成と読み取りをサポートするNuxtモジュール。
10.3Kダウンロード65スターv0.4.8
sandros94sandros94

Nuxt QRCode

npm versionnpm downloadsLicenseNuxt

Nuxt QRCodeは、QRコードの読み取りと作成を簡単にサポートするモジュールです。

現在のロードマップ

現在取り組んでおり、今後数日/数週間でリリースを予定している機能は以下の通りです。

  • QRコードの読み取り
    • vue-qrcode-readerからアップストリームコンポーネントを提供
    • アップストリームコンポーネントと連携するユーティリティ満載のcomposable（クライアントサイドのみ）
    • 独自のNuxtコンポーネントを提供し、アップストリームコンポーネントを独自のロジックでラップ
  • QRコードの生成
    • unjs/uqrからアップストリームを提供
    • QRコードを生成するためのユーティリティ満載のcomposable
      • サーバーユーティリティ（base64画像サポート付き）
      • クライアントユーティリティ（base64画像サポート付き）
    • QRコードをレンダリングするためのカスタムNuxtコンポーネントを提供
      • SVG
      • PNG
  • ✨  リリースノート

機能

  • ✨  使いやすさ
  • 🔋  バッテリー内蔵（独創的なコンポーネント）
  • 🧩  拡張性（アップストリームコンポーネント + このモジュールからのユーティリティ関数）
  • 📷  QRコードの読み取り
  • 📝  QRコードの作成
  • 📘  Typescriptのサポート

クイックセットアップ

  1. プロジェクトにnuxt-qrcodeの依存関係を追加してください。
# Using pnpm
pnpm add -D nuxt-qrcode

# Using yarn
yarn add --dev nuxt-qrcode

# Using npm
npm install --save-dev nuxt-qrcode
  1. nuxt-qrcodeをnuxt.config.tsのmodulesセクションに追加してください。
export default defineNuxtConfig({
  modules: [
    'nuxt-qrcode'
  ]
})

これで完了です！NuxtアプリでNuxt QRCodeを使用できるようになりました ✨

使い方

デフォルトのカスタマイズ

nuxt.config.ts内でデフォルトオプションを設定できます。

QrcodeとuseQrcode

以下のようなものをカスタマイズできます。

  • デフォルトのバリアントスタイル
  • 半径（0はなし、1は完全）
  • そして、白黒ピクセルのCSSカラー
export default defineNuxtConfig({
  modules: ['nuxt-qrcode'],

  qrcode: {
    options: {
      variant: 'pixelated',
      // OR
      variant: {
        inner: 'circle',
        marker: 'rounded',
        pixel: 'rounded',
      },
      radius: 1,
      blackColor: 'currentColor', // 'var(--ui-text-highlighted)' if you are using `@nuxt/ui` v3
      whiteColor: 'transparent',  // 'var(--ui-bg)'
    },
  },
})

コンポーネントの使用

Qrcode

Qrcodeコンポーネントは、動作するためにvalueプロパティのみを必要とします。

<template>
  <div>
    <Qrcode
      value="My string to encode"
      variant="pixelated"
    />
  </div>
</template>

ただし、nuxt.config.tsのqrcode.optionsで利用可能なすべてのプロパティも受け入れます。

QrcodeStream

デバイスのカメラからのライブフィードをキャプチャしてデコードするための、すぐに使えるコンポーネントです。使い方はこれと同じくらい簡単です。

<template>
  <div>
    <QrcodeStream
      @error="onError"
      @detect="onDetect"
    />
  </div>
</template>

<script setup lang="ts">
import type { DetectedBarcode } from 'nuxt-qrcode'

function onDetect(detectedCodes: DetectedBarcode[]) {
  // do something with decoded qrcodes `DetectedBarcode['rawValue']
}

function onError(err: Error) {
  // do something on stream error
}
</script>

QrcodeCaptrueとQrcodeDropZone

これらのコンポーネントの使用方法については、qrcode.s94.devのドキュメントを参照してください。

開発

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

ライセンス

MITライセンスの下で公開されています。