Complete sermon itinerary application with Nuxt 3, SQLite, authentication, and Docker deployment

components/QRCodeModal.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" @click.self="$emit('close')">
+    <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-semibold text-gray-900">Scan to View Sermon</h3>
+        <button
+          @click="$emit('close')"
+          class="text-gray-400 hover:text-gray-600"
+        >
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      
+      <div class="flex flex-col items-center">
+        <div class="bg-white p-4 rounded-lg border-2 border-gray-200">
+          <canvas ref="qrCanvas"></canvas>
+        </div>
+        <p class="mt-4 text-sm text-gray-600 text-center">{{ sermon.title }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode'
+
+interface Sermon {
+  id?: number
+  slug: string
+  title: string
+  date: string
+  bible_references: string
+  personal_appliance: string
+  pastors_challenge: string
+}
+
+const props = defineProps<{
+  sermon: Sermon
+}>()
+
+defineEmits<{
+  close: []
+}>()
+
+const qrCanvas = ref<HTMLCanvasElement | null>(null)
+const config = useRuntimeConfig()
+
+onMounted(async () => {
+  if (qrCanvas.value) {
+    const url = `${config.public.siteUrl}/${props.sermon.slug}`
+    await QRCode.toCanvas(qrCanvas.value, url, {
+      width: 256,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF'
+      }
+    })
+  }
+})
+</script>