vue3-qr-code-styled-component v0.1.2

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

<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