Qr Code Reader Laravel Package

Getting Started

1. Install via Composer (Nova packages are typically auto-discovered through extra.laravel.providers, but confirm — if the field doesn't appear, add Tsungsoft\QrCodeReader\FieldServiceProvider to config/app.php):

   composer require tsungsoft/qr-code-reader
   

   Given the 2019 release date, you may need to pin a version ("^1.0") or fall back to dev-master if the default constraint resolves to something incompatible with your Nova version.

2. Read the source before you rely on it. The package is tiny (9 stars, 0 dependents, no updates since Nov 2019) — vendor/tsungsoft/qr-code-reader/src/ and its resources/js/ are worth 15 minutes. You need to know: does it decode server-side (PHP GD/Imagick) or client-side (jsQR/qrcode-reader in Vue)? Which model attribute does it read from — a stored image path, a URL, or a base64 blob? That answer drives everything in the "Implementation Patterns" section.

3. First use case — display a decoded QR on a Nova detail page. Attach it to a Text/File column that stores the QR image path:

   use Tsungsoft\QrCodeReader\QrCodeReader;
   
   public function fields(NovaRequest $request)
   {
       return [
           // ... other fields
           QrCodeReader::make('QR Code', 'qr_code_image')
               ->onlyOnDetail(),
       ];
   }
   

   Run php artisan nova:publish (or just open the detail view) so Nova compiles the field's Vue component into public/vendor/tsungsoft/. Then open a record and verify the decoded payload appears.

Implementation Patterns

Detail-view decode for ops/support. The natural fit is a ->onlyOnDetail() field on resources where a QR image was captured elsewhere — event tickets, equipment labels, shipping labels, business cards. Pair with a File/Image field on the form so the upload and the decode live on the same resource:

Image::make('QR Image', 'qr_code_image')->disk('public'),
QrCodeReader::make('Decoded', 'qr_code_image')->onlyOnDetail(),

Form-then-display workflow. Upload happens through a standard File::make(). On saved, the QR field decodes on next page load. If you need the decoded value at write time (e.g., to route on it), hook Nova::saving() or a model observer and call the same decoder the field uses — but note that logic lives in the Vue component or a helper, so you may be re-implementing it in PHP (khanamiryan/qrcode-detector-decoder is the usual choice).

Index view sparingly. Index tables render every row at once; if the decode is client-side and each row spins up a canvas decode, large lists get janky. Either ->hideFromIndex() or restrict to ~10 rows per page until you've measured.

Passing options via withMeta. Standard Nova extension point — pass scan region, foreground/background, or a decode: false flag if the Vue component reads them:

QrCodeReader::make('QR')->withMeta(['decodeOnLoad' => true])

Combine with actions for downstream work. Once the payload is visible, wire a Nova Action next to it that consumes it (e.g., MarkTicketUsed, LookupOrder). This is where the field earns its keep — decode is the read side, actions are the write side.

Fork the Vue component if you need customization. The compiled asset in public/vendor/tsungsoft/ is not editable; copy resources/js/ into a local nova-components/ package if you need tooltips, copy-to-clipboard, or error states. This is the only realistic "extension point" for a package this size.

Gotchas and Tips

• Nova version compatibility is the #1 risk. Last release is 2019 — that predates Nova 4 (Vue 3). On Nova 4/5 the field's compiled Vue 2 component will silently fail or throw a console error. Test on a staging Nova instance before merging into a resource class. If it breaks, budget for a custom field (a Text field with a small Vue component calling jsQR is ~80 lines).
• CORS and canvas taint. Client-side QR reading typically draws the image to a <canvas> and runs getImageData. Cross-origin image URLs (S3, CDN, a different subdomain) taint the canvas and throw SecurityError. Fixes: serve through a signed same-origin route, fetch as base64 on the server side, or set CORS headers on the bucket.
• Server-side decode dependencies. If the package decodes in PHP it likely needs GD or Imagick enabled and a QR library under the hood. Check composer.json for those. Missing gmp/gd extensions will fail with unhelpful errors at decode time, not install time.
• Large images are slow. A 5MB phone-photo QR takes seconds to decode client-side and can hang the detail view. Resize on upload (Intervention Image) and store a thumbnail-sized copy for decoding.
• Debugging. Open browser devtools on the detail page. If the field renders blank, check (a) the compiled asset exists in public/vendor/tsungsoft/, (b) the field's component name matches a registered Vue component, (c) Vue.config.devtools isn't hiding warnings. php artisan nova:publish after any package re-install.
• No tests, no maintainer activity, 0 dependents. Treat it as vendored code, not a dependency. Pin the version, add an @var note in the resource, and plan to replace it. A cleaner long-term path: skip the package and use the ~50-line alternative — a Text::make('Decoded') plus a tiny custom Nova component running jsQR. That gives you Nova 4/5 compatibility for free.
• Config quirks. If it ships a config file (config/qr-code-reader.php), publish it with php artisan vendor:publish --tag=... before adjusting. If it doesn't, withMeta is your only knob.
• Alternative if it's dead on your Nova version: keep the field for display only — store the raw decode result in a DB column (qr_decoded) written by an observer using khanamiryan/qrcode-detector-decoder on save — and render with a plain Text field. You lose nothing operationally and stop fighting a 2019 package.