From 839a98a6581fd0a1dca29ebb6fe98960fd11e51b Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Fri, 27 Feb 2026 17:00:11 +0000
Subject: [PATCH] feat: add QR Scanner tool with history, export, persistence
 and fullscreen support

---
 package-lock.json                  |  64 ++++
 package.json                       |   1 +
 src/components/Sidebar.vue         |   1 +
 src/components/tools/QrScanner.vue | 584 +++++++++++++++++++++++++++++
 src/router/index.js                |   6 +
 vite.config.js                     |   6 +
 6 files changed, 662 insertions(+)
 create mode 100644 src/components/tools/QrScanner.vue

diff --git a/package-lock.json b/package-lock.json
index 127c6eb..d258f5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "lucide-vue-next": "^0.575.0",
         "vue": "^3.5.25",
+        "vue-qrcode-reader": "^5.7.3",
         "vue-router": "^5.0.3"
       },
       "devDependencies": {
@@ -2514,6 +2515,18 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.18.tgz",
+      "integrity": "sha512-vAvE8C9DGWR+tkb19xyjk1TSUlJ7RUzzp4a9Anu7mwBT+fpyePWK1UxmH14tMO5zHmrnrRIMg5NutnnDztLxgg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.41.5",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
+      "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2907,6 +2920,16 @@
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/barcode-detector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
+      "integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/dom-webcodecs": "^0.1.11",
+        "zxing-wasm": "1.1.3"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -5235,6 +5258,12 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "license": "MIT"
     },
+    "node_modules/sdp": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
+      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -6094,6 +6123,19 @@
         }
       }
     },
