From 11e5fcd780e8eb86c8edd32f8adbf384247fbe08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 12 Jan 2024 03:22:16 +0100
Subject: [PATCH] fix: improve i18n integration + fix hover on NavMenu #124

---
 components/MainMap/NavMenu.vue |  43 +++-----
 components/UI/VFlag.vue        |   4 +-
 i18n.config.ts                 |   4 +
 locales/en-US.ts               | 182 ++++++++++++++++++++++++++++++++
 locales/en.js                  | 180 --------------------------------
 locales/es-ES.ts               | 182 ++++++++++++++++++++++++++++++++
 locales/es.js                  | 180 --------------------------------
 locales/fr-FR.ts               | 183 +++++++++++++++++++++++++++++++++
 locales/fr.js                  | 181 --------------------------------
 nuxt.config.ts                 |  17 +--
 tsconfig.json                  |   2 -
 11 files changed, 576 insertions(+), 582 deletions(-)
 create mode 100644 i18n.config.ts
 create mode 100644 locales/en-US.ts
 delete mode 100644 locales/en.js
 create mode 100644 locales/es-ES.ts
 delete mode 100644 locales/es.js
 create mode 100644 locales/fr-FR.ts
 delete mode 100644 locales/fr.js

diff --git a/components/MainMap/NavMenu.vue b/components/MainMap/NavMenu.vue
index 53aa5ac62..4a3734110 100644
--- a/components/MainMap/NavMenu.vue
+++ b/components/MainMap/NavMenu.vue
@@ -1,45 +1,26 @@
 <template>
-  <section
-    v-if="entries.length + locales.length > 0"
-    class="tw-relative tw-z-40"
-  >
+  <section v-if="entries.length + locales.length > 0" class="tw-relative tw-z-40">
     <v-menu offset-y>
       <template #activator="{ props }">
-        <IconButton
-          :label="$t('navMenu.label')"
-          class="tw-w-11 tw-h-11 tw-pointer-events-auto"
-          v-bind="props"
-        >
+        <IconButton :label="$t('navMenu.label')" class="tw-w-11 tw-h-11 tw-pointer-events-auto" v-bind="props">
           <FontAwesomeIcon icon="cog" class="tw-text-zinc-800" size="lg" />
         </IconButton>
       </template>
 
       <v-list id="nav-menu-dropdown">
-        <v-list-item
-          v-for="entry in entries"
-          :key="entry.post_id"
-          class="tw-w-full tw-px-5 tw-py-3 hover:tw-bg-zinc-100"
-        >
+        <v-list-item v-for="entry in entries" :key="entry.post_id" class="tw-w-full tw-px-5 tw-py-3 hover:tw-bg-zinc-100">
           <v-list-item-title>
-            <ExternalLink
-              :href="entry.url"
-              rel="noopener noreferrer"
-              target="_blank"
-              @click="openLink(entry.title, entry.url)"
-            >
+            <ExternalLink :href="entry.url" rel="noopener noreferrer" target="_blank"
+              @click="openLink(entry.title, entry.url)">
               {{ entry.title }}
             </ExternalLink>
           </v-list-item-title>
         </v-list-item>
-        <v-divider v-if="Boolean(entries.length)"></v-divider>
-        <v-list-item
-          v-for="locale in locales"
-          :key="locale.code"
-          :class="[
-            'tw-w-full tw-px-5 tw-py-3 hover:tw-bg-zinc-100',
-            locale.code === $i18n.locale && 'bg-grey-lighten-2',
-          ]"
-        >
+        <v-divider v-if="Boolean(entries.length)" />
+        <v-list-item v-for="locale in locales" :key="locale.code" :class="[
+          'tw-w-full tw-px-5 tw-py-3 hover:tw-bg-zinc-100',
+          locale.code === $i18n.locale && 'bg-grey-lighten-2',
+        ]">
           <v-list-item-title>
             <a href="#" @click.prevent="setLocale(locale.code)">
               <VFlag :flag="locale.flag" class="flag" />
