GitHub
Examples

Data Modules

The small squares that encode your data. Below are all supported styles with color and size variations.

Rounded

ts
dataModulesSettings: { style: 'rounded', color: '#10b981' }

Circle

ts
dataModulesSettings: { style: 'circle', color: '#3b82f6' }

Diamond

ts
dataModulesSettings: { style: 'diamond', color: '#8b5cf6' }

Star

ts
dataModulesSettings: { style: 'star', color: '#f59e0b' }

Heart

ts
dataModulesSettings: { style: 'heart', color: '#ef4444' }

Leaf

ts
dataModulesSettings: { style: 'leaf', color: '#22c55e' }

Circuit Board

ts
dataModulesSettings: { style: 'circuit-board', color: '#06b6d4', lineWidth: 0.42 }

Hashtag

ts
dataModulesSettings: { style: 'hashtag', color: '#a855f7' }

Square-sm

ts
dataModulesSettings: { style: 'square-sm', color: '#64748b' }

Random sizes

ts
dataModulesSettings: { style: 'circle', color: '#10b981', randomSize: true }

Custom size 0.7

ts
dataModulesSettings: { style: 'square', color: '#f97316', size: 0.7 }

Vertical line

ts
dataModulesSettings: { style: 'vertical-line', color: '#0ea5e9', lineWidth: 0.5 }

With gradient

When a gradient prop is set on the parent, it takes precedence over dataModulesSettings.color:

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