+    "node_modules/vue-qrcode-reader": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-5.7.3.tgz",
+      "integrity": "sha512-iSGko42FsEvdHyizBMBs/X+HMO9Z5ONDxjW+mQdoraOR5emRNedmjC5SEJdYzGz8ZP5ME3lwB4iHy3S7MOt5Qw==",
+      "license": "MIT",
+      "dependencies": {
+        "barcode-detector": "2.2.2",
+        "webrtc-adapter": "8.2.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",
@@ -6152,6 +6194,19 @@
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -6619,6 +6674,15 @@
       "funding": {
         "url": "https://github.com/sponsors/eemeli"
       }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
+      "integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "^1.39.10"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index fb6a8d0..6d051a6 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "lucide-vue-next": "^0.575.0",
     "vue": "^3.5.25",
+    "vue-qrcode-reader": "^5.7.3",
     "vue-router": "^5.0.3"
   },
   "devDependencies": {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index f61ef26..0b85956 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -13,6 +13,7 @@ defineProps({
       <router-link to="/passwords" class="nav-item" v-ripple>Passwords</router-link>
       <router-link to="/clipboard-sniffer" class="nav-item" v-ripple>Clipboard Sniffer</router-link>
       <router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
+      <router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
     </nav>
   </aside>
 </template>
diff --git a/src/components/tools/QrScanner.vue b/src/components/tools/QrScanner.vue
new file mode 100644
index 0000000..d606f73
--- /dev/null
+++ b/src/components/tools/QrScanner.vue
@@ -0,0 +1,584 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { QrcodeStream } from 'vue-qrcode-reader'
+import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
+
+const error = ref('')
+const facingMode = ref('environment')
+const scannedCodes = ref([])
+const hasMultipleCameras = ref(false)
+const isFullscreen = ref(false)
+
+const processCodes = (codes) => {
+  codes.forEach(code => {
+    const value = code.rawValue
+    if (value && !scannedCodes.value.some(c => c.value === value)) {
+      scannedCodes.value.unshift({
+        id: Date.now() + Math.random(),
+        value,
+        format: code.format,
+        timestamp: new Date().toLocaleTimeString()
+      })
+    }
+  })
+}
+
+const onDetect = (detectedCodes) => {
+  // If fullscreen, accept all detected codes (as the user sees the full camera view mostly)
+  if (isFullscreen.value) {
+    processCodes(detectedCodes)
+    return
+  }
+
+  // Try to find video element to calculate visible area
+  const videoEl = document.querySelector('.camera-wrapper video')
+
+  if (!videoEl || !videoEl.videoWidth || !videoEl.videoHeight) {
+    processCodes(detectedCodes)
+    return
+  }
+
+  const { videoWidth, videoHeight } = videoEl
+
+  // Calculate visible square area (assuming object-fit: cover and 1:1 container)
+  const isLandscape = videoWidth > videoHeight
+  let visibleX, visibleY, visibleW, visibleH
+
+  if (isLandscape) {
+    // Landscape: sides are cropped, height is fully visible
+    visibleH = videoHeight
+    visibleW = videoHeight // Square
+    visibleX = (videoWidth - videoHeight) / 2
+    visibleY = 0
+  } else {
+    // Portrait: top/bottom are cropped, width is fully visible
+    visibleW = videoWidth
+    visibleH = videoWidth // Square
+    visibleX = 0
+    visibleY = (videoHeight - videoWidth) / 2
+  }
+
+  // Add margin to be safe (code center must be within visible area)
+  // We allow codes slightly outside if their center is inside
+  const validCodes = detectedCodes.filter(code => {
+    if (!code.boundingBox) return true
+    const { x, y, width, height } = code.boundingBox
+    const centerX = x + width / 2
+    const centerY = y + height / 2
+
+    return (
+      centerX >= visibleX &&
+      centerX <= visibleX + visibleW &&
+      centerY >= visibleY &&
+      centerY <= visibleY + visibleH
+    )
+  })
+
+  processCodes(validCodes)
+}
+
+const onCameraOn = async (capabilities) => {
+  // Camera is ready
+}
+
+const onError = (err) => {
+  if (err.name === 'NotAllowedError') {
+    error.value = 'Camera permission denied'
+  } else if (err.name === 'NotFoundError') {
+    error.value = 'No camera found'
+  } else {
+    error.value = `Camera error: ${err.name}`
+  }
+}
+
+const checkCameras = async () => {
+  try {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+      return
+    }
+    const devices = await navigator.mediaDevices.enumerateDevices()
+    const cameras = devices.filter(d => d.kind === 'videoinput')
+    hasMultipleCameras.value = cameras.length > 1
+  } catch (e) {
+    console.error('Error checking cameras:', e)
+  }
+}
+
+const loadHistory = () => {
+  try {
+    const saved = localStorage.getItem('qr-history')
+    if (saved) {
+      scannedCodes.value = JSON.parse(saved)
+    }
+  } catch (e) {
+    console.error('Failed to load QR history', e)
+  }
+}
+
+watch(scannedCodes, (newVal) => {
+  localStorage.setItem('qr-history', JSON.stringify(newVal))
+}, { deep: true })
+
+onMounted(() => {
+  checkCameras()
+  loadHistory()
+})
+
+const switchCamera = (event) => {
+  event.stopPropagation()
+  facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+}
+
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+}
+
+const clearHistory = () => {
+  scannedCodes.value = []
+}
+
+const removeCode = (id) => {
+  scannedCodes.value = scannedCodes.value.filter(c => c.id !== id)
+}
+
+const copyAll = async () => {
+  if (scannedCodes.value.length === 0) return
+  const text = scannedCodes.value.map(c => c.value).join('\n')
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy', err)
+  }
+}
+
+const downloadJson = () => {
+  if (scannedCodes.value.length === 0) return
+  const data = JSON.stringify(scannedCodes.value, null, 2)
+  const blob = new Blob([data], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `qr-scan-history-${new Date().toISOString().slice(0, 10)}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+const copyToClipboard = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy', err)
+  }
+}
+
+const isUrl = (string) => {
+  try {
+    return Boolean(new URL(string))
+  } catch (_) {
+    return false
+  }
+}
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header" v-if="!isFullscreen">
+        <h2 class="tool-title">QR Scanner</h2>
+      </div>
+
+      <Teleport to="body" :disabled="!isFullscreen">
+        <div class="scanner-content" :class="{ 'is-fullscreen': isFullscreen }">
+          <button v-if="isFullscreen" class="close-fullscreen-btn" @click="toggleFullscreen">
+            <X size="24" />
+          </button>
+
+          <div class="camera-wrapper" :class="{ 'clickable': !isFullscreen }" @click="!isFullscreen && toggleFullscreen()">
+            <QrcodeStream
+              :constraints="{ facingMode }"
+              @detect="onDetect"
+              @error="onError"
+              @camera-on="onCameraOn"
+            >
+              <div v-if="error" class="error-overlay">
+                <p>{{ error }}</p>
+              </div>
+
+              <button
+                v-if="hasMultipleCameras"
+                class="switch-camera-btn"
+                @click.stop="switchCamera"
+                title="Switch Camera"
+              >
+                <SwitchCamera size="24" />
+              </button>
+
+              <div class="scan-overlay">
+                <div class="scan-frame"></div>
+              </div>
+            </QrcodeStream>
+          </div>
+
+          <div class="results-section">
+            <div class="results-header">
+              <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
+              <div v-if="scannedCodes.length > 0" class="header-actions">
+                <button class="icon-btn" @click="copyAll" title="Copy All">
+                  <Copy size="18" />
+                </button>
+                <button class="icon-btn" @click="downloadJson" title="Download JSON">
+                  <Download size="18" />
+                </button>
+                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
+                  <Trash2 size="18" />
+                </button>
+              </div>
+            </div>
+
+            <div v-if="scannedCodes.length > 0" class="codes-list">
+              <div v-for="code in scannedCodes" :key="code.id" class="code-item">
+                <div class="code-content">
+                  <div class="code-value">
+                    <a v-if="isUrl(code.value)" :href="code.value" target="_blank" rel="noopener noreferrer">{{ code.value }}</a>
+                    <span v-else>{{ code.value }}</span>
+                  </div>
+                  <div class="code-meta">
+                    <span class="timestamp">{{ code.timestamp }}</span>
+                    <span class="format-badge">{{ code.format }}</span>
+                  </div>
+                </div>
+                <div class="item-actions">
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
+                    <Copy size="18" />
+                  </button>
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
+                    <Trash2 size="18" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div v-else class="empty-state">
+              Point camera at a QR code to scan
+            </div>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-container.full-width {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tool-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.scanner-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+}
+
+.scanner-content.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #000;
+  gap: 0;
+}
+
+.camera-wrapper {
+  width: 100%;
+  max-width: 500px;
+  aspect-ratio: 1;
+  margin: 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  transition: all 0.3s ease;
+}
+
+.camera-wrapper.clickable {
+  cursor: pointer;
+}
+
+.scanner-content.is-fullscreen .camera-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  max-width: none;
+  height: auto;
+  border-radius: 0;
+  border: none;
+  margin: 0;
+  z-index: 0;
+}
+
+.error-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+  color: #ff4444;
+  padding: 1rem;
+  text-align: center;
+  z-index: 10;
+}
+
+.switch-camera-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 20;
+  backdrop-filter: blur(4px);
+  transition: all 0.2s;
+}
+
+.switch-camera-btn:hover {
+  background: rgba(0, 0, 0, 0.6);
+  transform: scale(1.05);
+}
+
+.close-fullscreen-btn {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+}
+
+.scan-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scan-frame {
+  width: 70%;
+  height: 70%;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-radius: 12px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
+}
+
+.results-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+.scanner-content.is-fullscreen .results-section {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: auto;
+  z-index: 2;
+  border-radius: 0;
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.results-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.results-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.codes-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.code-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 0.2s;
+}
+
+.code-item:last-child {
+  border-bottom: none;
+}
+
+.code-item:hover {
+  background: var(--list-hover-bg);
+}
+
+.code-content {
+  flex: 1;
+  overflow: hidden;
+  padding-right: 1rem;
+}
+
+.code-value {
+  color: var(--primary-accent);
+  font-family: monospace;
+  word-break: break-all;
+  margin-bottom: 0.4rem;
+}
+
+.code-value a {
+  color: var(--primary-accent);
+  text-decoration: underline;
+}
+
+.code-value a:hover {
+  opacity: 0.8;
+}
+
+.code-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.item-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.format-badge {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0 0.4rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+:global(:root[data-theme="light"]) .format-badge {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.4rem;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-btn:hover {
+  color: var(--text-color);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+:global(:root[data-theme="light"]) .icon-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.delete-btn:hover {
+  color: #ef4444;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-secondary);
+  padding: 2rem;
+  text-align: center;
+}
+
+:deep(video) {
+  object-fit: cover !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+}
+
+:deep(.qrcode-stream-wrapper),
+:deep(.qrcode-stream-overlay) {
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  inset: 0 !important;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 1d6383f..62dc0e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import Main from '../components/Main.vue'
 import Passwords from '../components/tools/Passwords.vue'
 import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
 import UrlCleaner from '../components/tools/UrlCleaner.vue'
+import QrScanner from '../components/tools/QrScanner.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'
 
 const routes = [
@@ -26,6 +27,11 @@ const routes = [
     name: 'UrlCleaner',
     component: UrlCleaner
   },
+  {
+    path: '/qr-scanner',
+    name: 'QrScanner',
+    component: QrScanner
+  },
   {
     path: '/extension-privacy-policy',
     name: 'PrivacyPolicy',
diff --git a/vite.config.js b/vite.config.js
index da055f8..0fc66c8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -43,5 +43,11 @@ export default defineConfig({
   ],
   define: {
     '__APP_VERSION__': JSON.stringify(packageJson.version)
+  },
+  server: {
+    host: true,
+    allowedHosts: [
+      '.trycloudflare.com'
+    ]
   }
 })