Examples
Basic
The simplest usage patterns to get you started.
Default
vue
<VueQRCode value="https://nuxt.com" />Custom size
vue
<VueQRCode value="https://nuxt.com" :size="200" />Error correction levels
Higher levels make the QR code denser but more resilient to damage.
level="L"level="M"level="Q"level="H"Custom background
vue
<VueQRCode
value="https://nuxt.com"
background="#1a1a2e"
:data-modules-settings="{ color: '#e0e0e0' }"
/>Multi-segment value
Pass an array to encode multiple QR segments, which can reduce the total data size.
vue
<VueQRCode :value="['https://', 'nuxt.com']" />Using the alias
<QrcodeNuxt> is an identical alias — use either name:
vue
<QrcodeNuxt value="https://nuxt.com" :size="200" />