slidev-addon-qrcode

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>

Installation

npm i slidev-addon-qrcode

Usage

• Define this addon in frontmatter

addons:
    - slidev-addon-qrcode

• or in package.json

 "slidev": {
    "addons": [
      "slidev-addon-qrcode"
    ]
  },

Components

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

Thanks

• qr-code-styling - this addon use it under the hood