API Reference

DataModulesSettings

Controls the appearance of the small data squares that encode the actual QR information. These are every module that is not part of the three corner finder patterns.

Props

Prop	Type	Default	Description
`style`	`DataModulesStyle`	`'square'`	The shape of each data module.
`color`	`string`	`'#000000'`	Fill color applied when no gradient is set on the parent component.
`randomSize`	`boolean`	`false`	Randomize module sizes for a scattered look. Only works with: square, pinched-square, circle, diamond, star, heart, hashtag.
`size`	`number`	`1`	Fixed size multiplier (0–1). Recommended range: 0.75–1. Only applies when randomSize is false.
`lineWidth`	`number`	`1 (0.5 for circuit-board)`	Stroke width for connected-shape styles: vertical-line, horizontal-line, rounded (sub-1), circuit-board.

Style gallery

Click a style to see it live:

vue

<VueQRCode
  value="https://nuxt.com"
  :data-modules-settings="{
    style: 'rounded',
    color: '#10b981',
  }"
/>

DataModulesStyle values

type DataModulesStyle =
  | 'square'
  | 'square-sm'
  | 'pinched-square'
  | 'rounded'
  | 'leaf'
  | 'vertical-line'
  | 'horizontal-line'
  | 'circuit-board'
  | 'circle'
  | 'diamond'
  | 'star'
  | 'heart'
  | 'hashtag'

randomSize and size only take effect for: square, pinched-square, circle, diamond, star, heart, hashtag.

lineWidth only applies to: vertical-line, horizontal-line, rounded (when <1), and circuit-board.