Examples

Background

The background prop accepts either a hex color string or a GradientSettings object.

Solid color

vue

<VueQRCode
  background="#1e1b4b"
  :data-modules-settings="{ color: '#ffffff' }"
  :finder-pattern-outer-settings="{ color: '#ffffff' }"
  :finder-pattern-inner-settings="{ color: '#ffffff' }"
/>

Transparent background

Omit background to get a transparent SVG — great for overlaying on any surface:

vue

<!-- No background prop → transparent SVG -->
<VueQRCode :data-modules-settings="{ color: '#e0e7ff' }" />

Linear gradient background

vue

<VueQRCode
  :background="{
    type: 'linear',
    rotation: 45,
    stops: [
      { offset: '0%',   color: '#fff7ed' },
      { offset: '100%', color: '#eef6ff' },
    ],
  }"
/>

Background + foreground gradient

vue

<VueQRCode
  :background="{
    type: 'linear', rotation: 45,
    stops: [
      { offset: '0%',   color: '#0f172a' },
      { offset: '100%', color: '#1e1b4b' },
    ],
  }"
  :gradient="{
    type: 'linear', rotation: 135,
    stops: [
      { offset: '0%',   color: '#10b981' },
      { offset: '100%', color: '#3b82f6' },
    ],
  }"
  :data-modules-settings="{ style: 'rounded' }"
/>