Client - install vue-i18n

fittrackee_client/src/components/HelloI18n.vue

@@ -0,0 +1,30 @@
+<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/i18n.ts

@@ -0,0 +1,31 @@
+import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
+
+/**
+ * Load locale messages
+ *
+ * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-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 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)
+    }
+  })
+  return messages
+}
+
+export default createI18n({
+  legacy: false,
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages(),
+})

fittrackee_client/src/locales/en.json

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

fittrackee_client/src/main.ts

@@ -3,5 +3,6 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import store from './store'
+import i18n from './i18n'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(i18n).use(store).use(router).mount('#app')