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

components/QRCodeButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    @click="showModal = true"
+    class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+  >
+    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
+    </svg>
+    QR Code
+  </button>
+
+  <QRCodeModal 
+    v-if="showModal" 
+    :sermon="sermon" 
+    @close="showModal = false" 
+  />
+</template>
+
+<script setup lang="ts">
+interface Sermon {
+  id?: number
+  slug: string
+  title: string
+  date: string
+  bible_references: string
+  personal_appliance: string
+  pastors_challenge: string
+}
+
+defineProps<{
+  sermon: Sermon
+}>()
+
+const showModal = ref(false)
+</script>