Vue Example Integration

<template>
  <form @submit.prevent="handleGenerate">...</form>
  <div v-if="result" v-html="result.qr" class="qr-svg-container" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const vpa = ref('');
const name = ref('');
const amount = ref('');
const result = ref(null);
const loading = ref(false);
const upiqrcodeLib = ref(null);

onMounted(async () => {
  try {
    const mod = await import('https://cdn.jsdelivr.net/npm/upiqrcode@1.5.5/upiqrcode.js');
    await mod.default(); // Initialize WASM
    upiqrcodeLib.value = mod;
  } catch (err) {
    console.error('Failed to load upiqrcode library', err);
  }
});

const handleGenerate = async () => {
  if (!vpa.value || !name.value) return;
  loading.value = true;
  try {
    const params = {
      payeeVPA: vpa.value,
      payeeName: name.value,
      currency: 'INR',
    };
    if (amount.value) params.amount = parseFloat(amount.value).toFixed(2);
    
    result.value = await upiqrcodeLib.value.upiqrcode(params);
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};
</script>

<style>
.qr-svg-container :deep(svg) {
  width: 200px !important;
  height: 200px !important;
}
</style>