Vue.js QR Code Integration

import { ref, watch } from 'vue';

export function useQRCode(initialData) {
  const qrUrl = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const generate = async (data, size = 200) => {
    if (!data) return;
    
    loading.value = true;
    error.value = null;

    try {
      const response = await fetch('https://www.qrcodeapi.io/api/generate', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${import.meta.env.VITE_QR_API_KEY}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ data, size, format: 'png' })
      });

      if (!response.ok) throw new Error('Failed');

      const blob = await response.blob();
      qrUrl.value = URL.createObjectURL(blob);
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  if (initialData) generate(initialData);

  return { qrUrl, loading, error, generate };
}

<script setup>
import { useQRCode } from './useQRCode';

const props = defineProps({
  data: { type: String, required: true },
  size: { type: Number, default: 200 }
});

const { qrUrl, loading, error } = useQRCode(props.data);
</script>

<template>
  <div class="qr-code">
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <img v-else :src="qrUrl" alt="QR Code" :width="size" />
  </div>
</template>

<script setup>
import QRCode from './components/QRCode.vue';
</script>

<template>
  <QRCode data="https://example.com" :size="300" />
</template>