Complete sermon management system with Nuxt 4, authentication, SQLite database, QR codes, and Docker deployment

components/QRCodeButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <UButton
+    @click="showQRCode = true"
+    variant="ghost"
+    color="gray"
+    size="sm"
+    icon="i-heroicons-qr-code"
+    :aria-label="`Show QR code for ${title}`"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  url: string
+  title?: string
+}
+
+const props = defineProps<Props>()
+const showQRCode = ref(false)
+
+const fullUrl = computed(() => {
+  if (process.client) {
+    return `${window.location.origin}${props.url}`
+  }
+  return props.url
+})
+
+// Emit event to parent component to show modal
+const emit = defineEmits<{
+  click: [value: boolean]
+}>()
+
+watch(showQRCode, (open) => {
+  if (open) {
+    emit('click', open)
+  }
+})
+</script>