Examples

Image

Embed any image (logo, icon, watermark) inside the QR code using the imageSettings prop. Always pair with level="H".

Use level="H" when embedding images — the higher error correction compensates for the obscured modules.

Basic image embed

vue

<VueQRCode
  value="https://nuxt.com"
  level="H"
  :image-settings="{
    src: '/logo.png',
    width: 40,
    height: 40,
    excavate: true,
  }"
/>

Without excavation

Set excavate: false to overlay the image without clearing the QR modules behind it:

vue

<VueQRCode
  level="H"
  :image-settings="{
    src: '/logo.png',
    width: 40,
    height: 40,
    excavate: false,
    opacity: 0.8,
  }"
/>

Custom position

Use x and y to offset the image from the default center position:

vue

<VueQRCode
  level="H"
  :image-settings="{
    src: '/logo.png',
    width: 30,
    height: 30,
    x: 5,
    y: 5,
    excavate: true,
  }"
/>

x and y are in QR module units, not pixels. The number of modules depends on the QR version (data density).