Skip to content
Go to file

Travis npm npm


You should read it before you using vue-qart

because of qart.js's author doesn't publish the lastest version to npm. so, the new options size, version,background,fillType doesn't work in vue-qart until qart.js' author publish the lastest version.

For More Detail, seeing this issue: size option doesn't works

the Vue 2.x Component for kciter's qart.js

Check the DEMO


install with NPM

npm install vue-qart --save


import VueQArt from 'vue-qart'

new Vue({
    components: {VueQArt}


In template

<vue-q-art :config="config"></vue-q-art>

Set config value

data () {
    return {
        msg: 'Welcome to Your Vue.js App',
        config: {
            value: '',
            imagePath: './examples/assets/logo.png',
            filter: 'color'

for imagePath prop, you can use base64 instead of image path.

For more details you should definitely check out qart.js

download to image

passing download props, to show download button, it support:

  • text - button text
  • visible - setting download button visible or not
  • style - setting download button style
  • type - image type,such as image/png
  • filename

you can download the qrcode to image by using canvas.toDataURL()

const myCanvas = this.$refs.qart.children[0];
const type = 'image/png';
let image = myCanvas.toDataURL(type).replace(type, "image/octet-stream");
window.location.href = image; // it will save locally

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080/demo/
npm run dev

# build demo 
npm run demo

# export the directive as a library
npm run build


the compoent of vue 2.x for qart.js





No packages published
You can’t perform that action at this time.