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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAASQSURBVHhe7d3RjuM6DAPQ9v8/erb3MS6QA0Jum95ygX1SLNukRMlOZuZ+u93+Hv/f9u/v7zjd/X4fzZ36W5/X5NP1yf9q/w+NEnKCWgkJQ6oZEgK2Pp4CqOlSf18nWemCBdia8lP/qYRoPq1Pdu1f9tX/Uw3RBjTBU5FaivbUfwlJGVie3x1hJaSEHBCYZrgUhJI1jcg0Q/R8alc8CeBXzxfXkBJyPLimXV3aZTZDlpsDSUoJwVXLboBKCERekpnWgLSm/HwNUYRKk9Px8ldCcI4RgCVkQUCaLolJAZU/SZ4IboaEGaKasBtwBZzWo/GXa3vTDBEAJSRsUwVoKjnypwid2qfzN0NwG325GiLGZdeGJFG7I3bqT02E8NB+mSHpBJpQGxKBqf3VNWQ3PiVkKFklJATw6zNkyrjG79bwVMKm82t/U/vlvsuaAvbq8VPANb6EDCVQAKf2EnI1Qh4p/tZPSdUWqwhrvCRLEfthOG73EnKkqITg63cBlHZZzRAgoMvDnyPkgddpDUk1Wc9PAVYNSTMgzTCtX/Nr/eyyBLCKsDasBQoAZdh0fen6S0j4E1gKsNSeEqAAbIaE5xBlbErQ+FNSRVAqEenzKSCppKXrSQmg/7WoC3DZOWHY5k41vIQsjOwmsBkSamwzJBOxp4CVZKkrmBKg5SsjJGmpZL07o+OiXkLOf7GBCEwDKn6nrojTApURyjgFyHT+dLyeLyHDX90hgBUwklAFFK/flRGK+DRC9Lzm04YFqPwL8CleJSR8P1dCFLKwK2LTjCwhJeSIgCJCeKURmj6f1gytV/Y0o+Tv6RzymOD0BVUJOUJaQnA31gwZdiVqO39esnSXJcmSPdVQPa+DmyRlSrgyMp0/vlwU4LILYAGUZlQKiPyn60/nLyHhC7ISAgR+TrIUEWmKv1uSpPGf3p/m51cncpBqZurv3TXq1QGn/ZeQUCJ3Z+CTv7XtFYOvjqBpjdgN2G4FEL7xG8N0w9MNTcenAUTAwi5Nkjt+p15C9r5jLyHh1c80AJshwyJ9eclKzxHa0O6akNaI3fvR/JpvfHUiwGUvIUeESkj48yQKsGbIsEZIQlICthOiV7jTBWq8uhB1OZJAjReg714/v8vSgqb2ErL8kbRmyHmRVcDtDqhmyIL4VAI1XgSOb3sVQalGq+jq8lHr0fipfbrfEhL+hJgIKyHhuUKATu0l5P9OiIqSNFp9v/yz6H1YYqb7E37jF1ScIPw7hiVk+W1AimARMI2gElJCDjGUBqQCKA7gx4DD2V1dhibQ+KldXYwA0jlH+0vtIjh+hZtuYAq4xpeQL2srmyG4C0oBaoZ8WQ15NWHqEl8tmTyHXK2GlJCL1ZASUkJOO10FiOxPEvnpc0ja1+9uEnRO2F1TtN+P1xAtUIAoAlO71qOaqvnovxmS/XGIErKE1M9LllJM9hRA+UvtkhDZd88nf6whciB7CTn/eZK4yxLgspeQEnKIEUmS7Aq49CpF/j7+GZC6Fm1Adp0z0gye+lMbX0KGH00I4JTAElJClq+9w7sySZQ0PY1oSVrqT8//AyMIkCJ1hyRLAAAAAElFTkSuQmCC

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