@@ -97,8 +78,8 @@ export default defineNuxtComponent({
   },
 
   methods: {
-    setLocale(locale: string) {
-      this.$i18n.locale = locale
+    async setLocale(locale: string) {
+      await this.$i18n.setLocale(locale)
       this.locale = locale
     },
     openLink(title: string, url: string) {
diff --git a/components/UI/VFlag.vue b/components/UI/VFlag.vue
index 51cbb2168..7034ba433 100644
--- a/components/UI/VFlag.vue
+++ b/components/UI/VFlag.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { hasFlag } from 'country-flag-icons'
-import { FR, GB, ES } from 'country-flag-icons/string/3x2'
+import { FR, US, ES } from 'country-flag-icons/string/3x2'
 import { h, ref, watch } from 'vue'
 
 import { defineNuxtComponent } from '#app'
@@ -20,7 +20,7 @@ export default defineNuxtComponent({
 
   setup(props) {
     const svgFlag = ref(null)
-    const svgs = { FR, GB, ES }
+    const svgs = { FR, US, ES }
     watch(
       () => props.flag,
       async (newFlag, oldFlag) => {
diff --git a/i18n.config.ts b/i18n.config.ts
new file mode 100644
index 000000000..7b0f927c9
--- /dev/null
+++ b/i18n.config.ts
@@ -0,0 +1,4 @@
+export default defineI18nConfig(() => ({
+    fallbackLocale: 'en',
+    legacy: false,    
+}))
\ No newline at end of file
diff --git a/locales/en-US.ts b/locales/en-US.ts
new file mode 100644
index 000000000..0a4c533a7
--- /dev/null
+++ b/locales/en-US.ts
@@ -0,0 +1,182 @@
+export default defineI18nLocale(() => {
+  return {
+    ui: {
+      close: 'Close',
+    },
+    units: {
+      min: 'min',
+      hours: 'h',
+      km: 'km',
+    },
+    ponctuation: {
+      colon: ' :',
+    },
+    shareLink: {
+      copy: 'Copy',
+      qrcode: 'QR-Code',
+    },
+    favorites: {
+      title: 'Favorites',
+      list: 'List',
+      menu_label: 'Favorites menu',
+      menu_notebook: 'Notebook',
+      menu_share: 'Share',
+      menu_clear: 'Clear',
+      export_pdf: 'PDF Export',
+      export_csv: 'CSV Export',
+      share_link: 'Share link of favorites',
+      notebook: {
+        title: 'Favorites notebook',
+        share: 'Share',
+        print: 'Print',
+        export: 'Export',
+        remove: 'Remove',
+      },
+      noFavs:
+        'You do not have any favorite places yet. You can do this by selecting a location on the map, then saving it as a favorite.',
+    },
+    mapControls: {
+      exploreAriaLabel: 'Explore Mode',
+      exploreButton: 'Explore nearby points of interest',
+      threeDAriaLabel: 'View the map in 3D',
+      backgroundAriaLabel: 'Switch the map background',
+      backgroundButton: 'Switch the map background to "{background}"',
+      resetBearing: 'Reset bearing to north',
+      zoomIn: 'Zoom In',
+      zoomOut: 'Zoom Out',
+    },
+    navMenu: {
+      label: 'Navigation',
+    },
+    snack: {
+      noPoi: {
+        issue: 'No matching result',
+        action: 'See more distant places?',
+      },
+      noFavorites: {
+        issue: 'No favorites here.',
+        action: 'See all favorites?',
+      },
+    },
+    headerMenu: {
+      logo: 'Logo',
+      search: 'Search',
+      searchHint: 'Point of interest, category, address',
+      selectAll: 'Select all',
+      unselectAll: 'Unselect all',
+      filter: 'Filter',
+      editFilters: 'Edit filters',
+      categories: 'Categories',
+      cities: 'Cities',
+      pois: 'Points of interest',
+      addresses: 'Addresses',
+      cartocode: 'Cartocode',
+      noResult: 'No results',
+      hideCategory: 'Hide this category',
+      clearAllCategories: 'Hide all categories',
+      back: 'Back',
+      backToMenuFavorites: 'Show menu',
+      backToMenuExplorer: 'Search by Categories',
+      backToMenuFavoritesMobile: 'Exit Favorites',
+      backToMenuExplorerMobile: 'Search by Categories',
+      disableCategory: 'Remove the category',
+    },
+    dateRange: {
+      from_to: 'From {from} to {to}, {duration} day(s)',
+      from: 'From {from}',
+      to: 'Until {to}',
+      on: 'On {on}',
+    },
+    openingHours: {
+      opened: 'Currently open',
+      closeAt: 'Closes',
+      closed: 'Currently closed',
+      openAt: 'Opens',
+      next: 'Next',
+      formatDayAndDayInMonth: "EEE do':'",
+      variableWeek: 'The hours may vary from week to week.',
+    },
+    poiCard: {
+      details: 'Details',
+      seeDetail: 'See details',
+      route: 'Route',
+      explore: 'Nearby',
+      favorite: 'Favorite',
+      favoriteOn: 'Set as favorite',
+      favoriteOff: 'Remove favorite',
+      findRoute: 'Find the route to this place',
+      unactivateExplore: 'Deactivate exploration of the surroundings',
+      activateExplore: 'Explore nearby points of interest',
+      zoom: 'Zoom',
+      backToMap: 'Volver al mapa',
+      thumbnail: 'Thumbnail',
+      image: 'Illustration',
+    },
+    poiDetails: {
+      headerDescription: 'Description',
+      headerDownload: 'Files to download',
+      lastUpdate: 'Last change',
+      headerContacts: 'Contact',
+      shareFacebook: 'Share on Facebook',
+      shareTwitter: 'Share on Twitter',
+      shareWhatsApp: 'Share on WhatsApp',
+      print: 'Print',
+      link: 'Share link',
+      qrcode: 'Share with QR-Code',
+      poweredBy: 'Powered by',
+      mapillaryExplore: 'Explore on Mapillary',
+      informations: 'Informations',
+      downloadGPX: 'The route (GPS track) in GPX format',
+      downloadPDF: 'The complete card in PDF format',
+      routes: {
+        waypoints: 'Waypoints',
+        pois: 'Point of Interests',
+      },
+    },
+    poisTable: {
+      empty: 'Empty List',
+      details: 'Details',
+      downloadCsv: 'Download in CSV',
+      downloadGeojson: 'Download in GeoJSON',
+      showOnMap: 'Show on Map',
+    },
+    categorySelector: {
+      placeholderSelect: 'Select a category',
+      placeholderAdd: 'RSearch for a category to add',
+      search: 'Search into the list',
+    },
+    dateFilter: {
+      today: 'Today',
+      tomorrow: 'Tomorrow',
+      thisWeekend: 'Coming week-end',
+      nextWeek: 'Next 7 days',
+      nextMonth: 'Next 30 days',
+    },
+    listFilter: {
+      label: 'Search or add a value',
+    },
+    fields: {
+      phone: {
+        callNumber: 'Call this number',
+      },
+      stars: {
+        label: 'Stars',
+      },
+      route: {
+        difficulty: 'Difficulty:',
+        length: 'Distance:',
+        duration: 'Duration:',
+        difficulties: {
+          easy: 'easy',
+          normal: 'normal',
+          hard: 'hard',
+        },
+      },
+    },
+    cookiesConsent: {
+      accept: 'Agree',
+      details: 'More information',
+      decline: 'Decline',
+    }
+  }
+})
diff --git a/locales/en.js b/locales/en.js
deleted file mode 100644
index 1701d0871..000000000
--- a/locales/en.js
+++ /dev/null
@@ -1,180 +0,0 @@
-export default {
-  ui: {
-    close: 'Close',
-  },
-  units: {
-    min: 'min',
-    hours: 'h',
-    km: 'km',
-  },
-  ponctuation: {
-    colon: ':',
-  },
-  shareLink: {
-    copy: 'Copy',
-    qrcode: 'QR-Code',
-  },
-  favorites: {
-    title: 'Favorites',
-    list: 'List',
-    menu_label: 'Favorites menu',
-    menu_notebook: 'Notebook',
-    menu_share: 'Share',
-    menu_clear: 'Clear',
-    export_pdf: 'PDF Export',
-    export_csv: 'CSV Export',
-    share_link: 'Share link of favorites',
-    notebook: {
-      title: 'Favorites notebook',
-      share: 'Share',
-      print: 'Print',
-      export: 'Export',
-      remove: 'Remove',
-    },
-    noFavs:
-      'You do not have any favorite places yet. You can do this by selecting a location on the map, then saving it as a favorite.',
-  },
-  mapControls: {
-    exploreAriaLabel: 'Explore Mode',
-    exploreButton: 'Explore nearby points of interest',
-    threeDAriaLabel: 'View the map in 3D',
-    backgroundAriaLabel: 'Switch the map background',
-    backgroundButton: 'Switch the map background to "{background}"',
-    resetBearing: 'Reset bearing to north',
-    zoomIn: 'Zoom In',
-    zoomOut: 'Zoom Out',
-  },
-  navMenu: {
-    label: 'Navigation',
-  },
-  snack: {
-    noPoi: {
-      issue: 'No matching result',
-      action: 'See more distant places?',
-    },
-    noFavorites: {
-      issue: 'No favorites here.',
-      action: 'See all favorites?',
-    },
-  },
-  headerMenu: {
-    logo: 'Logo',
-    search: 'Search',
-    searchHint: 'Point of interest, category, address',
-    selectAll: 'Select all',
-    unselectAll: 'Unselect all',
-    filter: 'Filter',
-    editFilters: 'Edit filters',
-    categories: 'Categories',
-    cities: 'Cities',
-    pois: 'Points of interest',
-    addresses: 'Addresses',
-    cartocode: 'Cartocode',
-    noResult: 'No results',
-    hideCategory: 'Hide this category',
-    clearAllCategories: 'Hide all categories',
-    back: 'Back',
-    backToMenuFavorites: 'Show menu',
-    backToMenuExplorer: 'Search by Categories',
-    backToMenuFavoritesMobile: 'Exit Favorites',
-    backToMenuExplorerMobile: 'Search by Categories',
-    disableCategory: 'Remove the category',
-  },
-  dateRange: {
-    from_to: 'From {from} to {to}, {duration} day(s)',
-    from: 'From {from}',
-    to: 'Until {to}',
-    on: 'On {on}',
-  },
-  openingHours: {
-    opened: 'Currently open',
-    closeAt: 'Closes',
-    closed: 'Currently closed',
-    openAt: 'Opens',
-    next: 'Next',
-    formatDayAndDayInMonth: "EEE do':'",
-    variableWeek: 'The hours may vary from week to week.',
-  },
-  poiCard: {
-    details: 'Details',
-    seeDetail: 'See details',
-    route: 'Route',
-    explore: 'Nearby',
-    favorite: 'Favorite',
-    favoriteOn: 'Set as favorite',
-    favoriteOff: 'Remove favorite',
-    findRoute: 'Find the route to this place',
-    unactivateExplore: 'Deactivate exploration of the surroundings',
-    activateExplore: 'Explore nearby points of interest',
-    zoom: 'Zoom',
-    backToMap: 'Volver al mapa',
-    thumbnail: 'Thumbnail',
-    image: 'Illustration',
-  },
-  poiDetails: {
-    headerDescription: 'Description',
-    headerDownload: 'Files to download',
-    lastUpdate: 'Last change',
-    headerContacts: 'Contact',
-    shareFacebook: 'Share on Facebook',
-    shareTwitter: 'Share on Twitter',
-    shareWhatsApp: 'Share on WhatsApp',
-    print: 'Print',
-    link: 'Share link',
-    qrcode: 'Share with QR-Code',
-    poweredBy: 'Powered by',
-    mapillaryExplore: 'Explore on Mapillary',
-    informations: 'Informations',
-    downloadGPX: 'The route (GPS track) in GPX format',
-    downloadPDF: 'The complete card in PDF format',
-    routes: {
-      waypoints: 'Waypoints',
-      pois: 'Point of Interests',
-    },
-  },
-  poisTable: {
-    empty: 'Empty List',
-    details: 'Details',
-    downloadCsv: 'Download in CSV',
-    downloadGeojson: 'Download in GeoJSON',
-    showOnMap: 'Show on Map',
-  },
-  categorySelector: {
-    placeholderSelect: 'Select a category',
-    placeholderAdd: 'RSearch for a category to add',
-    search: 'Search into the list',
-  },
-  dateFilter: {
-    today: 'Today',
-    tomorrow: 'Tomorrow',
-    thisWeekend: 'Coming week-end',
-    nextWeek: 'Next 7 days',
-    nextMonth: 'Next 30 days',
-  },
-  listFilter: {
-    label: 'Search or add a value',
-  },
-  fields: {
-    phone: {
-      callNumber: 'Call this number',
-    },
-    stars: {
-      label: 'Stars',
-    },
-    route: {
-      difficulty: 'Difficulty:',
-      length: 'Distance:',
-      duration: 'Duration:',
-      difficulties: {
-        easy: 'easy',
-        normal: 'normal',
-        hard: 'hard',
-      },
-    },
-  },
-  cookiesConsent: {
-    accept: 'Agree',
-    details: 'More information',
-    decline: 'Decline',
-  },
-}
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
new file mode 100644
index 000000000..160d2e7a8
--- /dev/null
+++ b/locales/es-ES.ts
@@ -0,0 +1,182 @@
+export default defineI18nLocale(() => {
+  return {
+    ui: {
+      close: 'Cerrar',
+    },
+    units: {
+      min: 'min',
+      hours: 'h',
+      km: 'km',
+    },
+    ponctuation: {
+      colon: ' :',
+    },
+    shareLink: {
+      copy: 'Copiar',
+      qrcode: 'QR-Code',
+    },
+    favorites: {
+      title: 'Favoritos',
+      list: 'Lista',
+      menu_label: 'Menú de favoritos',
+      menu_notebook: 'Cuaderno',
+      menu_share: 'Compartir',
+      menu_clear: 'Eliminar',
+      export_pdf: 'Exportación PDF',
+      export_csv: 'exportación CSV',
+      share_link: 'Compartir enlace de favoritos',
+      notebook: {
+        title: 'Cuaderno de favoritos',
+        share: 'Compartir',
+        print: 'Imprimir',
+        export: 'Exportar',
+        remove: 'Borrar',
+      },
+      noFavs:
+        'Todavía no tienes ningún lugar marcado. Puedes hacerlo seleccionando un lugar en el mapa y guardándolo como favorito',
+    },
+    mapControls: {
+      exploreAriaLabel: 'Modo explorar',
+      exploreButton: 'Exploración de las cercanías',
+      threeDAriaLabel: 'Ver el mapa en 3D',
+      backgroundAriaLabel: 'Cambiar el fondo de mapa',
+      backgroundButton: 'Cambiar el fondo de mapa a "{background}"',
+      resetBearing: 'Restablecer el mapa al norte',
+      zoomIn: 'Ampliar el zoom',
+      zoomOut: 'Alejar el zoom',
+    },
+    navMenu: {
+      label: 'Navegación',
+    },
+    snack: {
+      noPoi: {
+        issue: 'No hay resultados que coincidan',
+        action: '¿Ves lugares más lejanos?',
+      },
+      noFavorites: {
+        issue: 'Aquí no hay favoritos',
+        action: '¿Ver todos los favoritos?',
+      },
+    },
+    headerMenu: {
+      logo: 'Logo',
+      search: 'Buscar',
+      searchHint: 'Punto de interés, categoría, dirección',
+      selectAll: 'Seleccionar todo',
+      unselectAll: 'Deseleccionar todo',
+      filter: 'Filtro',
+      editFilters: 'Editar filtros',
+      categories: 'Categorías',
+      cities: 'Comunas',
+      pois: 'Puntos de interés',
+      addresses: 'Direcciones',
+      cartocode: 'Cartocode',
+      noResult: 'No hay resultados',
+      hideCategory: 'Ocultar esta categoría',
+      clearAllCategories: 'Ocultar todas las categorías',
+      back: 'Regresar',
+      backToMenuFavorites: 'Ver el menú',
+      backToMenuExplorer: 'Buscar par categorías',
+      backToMenuFavoritesMobile: 'Salir de los favoritos',
+      backToMenuExplorerMobile: 'Buscar par categorías',
+      disableCategory: 'Eliminar la categoría',
+    },
+    dateRange: {
+      from_to: 'Desde {from} hasta {to}, {duration} día(s)',
+      from: 'Desde {from}',
+      to: 'Hasta {to}',
+      on: 'El {on}',
+    },
+    openingHours: {
+      opened: 'Actualmente abierto',
+      closeAt: 'Cierra',
+      closed: 'Actualmente cerrado',
+      openAt: 'Abre',
+      next: 'Siguiente',
+      formatDayAndDayInMonth: 'EEE d :',
+      variableWeek: 'Los horarios pueden variar de una semana a otra.',
+    },
+    poiCard: {
+      details: 'Detalles',
+      seeDetail: 'Ver el detalle',
+      route: 'Ruta',
+      explore: 'Cercano',
+      favorite: 'Favorito',
+      favoriteOn: 'Poner como favorito',
+      favoriteOff: 'Eliminar favorito',
+      findRoute: 'Buscar la ruta a este lugar',
+      unactivateExplore: 'Desactivar la exploración de las cercanías',
+      activateExplore: 'Explora los puntos de interés cercanos',
+      zoom: 'Acercarse',
+      backToMap: 'Go to map',
+      thumbnail: 'Miniatura',
+      image: 'Ilustración',
+    },
+    poiDetails: {
+      headerDescription: 'Descripción',
+      headerDownload: 'Archivos a descargar',
+      lastUpdate: 'Último cambio',
+      headerContacts: 'Contacto',
+      shareFacebook: 'Compartir en Facebook',
+      shareTwitter: 'Compartir en Twitter',
+      shareWhatsApp: 'Compartir en WhatsApp',
+      print: 'Imprimir',
+      link: 'Compartir enlace',
+      qrcode: 'Compartir en QR-Code',
+      poweredBy: 'Con la tecnología de',
+      mapillaryExplore: 'Explorar en Mapillary',
+      informations: 'Informaciones',
+      downloadGPX: 'La ruta (pista GPS) en formato GPX',
+      downloadPDF: 'La hoja completa en formato PDF',
+      routes: {
+        waypoints: 'Puntos de ruta',
+        pois: 'Puntos de interés',
+      },
+    },
+    poisTable: {
+      empty: 'Lista vacía',
+      details: 'Detalles',
+      downloadCsv: 'Descargar como CSV',
+      downloadGeojson: 'Descargar como GeoJSON',
+      showOnMap: 'Mostrar en el mapa',
+    },
+    categorySelector: {
+      placeholderSelect: 'Seleccione una categoría',
+      placeholderAdd: 'Buscar una categoría para añadir',
+      search: 'Buscar en la lista',
+    },
+    dateFilter: {
+      today: 'Hoy',
+      tomorrow: 'Mañana',
+      thisWeekend: 'Este fin de semana',
+      nextWeek: 'Próximos 7 días',
+      nextMonth: 'Próximos 30 días',
+    },
+    listFilter: {
+      label: 'Busca o añade un valor',
+    },
+    fields: {
+      phone: {
+        callNumber: 'Llama a este número',
+      },
+      stars: {
+        label: 'Estrellas',
+      },
+      route: {
+        difficulty: 'Dificultad:',
+        length: 'Distancia:',
+        duration: 'Duración:',
+        difficulties: {
+          easy: 'fácil',
+          normal: 'normal',
+          hard: 'difícil',
+        },
+      },
+    },
+    cookiesConsent: {
+      accept: 'Aceptar',
+      details: 'Más información',
+      decline: 'Descenso',
+    },
+  }
+})
diff --git a/locales/es.js b/locales/es.js
deleted file mode 100644
index 657b7ec8a..000000000
--- a/locales/es.js
+++ /dev/null
@@ -1,180 +0,0 @@
-export default {
-  ui: {
-    close: 'Cerrar',
-  },
-  units: {
-    min: 'min',
-    hours: 'h',
-    km: 'km',
-  },
-  ponctuation: {
-    colon: ' :',
-  },
-  shareLink: {
-    copy: 'Copiar',
-    qrcode: 'QR-Code',
-  },
-  favorites: {
-    title: 'Favoritos',
-    list: 'Lista',
-    menu_label: 'Menú de favoritos',
-    menu_notebook: 'Cuaderno',
-    menu_share: 'Compartir',
-    menu_clear: 'Eliminar',
-    export_pdf: 'Exportación PDF',
-    export_csv: 'exportación CSV',
-    share_link: 'Compartir enlace de favoritos',
-    notebook: {
-      title: 'Cuaderno de favoritos',
-      share: 'Compartir',
-      print: 'Imprimir',
-      export: 'Exportar',
-      remove: 'Borrar',
-    },
-    noFavs:
-      'Todavía no tienes ningún lugar marcado. Puedes hacerlo seleccionando un lugar en el mapa y guardándolo como favorito',
-  },
-  mapControls: {
-    exploreAriaLabel: 'Modo explorar',
-    exploreButton: 'Exploración de las cercanías',
-    threeDAriaLabel: 'Ver el mapa en 3D',
-    backgroundAriaLabel: 'Cambiar el fondo de mapa',
-    backgroundButton: 'Cambiar el fondo de mapa a "{background}"',
-    resetBearing: 'Restablecer el mapa al norte',
-    zoomIn: 'Ampliar el zoom',
-    zoomOut: 'Alejar el zoom',
-  },
-  navMenu: {
-    label: 'Navegación',
-  },
-  snack: {
-    noPoi: {
-      issue: 'No hay resultados que coincidan',
-      action: '¿Ves lugares más lejanos?',
-    },
-    noFavorites: {
-      issue: 'Aquí no hay favoritos',
-      action: '¿Ver todos los favoritos?',
-    },
-  },
-  headerMenu: {
-    logo: 'Logo',
-    search: 'Buscar',
-    searchHint: 'Punto de interés, categoría, dirección',
-    selectAll: 'Seleccionar todo',
-    unselectAll: 'Deseleccionar todo',
-    filter: 'Filtro',
-    editFilters: 'Editar filtros',
-    categories: 'Categorías',
-    cities: 'Comunas',
-    pois: 'Puntos de interés',
-    addresses: 'Direcciones',
-    cartocode: 'Cartocode',
-    noResult: 'No hay resultados',
-    hideCategory: 'Ocultar esta categoría',
-    clearAllCategories: 'Ocultar todas las categorías',
-    back: 'Regresar',
-    backToMenuFavorites: 'Ver el menú',
-    backToMenuExplorer: 'Buscar par categorías',
-    backToMenuFavoritesMobile: 'Salir de los favoritos',
-    backToMenuExplorerMobile: 'Buscar par categorías',
-    disableCategory: 'Eliminar la categoría',
-  },
-  dateRange: {
-    from_to: 'Desde {from} hasta {to}, {duration} día(s)',
-    from: 'Desde {from}',
-    to: 'Hasta {to}',
-    on: 'El {on}',
-  },
-  openingHours: {
-    opened: 'Actualmente abierto',
-    closeAt: 'Cierra',
-    closed: 'Actualmente cerrado',
-    openAt: 'Abre',
-    next: 'Siguiente',
-    formatDayAndDayInMonth: 'EEE d :',
-    variableWeek: 'Los horarios pueden variar de una semana a otra.',
-  },
-  poiCard: {
-    details: 'Detalles',
-    seeDetail: 'Ver el detalle',
-    route: 'Ruta',
-    explore: 'Cercano',
-    favorite: 'Favorito',
-    favoriteOn: 'Poner como favorito',
-    favoriteOff: 'Eliminar favorito',
-    findRoute: 'Buscar la ruta a este lugar',
-    unactivateExplore: 'Desactivar la exploración de las cercanías',
-    activateExplore: 'Explora los puntos de interés cercanos',
-    zoom: 'Acercarse',
-    backToMap: 'Go to map',
-    thumbnail: 'Miniatura',
-    image: 'Ilustración',
-  },
-  poiDetails: {
-    headerDescription: 'Descripción',
-    headerDownload: 'Archivos a descargar',
-    lastUpdate: 'Último cambio',
-    headerContacts: 'Contacto',
-    shareFacebook: 'Compartir en Facebook',
-    shareTwitter: 'Compartir en Twitter',
-    shareWhatsApp: 'Compartir en WhatsApp',
-    print: 'Imprimir',
-    link: 'Compartir enlace',
-    qrcode: 'Compartir en QR-Code',
-    poweredBy: 'Con la tecnología de',
-    mapillaryExplore: 'Explorar en Mapillary',
-    informations: 'Informaciones',
-    downloadGPX: 'La ruta (pista GPS) en formato GPX',
-    downloadPDF: 'La hoja completa en formato PDF',
-    routes: {
-      waypoints: 'Puntos de ruta',
-      pois: 'Puntos de interés',
-    },
-  },
-  poisTable: {
-    empty: 'Lista vacía',
-    details: 'Detalles',
-    downloadCsv: 'Descargar como CSV',
-    downloadGeojson: 'Descargar como GeoJSON',
-    showOnMap: 'Mostrar en el mapa',
-  },
-  categorySelector: {
-    placeholderSelect: 'Seleccione una categoría',
-    placeholderAdd: 'Buscar una categoría para añadir',
-    search: 'Buscar en la lista',
-  },
-  dateFilter: {
-    today: 'Hoy',
-    tomorrow: 'Mañana',
-    thisWeekend: 'Este fin de semana',
-    nextWeek: 'Próximos 7 días',
-    nextMonth: 'Próximos 30 días',
-  },
-  listFilter: {
-    label: 'Busca o añade un valor',
-  },
-  fields: {
-    phone: {
-      callNumber: 'Llama a este número',
-    },
-    stars: {
-      label: 'Estrellas',
-    },
-    route: {
-      difficulty: 'Dificultad:',
-      length: 'Distancia:',
-      duration: 'Duración:',
-      difficulties: {
-        easy: 'fácil',
-        normal: 'normal',
-        hard: 'difícil',
-      },
-    },
-  },
-  cookiesConsent: {
-    accept: 'Aceptar',
-    details: 'Más información',
-    decline: 'Descenso',
-  },
-}
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
new file mode 100644
index 000000000..5cc3ee49e
--- /dev/null
+++ b/locales/fr-FR.ts
@@ -0,0 +1,183 @@
+export default defineI18nLocale(() => {
+  return {
+    ui: {
+      close: 'Fermer',
+    },
+    units: {
+      min: 'min',
+      hours: 'h',
+      km: 'km',
+    },
+    ponctuation: {
+      colon: ' :',
+    },
+    shareLink: {
+      copy: 'Copier',
+      qrcode: 'QR-Code',
+      close: 'Fermer',
+    },
+    favorites: {
+      title: 'Favoris',
+      list: 'Liste',
+      menu_label: 'Menu des favoris',
+      menu_notebook: 'Carnet',
+      menu_share: 'Partager',
+      menu_clear: 'Effacer',
+      export_pdf: 'Export PDF',
+      export_csv: 'Export CSV',
+      share_link: 'Partager le lien des favoris',
+      notebook: {
+        title: 'Carnet des favoris',
+        share: 'Partager',
+        print: 'Imprimer',
+        export: 'Exporter',
+        remove: 'Supprimer',
+      },
+      noFavs:
+        "Vous n'avez pas encore de lieux en favoris. Vous pouvez le faire en sélectionnant un lieu sur la carte, puis en le mémorisant comme favori.",
+    },
+    mapControls: {
+      exploreAriaLabel: 'Mode explorer',
+      exploreButton: "Explorer les points d'intérêts à proximité",
+      threeDAriaLabel: 'Visualiser la carte en 3D',
+      backgroundAriaLabel: 'Changer le fond de carte',
+      backgroundButton: 'Changer le fond de carte vers "{background}"',
+      resetBearing: 'Remettre la carte vers le nord',
+      zoomIn: 'Zoomer avant',
+      zoomOut: 'Zoomer arriere',
+    },
+    navMenu: {
+      label: 'Navigation',
+    },
+    snack: {
+      noPoi: {
+        issue: 'Pas de résultat correspondant.',
+        action: 'Voir des lieux plus éloignés ?',
+      },
+      noFavorites: {
+        issue: 'Pas de favori ici.',
+        action: 'Voir tous les favoris ?',
+      },
+    },
+    headerMenu: {
+      logo: 'Logo',
+      search: 'Rechercher',
+      searchHint: "Points d'intérêt, catégorie, adresse",
+      selectAll: 'Tout sélectionner',
+      unselectAll: 'Tout désélectionner',
+      filter: 'Filtrer',
+      editFilters: 'Modifier les filtres',
+      categories: 'Catégories',
+      cities: 'Communes',
+      pois: "Points d'intérêts",
+      addresses: 'Adresses',
+      cartocode: 'Cartocode',
+      noResult: 'Aucun résultat',
+      hideCategory: 'Masquer cette catégorie',
+      clearAllCategories: 'Retirer toutes les catégories',
+      back: 'Retour',
+      backToMenuFavorites: 'Afficher le menu',
+      backToMenuExplorer: 'Rechercher par catégories',
+      backToMenuFavoritesMobile: 'Quitter les favoris',
+      backToMenuExplorerMobile: 'Rechercher par catégories',
+      disableCategory: 'Supprimer la catégorie',
+    },
+    dateRange: {
+      from_to: 'Du {from} au {to}, {duration} jour(s)',
+      from: 'À partir du {from}',
+      to: "Jusqu'au {to}",
+      on: 'Le {on}',
+    },
+    openingHours: {
+      opened: 'Actuellement ouvert',
+      closeAt: 'Fermeture',
+      closed: 'Actuellement fermé',
+      openAt: 'Ouverture',
+      next: 'Prochain',
+      formatDayAndDayInMonth: 'EEE d :',
+      variableWeek: "Les horaires peuvent varier d'une semaine sur l'autre.",
+    },
+    poiCard: {
+      details: 'Détails',
+      seeDetail: 'Voir le detail',
+      route: 'Itinéraire',
+      explore: 'À proximité',
+      favorite: 'Favori',
+      favoriteOn: 'Mettre en favori',
+      favoriteOff: 'Retirer le favori',
+      findRoute: "Trouver la route pour venir jusqu'à ce lieu",
+      unactivateExplore: "Désactiver l'exploration à proximité",
+      activateExplore: "Explorer les points d'intérêts à proximité",
+      zoom: 'Zoomer',
+      backToMap: 'Aller à la carte',
+      thumbnail: 'Miniature',
+      image: 'Illustration',
+    },
+    poiDetails: {
+      headerDescription: 'Descriptif',
+      headerDownload: 'Fichiers à télécharger',
+      lastUpdate: 'Dernière modification',
+      headerContacts: 'Contact',
+      shareFacebook: 'Partager sur Facebook',
+      shareTwitter: 'Partager sur Twitter',
+      shareWhatsApp: 'Partager sur WhatsApp',
+      print: 'Imprimer',
+      link: 'Partager le lien',
+      qrcode: 'Partager en QR-Code',
+      poweredBy: 'Réalisation',
+      mapillaryExplore: 'Explorer sur Mapillary',
+      informations: 'Informations',
+      downloadGPX: 'Le parcours (trace GPS) au format GPX',
+      downloadPDF: 'La fiche complète au format PDF',
+      routes: {
+        waypoints: 'Points guides',
+        pois: 'Points d’intérêts',
+      },
+    },
+    poisTable: {
+      empty: 'Liste vide',
+      details: 'Détails',
+      downloadCsv: 'Télécharger en CSV',
+      downloadGeojson: 'Télécharger en GeoJSON',
+      showOnMap: 'Afficher sur la carte',
+    },
+    categorySelector: {
+      placeholderSelect: 'Sélectionnez une catégorie',
+      placeholderAdd: 'Recherche une catégorie à ajouter',
+      search: 'Recherchez dans la liste',
+    },
+    dateFilter: {
+      today: "Aujourd'hui",
+      tomorrow: 'Demain',
+      thisWeekend: 'Ce week-end',
+      nextWeek: '7 prochains jours',
+      nextMonth: '30 prochains jours',
+    },
+    listFilter: {
+      label: 'Recherchez ou ajoutez une valeur',
+    },
+    fields: {
+      phone: {
+        callNumber: 'Appeler ce numéro',
+      },
+      stars: {
+        label: 'Étoiles',
+      },
+      route: {
+        difficulty: 'Difficulté :',
+        length: 'Distance :',
+        duration: 'Durée :',
+        difficulties: {
+          easy: 'facile',
+          normal: 'normal',
+          hard: 'dur',
+        },
+      },
+    },
+    cookiesConsent: {
+      accept: 'Accepter',
+      details: 'En savoir plus',
+      decline: 'Refuser',
+    },
+  }
+})
diff --git a/locales/fr.js b/locales/fr.js
deleted file mode 100644
index dc96b518c..000000000
--- a/locales/fr.js
+++ /dev/null
@@ -1,181 +0,0 @@
-export default {
-  ui: {
-    close: 'Fermer',
-  },
-  units: {
-    min: 'min',
-    hours: 'h',
-    km: 'km',
-  },
-  ponctuation: {
-    colon: ' :',
-  },
-  shareLink: {
-    copy: 'Copier',
-    qrcode: 'QR-Code',
-    close: 'Fermer',
-  },
-  favorites: {
-    title: 'Favoris',
-    list: 'Liste',
-    menu_label: 'Menu des favoris',
-    menu_notebook: 'Carnet',
-    menu_share: 'Partager',
-    menu_clear: 'Effacer',
-    export_pdf: 'Export PDF',
-    export_csv: 'Export CSV',
-    share_link: 'Partager le lien des favoris',
-    notebook: {
-      title: 'Carnet des favoris',
-      share: 'Partager',
-      print: 'Imprimer',
-      export: 'Exporter',
-      remove: 'Supprimer',
-    },
-    noFavs:
-      "Vous n'avez pas encore de lieux en favoris. Vous pouvez le faire en sélectionnant un lieu sur la carte, puis en le mémorisant comme favori.",
-  },
-  mapControls: {
-    exploreAriaLabel: 'Mode explorer',
-    exploreButton: "Explorer les points d'intérêts à proximité",
-    threeDAriaLabel: 'Visualiser la carte en 3D',
-    backgroundAriaLabel: 'Changer le fond de carte',
-    backgroundButton: 'Changer le fond de carte vers "{background}"',
-    resetBearing: 'Remettre la carte vers le nord',
-    zoomIn: 'Zoomer avant',
-    zoomOut: 'Zoomer arriere',
-  },
-  navMenu: {
-    label: 'Navigation',
-  },
-  snack: {
-    noPoi: {
-      issue: 'Pas de résultat correspondant.',
-      action: 'Voir des lieux plus éloignés ?',
-    },
-    noFavorites: {
-      issue: 'Pas de favori ici.',
-      action: 'Voir tous les favoris ?',
-    },
-  },
-  headerMenu: {
-    logo: 'Logo',
-    search: 'Rechercher',
-    searchHint: "Points d'intérêt, catégorie, adresse",
-    selectAll: 'Tout sélectionner',
-    unselectAll: 'Tout désélectionner',
-    filter: 'Filtrer',
-    editFilters: 'Modifier les filtres',
-    categories: 'Catégories',
-    cities: 'Communes',
-    pois: "Points d'intérêts",
-    addresses: 'Adresses',
-    cartocode: 'Cartocode',
-    noResult: 'Aucun résultat',
-    hideCategory: 'Masquer cette catégorie',
-    clearAllCategories: 'Retirer toutes les catégories',
-    back: 'Retour',
-    backToMenuFavorites: 'Afficher le menu',
-    backToMenuExplorer: 'Rechercher par catégories',
-    backToMenuFavoritesMobile: 'Quitter les favoris',
-    backToMenuExplorerMobile: 'Rechercher par catégories',
-    disableCategory: 'Supprimer la catégorie',
-  },
-  dateRange: {
-    from_to: 'Du {from} au {to}, {duration} jour(s)',
-    from: 'À partir du {from}',
-    to: "Jusqu'au {to}",
-    on: 'Le {on}',
-  },
-  openingHours: {
-    opened: 'Actuellement ouvert',
-    closeAt: 'Fermeture',
-    closed: 'Actuellement fermé',
-    openAt: 'Ouverture',
-    next: 'Prochain',
-    formatDayAndDayInMonth: 'EEE d :',
-    variableWeek: "Les horaires peuvent varier d'une semaine sur l'autre.",
-  },
-  poiCard: {
-    details: 'Détails',
-    seeDetail: 'Voir le detail',
-    route: 'Itinéraire',
-    explore: 'À proximité',
-    favorite: 'Favori',
-    favoriteOn: 'Mettre en favori',
-    favoriteOff: 'Retirer le favori',
-    findRoute: "Trouver la route pour venir jusqu'à ce lieu",
-    unactivateExplore: "Désactiver l'exploration à proximité",
-    activateExplore: "Explorer les points d'intérêts à proximité",
-    zoom: 'Zoomer',
-    backToMap: 'Aller à la carte',
-    thumbnail: 'Miniature',
-    image: 'Illustration',
-  },
-  poiDetails: {
-    headerDescription: 'Descriptif',
-    headerDownload: 'Fichiers à télécharger',
-    lastUpdate: 'Dernière modification',
-    headerContacts: 'Contact',
-    shareFacebook: 'Partager sur Facebook',
-    shareTwitter: 'Partager sur Twitter',
-    shareWhatsApp: 'Partager sur WhatsApp',
-    print: 'Imprimer',
-    link: 'Partager le lien',
-    qrcode: 'Partager en QR-Code',
-    poweredBy: 'Réalisation',
-    mapillaryExplore: 'Explorer sur Mapillary',
-    informations: 'Informations',
-    downloadGPX: 'Le parcours (trace GPS) au format GPX',
-    downloadPDF: 'La fiche complète au format PDF',
-    routes: {
-      waypoints: 'Points guides',
-      pois: 'Points d’intérêts',
-    },
-  },
-  poisTable: {
-    empty: 'Liste vide',
-    details: 'Détails',
-    downloadCsv: 'Télécharger en CSV',
-    downloadGeojson: 'Télécharger en GeoJSON',
-    showOnMap: 'Afficher sur la carte',
-  },
-  categorySelector: {
-    placeholderSelect: 'Sélectionnez une catégorie',
-    placeholderAdd: 'Recherche une catégorie à ajouter',
-    search: 'Recherchez dans la liste',
-  },
-  dateFilter: {
-    today: "Aujourd'hui",
-    tomorrow: 'Demain',
-    thisWeekend: 'Ce week-end',
-    nextWeek: '7 prochains jours',
-    nextMonth: '30 prochains jours',
-  },
-  listFilter: {
-    label: 'Recherchez ou ajoutez une valeur',
-  },
-  fields: {
-    phone: {
-      callNumber: 'Appeler ce numéro',
-    },
-    stars: {
-      label: 'Étoiles',
-    },
-    route: {
-      difficulty: 'Difficulté :',
-      length: 'Distance :',
-      duration: 'Durée :',
-      difficulties: {
-        easy: 'facile',
-        normal: 'normal',
-        hard: 'dur',
-      },
-    },
-  },
-  cookiesConsent: {
-    accept: 'Accepter',
-    details: 'En savoir plus',
-    decline: 'Refuser',
-  },
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3d8087d74..4b3db0e1a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -41,19 +41,24 @@ export default defineNuxtConfig({
     detectBrowserLanguage: {
       useCookie: false,
     },
-    langDir: 'locales/',
+    experimental: {
+      jsTsFormatResource: true
+    },
+    langDir: 'locales',
+    lazy: true,
     locales: [
-      { code: 'en', name: 'English', flag: 'GB', iso: 'en-US', file: 'en.js' },
-      { code: 'es', name: 'Español', flag: 'ES', iso: 'es-ES', file: 'es.js' },
-      { code: 'fr', name: 'Français', flag: 'FR', iso: 'fr-FR', file: 'fr.js' },
+      { code: 'en', name: 'English', flag: 'US', iso: 'en-US', file: 'en-US.ts' },
+      { code: 'es', name: 'Español', flag: 'ES', iso: 'es-ES', file: 'es-ES.ts' },
+      { code: 'fr', name: 'Français', flag: 'FR', iso: 'fr-FR', file: 'fr-FR.ts' },
     ],
     strategy: 'no_prefix',
+    vueI18n: 'i18n.config.ts'
   },
   image: {
     domains: [...configuredApi(vidos), ...configuredImageProxy(vidos)],
   },
   imports: {
-    autoImport: false,
+    autoImport: true,
   },
   loadingIndicator: false,
   modules: [
@@ -93,7 +98,7 @@ export default defineNuxtConfig({
   },
   purgeCSS: {
     whitelistPatterns: [/svg.*/, /fa.*/],
-  }, 
+  },
   // sentry: {
   //   dsn: process.env.SENTRY_DSN || '',
   //   // https://sentry.nuxtjs.org/sentry/options
diff --git a/tsconfig.json b/tsconfig.json
index 4c9bbf1c2..8e8551646 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,8 +11,6 @@
     "types": [
       "node",
       "@types/node",
-      "@nuxt/types",
-      "@nuxtjs/i18n",
       "@nuxt/image-edge",
       "@nuxtjs/sentry",
       "@types/webpack",