Add multilingual support with English, Spanish, and French translations; update Nuxt configuration and package dependencies

app/components/tool/Stats.vue

@@ -3,9 +3,7 @@ import type { Stats } from '~~/types'
 
 const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
 
-const { locale, locales, t } = useI18n({
-  useScope: 'local',
-})
+const { locale, locales, t } = useI18n()
 const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
 
 const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
@@ -17,7 +15,7 @@ const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_in
   <section v-if="stats && stats.coding && stats.editors && stats.os && stats.languages && time && date && hours">
     <div class="prose dark:prose-invert">
       <i18n-t
-        keypath="stats"
+        keypath="tool.stats.main"
         tag="p"
       >
         <template #time>
@@ -25,28 +23,28 @@ const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_in
         </template>
         <template #date>
           <HoverText
-            :hover="t('tooltip.date')"
+            :hover="t('tool.stats.tooltip.date')"
             :text="date"
           />
         </template>
         <template #hours>
           <HoverText
-            :hover="t('tooltip.hours')"
+            :hover="t('tool.stats.tooltip.hours')"
             :text="hours"
           />
         </template>
       </i18n-t>
       <ul>
         <i18n-t
-          keypath="editors"
+          keypath="tool.stats.editors"
           tag="li"
         >
           <template #editors>
-            {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
+            {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('tool.stats.separator')) }}
           </template>
         </i18n-t>
         <i18n-t
-          keypath="os"
+          keypath="tool.stats.os"
           tag="li"
         >
           <template
@@ -57,52 +55,14 @@ const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_in
           </template>
         </i18n-t>
         <i18n-t
-          keypath="languages"
+          keypath="tool.stats.languages"
           tag="li"
         >
           <template #languages>
-            {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator')) }}
+            {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('tool.stats.separator')) }}
           </template>
         </i18n-t>
       </ul>
     </div>
   </section>
 </template>
-
-<i18n lang="json">
-{
-  "en": {
-    "stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours.",
-    "editors": "My top editors are {editors}",
-    "os": "My best OS is {os}",
-    "languages": "My favorite languages are {languages}",
-    "separator": " and ",
-    "tooltip": {
-      "date": "That was so long ago 🫣",
-      "hours": "That's a lot 😮"
-    }
-  },
-  "fr": {
-    "stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures.",
-    "editors": "Mes meilleurs éditeurs sont {editors}",
-    "os": "Mon meilleur OS est {os}",
-    "languages": "Mes langages préférés sont {languages}",
-    "separator": " et ",
-    "tooltip": {
-      "date": "C'était il y a si longtemps 🫣",
-      "hours": "C'est beaucoup 😮"
-    }
-  },
-  "es": {
-    "stats": "Recopilo datos desde hace {time} años, empecé el {date}. He programado durante un total de {hours} horas.",
-    "editors": "Mis mejores editores son {editors}.",
-    "os": "Mi mejor OS es {os}.",
-    "languages": "Mis lenguajes favoritos son {languages}.",
-    "separator": " y ",
-    "tooltip": {
-      "date": "hace tato tiempo…🫣",
-      "hours": "es mucho 😮"
-    }
-  }
-}
-</i18n>