API Reference

GradientSettings

Used by both the gradient prop (foreground elements) and the background prop (when passing an object instead of a color string).

Props

Prop	Type	Default	Description
`type`*	`'linear' \| 'radial'`	—	Gradient type.
`stops`*	`GradientSettingsStop[]`	—	Array of color stops. Each stop has an offset (e.g. '0%') and a color string.
`rotation`	`number`	—	Rotation angle in degrees. Only applies to linear gradients.

GradientSettingsStop

Prop	Type	Default	Description
`offset`*	`string`	—	Position in the gradient, e.g. '0%', '50%', '100%'.
`color`*	`string`	—	Any valid CSS color value.

Linear gradient

vue

<VueQRCode
  value="https://nuxt.com"
  :gradient="{
    type: 'linear',
    rotation: 135,
    stops: [
      { offset: '0%',   color: '#10b981' },
      { offset: '100%', color: '#3b82f6' },
    ],
  }"
/>

Radial gradient

vue

<VueQRCode
  value="https://nuxt.com"
  :gradient="{
    type: 'radial',
    stops: [
      { offset: '0%',   color: '#f59e0b' },
      { offset: '100%', color: '#ef4444' },
    ],
  }"
/>

Gradient background

Pass a GradientSettings object to the background prop:

vue

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