<template>
  <canvas ref="canvasEl" />
</template>

<script setup>
import QRCode from 'qrcode'

const props = defineProps({
  value: {
    type: String,
    required: true,
  },
  size: {
    type: Number,
    default: 128,
  },
})

const canvasEl = ref()

onMounted(async () => {
  try {
    await QRCode.toCanvas(canvasEl.value, props.value, { margin: 1, width: props.size })
  }
  catch (e) {
    console.error(e)
  }
})
</script>
