Blade component

The <x-qr-code> component renders any string or Payload inline, or as an <img> with a data URI:

<x-qr-code data="https://example.com" />
<x-qr-code :data="$payment" :size="200" :margin="2" error-correction="Q" foreground="#111111"
           background="#ffffff" title="Scan to pay" description="Invoice 2026-0042" class="mx-auto" />
<x-qr-code data="https://example.com" as="img" class="w-40" />

• Props — data (string or Payload), size, margin, error-correction, foreground, background, title, description, as (svg or img).
• Attributes are allow-listed (class, style, id, data-*, aria-*); anything else, such as onclick, is dropped.
• The generated markup is never compiled as a Blade template, so a title like {{ 7*7 }} renders escaped and no compiled view is written per code.

Renaming or disabling the tag

The tag name comes from qr.blade.component:

'blade' => ['component' => 'qr-code'],   // <x-qr-code>; null or blank (not set) disables it