Client - init locales files ('en' and 'fr')

fittrackee_client/src/components/HelloI18n.vue

@@ -1,30 +0,0 @@
-<template>
-  <p>{{ t('hello') }}</p>
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  export default defineComponent({
-    name: 'HelloI18n',
-    setup() {
-      const { t } = useI18n({
-        inheritLocale: true,
-        useScope: 'local',
-      })
-
-      // Something todo ..
-
-      return { t }
-    },
-  })
-</script>
-
-<i18n>
-{
-  "en": {
-    "hello": "Hello i18n in SFC!"
-  }
-}
-</i18n>

fittrackee_client/src/components/NavBar.vue

@@ -17,17 +17,19 @@
           ></i>
         </div>
         <div class="nav-items-app-menu" @click="closeMenu()">
-          <router-link class="nav-item" to="/">Dashboard</router-link>
-          <span class="nav-item">Workout</span>
-          <span class="nav-item">Statistics</span>
-          <span class="nav-item">Admin</span>
-          <span class="nav-item">Add Workout</span>
+          <router-link class="nav-item" to="/">{{
+            t('dashboard.DASHBOARD')
+          }}</router-link>
+          <span class="nav-item">{{ t('workouts.WORKOUTS') }}</span>
+          <span class="nav-item">{{ t('statistics.STATISTICS') }}</span>
+          <span class="nav-item">{{ t('administration.ADMIN') }}</span>
+          <span class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</span>
         </div>
         <div class="nav-items-user-menu">
           <span class="nav-item">User</span>
-          <span class="nav-item">Logout</span>
-          <span class="nav-item">Register</span>
-          <span class="nav-item">Login</span>
+          <span class="nav-item">{{ t('user.LOGOUT') }}</span>
+          <span class="nav-item">{{ t('user.REGISTER') }}</span>
+          <span class="nav-item">{{ t('user.LOGIN') }}</span>
         </div>
       </div>
     </div>
@@ -36,18 +38,20 @@
 
 <script lang="ts">
   import { defineComponent, ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
 
   export default defineComponent({
     name: 'NavBar',
     setup() {
       let isMenuOpen = ref(false)
+      const { t } = useI18n()
       function openMenu() {
         isMenuOpen.value = true
       }
       function closeMenu() {
         isMenuOpen.value = false
       }
-      return { isMenuOpen, openMenu, closeMenu }
+      return { isMenuOpen, openMenu, closeMenu, t }
     },
   })
 </script>

fittrackee_client/src/i18n.ts

@@ -7,17 +7,13 @@ import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
  * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
  */
 function loadLocaleMessages(): LocaleMessages<VueMessageType> {
-  const locales = require.context(
-    './locales',
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  )
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.ts$/i)
   const messages: LocaleMessages<VueMessageType> = {}
   locales.keys().forEach((key) => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
-      messages[locale] = locales(key)
+      messages[locale] = locales(key).default
     }
   })
   return messages

fittrackee_client/src/locales/en.json

@@ -1,3 +0,0 @@
-{
-  "message": "hello i18n !!"
-}

fittrackee_client/src/locales/en/administration.json

@@ -0,0 +1,3 @@
+{
+  "ADMIN": "Admin"
+}

fittrackee_client/src/locales/en/dashboard.json

@@ -0,0 +1,3 @@
+{
+  "DASHBOARD": "Dashboard"
+}

fittrackee_client/src/locales/en/en.ts

@@ -0,0 +1,13 @@
+import AdministrationTranslations from './administration.json'
+import DashboardTranslations from './dashboard.json'
+import StatisticsTranslations from './statistics.json'
+import UserTranslations from './user.json'
+import WorkoutsTranslations from './workouts.json'
+
+export default {
+  administration: AdministrationTranslations,
+  dashboard: DashboardTranslations,
+  statistics: StatisticsTranslations,
+  user: UserTranslations,
+  workouts: WorkoutsTranslations,
+}

fittrackee_client/src/locales/en/statistics.json

@@ -0,0 +1,3 @@
+{
+  "STATISTICS": "Statistics"
+}

fittrackee_client/src/locales/en/user.json

@@ -0,0 +1,5 @@
+{
+  "LOGIN": "Login",
+  "LOGOUT": "Logout",
+  "REGISTER": "Register"
+}

fittrackee_client/src/locales/en/workouts.json

@@ -0,0 +1,4 @@
+{
+  "ADD_WORKOUT": "Add workout",
+  "WORKOUTS": "Workouts"
+}

fittrackee_client/src/locales/fr/administration.json

@@ -0,0 +1,3 @@
+{
+  "ADMIN": "Admin"
+}

fittrackee_client/src/locales/fr/dashboard.json

@@ -0,0 +1,3 @@
+{
+  "DASHBOARD": "Tableau de Bord"
+}

fittrackee_client/src/locales/fr/fr.ts

@@ -0,0 +1,13 @@
+import AdministrationTranslations from './administration.json'
+import DashboardTranslations from './dashboard.json'
+import StatisticsTranslations from './statistics.json'
+import UserTranslations from './user.json'
+import WorkoutsTranslations from './workouts.json'
+
+export default {
+  administration: AdministrationTranslations,
+  dashboard: DashboardTranslations,
+  statistics: StatisticsTranslations,
+  user: UserTranslations,
+  workouts: WorkoutsTranslations,
+}

fittrackee_client/src/locales/fr/statistics.json

@@ -0,0 +1,3 @@
+{
+  "STATISTICS": "Statistiques"
+}

fittrackee_client/src/locales/fr/user.json

@@ -0,0 +1,5 @@
+{
+  "LOGIN": "Se connecter",
+  "LOGOUT": "Se déconnecter",
+  "REGISTER": "S'inscrire"
+}

fittrackee_client/src/locales/fr/workouts.json

@@ -0,0 +1,4 @@
+{
+  "ADD_WORKOUT": "Ajouter une séance",
+  "WORKOUTS": "Séances"
+}

fittrackee_client/tsconfig.json

@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,