From 2ca7e5c00ec14b1e0e78ea98c8296b1b1da55144 Mon Sep 17 00:00:00 2001
From: Roberto Cella <rob.uniud@gmail.com>
Date: Thu, 27 Aug 2026 20:24:18 +0200
Subject: [PATCH 1/2] Save preferred locale to local storage

---
 src/App.vue | 9 ++++++++-
 src/main.ts | 6 +++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 388b1bf..9eb360c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { provide, onMounted, ref } from 'vue';
+import { onMounted, provide, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import DailyQuestion from "./components/DailyQuestion.vue";
 
+const { locale } = useI18n();
+
+watch(locale, (newLocale) => {
+  localStorage.setItem('preferred-locale', newLocale);
+});
+
 const theme = ref('dark');
 
 onMounted(() => {
diff --git a/src/main.ts b/src/main.ts
index 35e6c3e..3c5d08b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,7 +6,11 @@ import en_translations from './locales/en.json'
 import it_translations from './locales/it.json'
 
 const supportedLocales = ['en', 'it'];
-let locale = navigator.languages
+const savedLocale = localStorage.getItem('preferred-locale');
+
+let locale = (savedLocale && supportedLocales.includes(savedLocale))
+  ? savedLocale
+  : navigator.languages
   .map(lang => new Intl.Locale(lang).language)
   .find(locale => supportedLocales.includes(locale)) || 'en';
 

From 3ffcf17fbda6a75712294d5d8c776586173b4a46 Mon Sep 17 00:00:00 2001
From: Roberto Cella <rob.uniud@gmail.com>
Date: Thu, 27 Aug 2026 21:02:33 +0200
Subject: [PATCH 2/2] Improve local storage handling with vueuse

---
 package-lock.json | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 src/App.vue       |  4 ++-
 src/main.ts       | 16 +++++++----
 4 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 96277c9..07d1ceb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vite-vue-typescript-starter",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/core": "^14.4.0",
         "luxon": "^3.5.0",
         "vue": "^3.4.27",
         "vue-i18n": "^11.0.1"
@@ -388,6 +389,12 @@
       "integrity": "sha512-jJ41Q4z6ZVO260MNDdHfW7+7a5iMiX8Mr6ZJHcmgrvhZha6dz5704o/lF2kKl6URjH6ivEL97w9xS/MgpJEphg==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -539,6 +546,44 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
       "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.4.0.tgz",
+      "integrity": "sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.4.0",
+        "@vueuse/shared": "14.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.4.0.tgz",
+      "integrity": "sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.4.0.tgz",
+      "integrity": "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/alien-signals": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz",
@@ -1343,6 +1388,11 @@
       "integrity": "sha512-jJ41Q4z6ZVO260MNDdHfW7+7a5iMiX8Mr6ZJHcmgrvhZha6dz5704o/lF2kKl6URjH6ivEL97w9xS/MgpJEphg==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
+    },
     "@vitejs/plugin-vue": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
@@ -1487,6 +1537,27 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
       "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g=="
     },
+    "@vueuse/core": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.4.0.tgz",
+      "integrity": "sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.4.0",
+        "@vueuse/shared": "14.4.0"
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.4.0.tgz",
+      "integrity": "sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g=="
+    },
+    "@vueuse/shared": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.4.0.tgz",
+      "integrity": "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==",
+      "requires": {}
+    },
     "alien-signals": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz",
diff --git a/package.json b/package.json
index f55d03b..aaca433 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "node": "24"
   },
   "dependencies": {
+    "@vueuse/core": "^14.4.0",
     "luxon": "^3.5.0",
     "vue": "^3.4.27",
     "vue-i18n": "^11.0.1"
diff --git a/src/App.vue b/src/App.vue
index 9eb360c..9b3bf67 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { onMounted, provide, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useStorage } from '@vueuse/core';
 import DailyQuestion from "./components/DailyQuestion.vue";
 
 const { locale } = useI18n();
+const storedLocale = useStorage('preferred-locale', locale.value);
 
 watch(locale, (newLocale) => {
-  localStorage.setItem('preferred-locale', newLocale);
+  storedLocale.value = newLocale;
 });
 
 const theme = ref('dark');
diff --git a/src/main.ts b/src/main.ts
index 3c5d08b..cbdd817 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +1,22 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
+import { useStorage } from '@vueuse/core'
 import './style.css'
 import App from './App.vue'
 import en_translations from './locales/en.json'
 import it_translations from './locales/it.json'
 
 const supportedLocales = ['en', 'it'];
-const savedLocale = localStorage.getItem('preferred-locale');
+const detectBrowserLocale = () =>
+  navigator.languages
+    .map(lang => new Intl.Locale(lang).language)
+    .find(locale => supportedLocales.includes(locale)) || 'en';
 
-let locale = (savedLocale && supportedLocales.includes(savedLocale))
-  ? savedLocale
-  : navigator.languages
-  .map(lang => new Intl.Locale(lang).language)
-  .find(locale => supportedLocales.includes(locale)) || 'en';
+const storedLocale = useStorage('preferred-locale', detectBrowserLocale());
+
+const locale = supportedLocales.includes(storedLocale.value)
+  ? storedLocale.value
+  : detectBrowserLocale();
 
 const i18n = createI18n({
   legacy: false,