# vue3-qr-code-styled-component

This is based on https://github.com/diadal/vue3-qr-code-styling, which stopped working, when we upgraded to Vue 3 + Typescript.

This supports Vue 3 + Typescript.

## Installation

    npm install vue3-qr-code-styled-component

or

    yarn add vue3-qr-code-styled-component

## Usage

### Usage

```HTML
<template>
  <div>
   <QRCode
          :width="200"
          :height="200"
          data="https://diadal.com.ng"
          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
          :dotsOptions="{
            type: 'dots',
            color: '#26249a',
            gradient: {
              type: 'linear',
              rotation: 0,
              colorStops: [
                { offset: 0, color: '#26249a' },
                { offset: 1, color: '#26249a' },
              ],
            },
          }"
          :backgroundOptions="{ color: '#ffffff' }"
          image="https://diadal.com.ng/icons/favicon-96x96.png"
          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
          :cornersDotOptions="{ type: undefined, color: '#000000' }"
          fileExt="png"
          :download="true"
          myclass="my-qur"
          imgclass="img-qr"
          downloadButton="my-button"
          :downloadOptions="{ name: 'vqr', extension: 'png' }"
        >
    </QRCode>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  defineAsyncComponent
} from 'vue'
import QRCode from "vue3-qr-code-styled-component";

export default defineComponent({
  name: 'QRCode',
  components: {
    QRCode,
  },
  setup () {
    return {
    }
  }
})
</script>

<style lang="sass">
.my-qur
//   overflow-wrap: anywhere
</style>
```

## Documentation

Available at https://github.com/diadal/vue3-qr-code-styling

## Building

    yarn
    rm -rf dist
    yarn build-lib 
    yarn type-comps


### License

[MIT License](https://raw.githubusercontent.com/diadal/vue3-qr-code-styling/master/LICENSE)