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

components/SermonCard.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
+    <div class="p-6">
+      <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ sermon.title }}</h3>
+      <p class="text-sm text-gray-500 mb-4">{{ formatDate(sermon.date) }}</p>
+      
+      <div class="flex items-center justify-between">
+        <NuxtLink 
+          :to="`/${sermon.slug}`"
+          class="text-blue-600 hover:text-blue-700 font-medium text-sm"
+        >
+          View Sermon →
+        </NuxtLink>
+        
+        <QRCodeButton :sermon="sermon" />
+      </div>
+    </div>
+  </div>
+</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
+}>()
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  })
+}
+</script>