Creare QR Code in Vue.js

Per Vue.js abbiamo diverse librerie per creare QR Code.

In questo articolo vediamo come usare vue-qrcode.

Possiamo installarla tramite npm:

npm i vue-qrcode

Fatto questo non ci resta che mettere tutto dentro al nostro componente:

<template>
  <main>
    <vue-qrcode value="https://www.mattepuffo.com"
                @change="onDataUrlChange"
                margin="10"
                width="500"
                quality="1"/>
  </main>
</template>

<script>
import VueQrcode from 'vue-qrcode';

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

Di tutte le varie opzioni che ci stanno l'unica non ben documentata è il color.

Ho provato in varie forme/colori, ma non sono riuscito a cambiarlo.

Per il resto è abbastanza semplice da usare.

Enjoy!