feat(i18n): Add internationalisation

Author: Benoit Ngo

apps/front/modules_config/nuxt/i18n.config.ts

@@ -0,0 +1,10 @@
+import localeFr from "../../src/locales/fr";
+import localeEn from "../../src/locales/en";
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: "fr",
+  messages: {
+    en: localeEn,
+    fr: localeFr,
+  },
+}));

apps/front/nuxt.config.ts

@@ -3,10 +3,13 @@ import svgLoader from "vite-svg-loader";
 
 export default defineNuxtConfig({
   srcDir: "src/",
-  modules: ["@pinia/nuxt"],
+  modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
   runtimeConfig: {
     API_URL: process.env.API_URL || "",
   },
+  i18n: {
+    vueI18n: "./modules_config/nuxt/i18n.config.ts", // if you are using custom path, default
+  },
   app: {
     head: {
       // @see https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template

apps/front/package.json

@@ -21,6 +21,7 @@
     "vue-tsc": "^1.6.5"
   },
   "dependencies": {
+    "@nuxtjs/i18n": "^8.0.0-rc.5",
     "@pinia/nuxt": "^0.4.11",
     "defu": "^6.1.2",
     "h3": "^1.8.2",

apps/front/src/components/layout/AppHeader.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="grid">
-    <div class="col-2 col-offset-8">
-      <NuxtLink to="/auth/register">Register</NuxtLink>
-    </div>
+    <div class="col-2 col-offset-8"></div>
     <div class="col-2">
-      <p v-if="username">Welcome {{ username }}</p>
+      <p
+        v-if="username"
+        v-t="{
+          path: 'components.layout.appHeader.welcome',
+          args: { username },
+        }"
+      ></p>
     </div>
   </div>
 </template>

apps/front/src/components/layout/menu/AppMenu.vue

@@ -2,32 +2,33 @@
   <TieredMenu :model="items" class="h-screen sticky w-full"> </TieredMenu>
 </template>
 <script setup lang="ts">
+const { t } = useI18n();
 const items = computed(() => [
   {
-    label: "Users",
+    label: t("components.layout.menu.appMenu.users"),
     icon: "pi pi-fw pi-file",
     to: "/users",
   },
   {
-    label: "Page1",
+    label: t("components.layout.menu.appMenu.page1"),
     icon: "pi pi-fw pi-pencil",
     to: "/demo/page1",
   },
   {
-    label: "Page2",
+    label: t("components.layout.menu.appMenu.page2"),
     icon: "pi pi-fw pi-pencil",
     to: "/demo/page2",
   },
   {
-    label: "Page3",
+    label: t("components.layout.menu.appMenu.page3"),
     icon: "pi pi-fw pi-pencil",
     to: "/demo/page3",
   },
   {
     separator: true,
   },
   {
-    label: "Quit",
+    label: t("components.layout.menu.appMenu.quit"),
     icon: "pi pi-fw pi-power-off",
   },
 ]);

apps/front/src/components/user/UserCreateForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1>Register</h1>
+  <h1 v-t="{ path: 'components.user.createForm.title' }"></h1>
   <form @submit.prevent.stop="registerUser">
     <UserForm
       v-model:email="email"
@@ -8,7 +8,9 @@
       :is-password-confirmed="isPasswordConfirmed"
     />
     {{ errorMessage }}
-    <button :disabled="!securedPassword">Register</button>
+    <button :disabled="!isPasswordConfirmed">
+      {{ $t("components.user.createForm.ok") }}
+    </button>
   </form>
 </template>
 <script setup lang="ts">
@@ -25,10 +27,6 @@ const {
 } = useUser();
 
 const registerUser = async () => {
-  if (!securedPassword.value) {
-    // That mean you call this action without checking that data are OK. this shall not be executed
-    throw createError("You need a valid password");
-  }
   try {
     await createUser(email.value, securedPassword.value);
     await navigateTo("/users");

apps/front/src/components/user/UserForm.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <label for="email">Email</label>
+    <label for="email">{{ $t("components.user.form.email") }}</label>
     <input
       type="text"
       :value="email"
       @input="$emit('update:email', clearInput($event))"
     />
   </div>
   <div>
-    <label for="password">Password</label>
+    <label for="password">{{ $t("components.user.form.password") }}</label>
     <input
       name="password"
       type="password"
@@ -17,15 +17,17 @@
     />
   </div>
   <div>
-    <label for="passwordConfirm">Confirm password</label>
+    <label for="passwordConfirm">{{
+      $t("components.user.form.passwordConfirm")
+    }}</label>
     <input
       name="passwordConfirm"
       type="password"
       :value="passwordConfirm"
       @input="$emit('update:passwordConfirm', clearInput($event))"
     />
     <span v-if="!isPasswordConfirmed" class="text-danger">
-      The confirm password is not the same as the password
+      {{ $t("components.user.form.errorPasswordConfirm") }}
     </span>
   </div>
 </template>

apps/front/src/components/user/UserUpdateForm.vue

@@ -1,8 +1,10 @@
 <template>
-  <div v-show="userPending">(Chargement)</div>
-
-  <form v-if="!userPending" @submit.prevent.stop="updateUser">
-    <h1>Update user {{ data.email }}</h1>
+  <div
+    v-show="userPending"
+    v-t="{ path: 'components.user.updateForm.pending' }"
+  ></div>
+  <form v-if="data" @submit.prevent.stop="updateUser">
+    <h1 v-t="{ path: 'components.user.updateForm.title', args: data }"></h1>
     <UserForm
       v-model:email="email"
       v-model:password="password"
@@ -11,7 +13,9 @@
     />
     {{ errorMessage }}
     {{ error }}
-    <button type="submit">Save</button>
+    <Button type="submit" :disabled="!isPasswordConfirmed">{{
+      $t("components.user.updateForm.ok")
+    }}</Button>
   </form>
 </template>
 

apps/front/src/composables/api/user/useGetUser.ts

@@ -4,7 +4,7 @@ import useAppFetch from "~/composables/useAppFetch";
 
 export default async function useGetUser(userId: string) {
   return useAppFetch<User>(() => "/users/" + userId, {
-    key: "getUser",
+    key: "getUser" + userId,
     method: GET,
   });
 }

apps/front/src/composables/api/user/useListUsers.ts

@@ -6,5 +6,6 @@ export default async function useListUsers() {
   return useAppFetch<Array<User>>(() => "/users", {
     key: "listUsers",
     method: GET,
+    lazy: true,
   });
 }