VueQrious

🤳 A Vue component for QR code generation with qrious

Demo

background(color)
backgroundAlpha(0.1-1.0)
foreground(color)
foregroundAlpha(0.1-1.0)
level
mime
padding(px)
size(px)
valuehttp://www.1stg.me

Usage

vue

<template>
  <vue-qrious
    value="https://www.1stg.me"
    @change="onDataUrlChange"
  />
</template>
<script>
import VueQrious from 'vue-qrious'

export default {
  data() {
    return {
      dataUrl: null,
    }
  },
  components: {
    VueQrious,
  },
  methods: {
    onDataUrlChange(dataUrl) {
      this.dataUrl = dataUrl
    },
  },
}
</script>

Available Props

prop	type (range)	default value
`background`	`string` (CSS color)	`"#ffffff"`
`backgroundAlpha`	`number` (0.1-1.0)	`1.0`
`foreground`	`string` (CSS color)	`"#000000"`
`foregroundAlpha`	`number` (0.1-1.0)	`1.0`
`level`	`string` ("L", "M", "Q", "H")	`"L"`
`mime`	`string` ("image/png", "image/jpeg")	`"image/png"`
`padding`	`number`	`null`
`size`	`number`	`100`
`value`	`string`	N/A