QR-Code component for sli.dev
---
layout: center
addons:
- slidev-addon-qrcode
---
<div class="flex flex-col items-center">
# slidev-addon-qrcode
<QRCode
:width="300"
:height="300"
type="svg"
data="https://sli.dev"
:margin="10"
:imageOptions="{ margin: 10 }"
:dotsOptions="{ type: 'extra-rounded', color: 'purple' }"
image="/logo.svg"
/>
</div>
npm i slidev-addon-qrcode
- Define this addon in
frontmatter
addons:
- slidev-addon-qrcode
- or in
package.json
"slidev": {
"addons": [
"slidev-addon-qrcode"
]
},
<QRCode
:width="300"
:height="300"
type="svg"
data="https://sli.dev"
:margin="10"
:imageOptions="{ margin: 10 }"
:dotsOptions="{ type: 'extra-rounded', color: 'purple' }"
image="/logo.svg"
/>
Find more about options in qr-code-styling repo
- qr-code-styling - this addon use it under the hood