feat: add localisation

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "pinia": "^2.0.14",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "vue-i18n": "^9.1.10"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.0",
@@ -528,6 +529,88 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
+      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.1.10",
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
+      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
+      "dependencies": {
+        "@intlify/shared": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
+      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
+      "dependencies": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/message-resolver": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
+      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/runtime": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
+      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
+      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
+      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
+      "dependencies": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -4142,6 +4225,23 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
+      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
+      "dependencies": {
+        "@intlify/core-base": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10",
+        "@vue/devtools-api": "^6.0.0-beta.7"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.38.5",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.5.tgz",
@@ -4594,6 +4694,67 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@intlify/core-base": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
+      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
+      "requires": {
+        "@intlify/devtools-if": "9.1.10",
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
+      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
+      "requires": {
+        "@intlify/shared": "9.1.10"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
+      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
+      "requires": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "source-map": "0.6.1"
+      }
+    },
+    "@intlify/message-resolver": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
+      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w=="
+    },
+    "@intlify/runtime": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
+      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
+      "requires": {
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
+      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
+      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
+      "requires": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -7081,6 +7242,17 @@
         }
       }
     },
+    "vue-i18n": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
+      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
+      "requires": {
+        "@intlify/core-base": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10",
+        "@vue/devtools-api": "^6.0.0-beta.7"
+      }
+    },
     "vue-tsc": {
       "version": "0.38.5",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.5.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "pinia": "^2.0.14",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.1.10"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",

src/components/common/LeftSection.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="title">
+      {{ title }}
+    </div>
+    <div class="body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.wrapper{
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  font-size: 18px;
+  font-weight: bolder;
+  font-variant: titling-caps;
+  text-transform: capitalize;
+}
+.body {
+  flex: 1;
+}
+</style>

src/components/common/RightSection.vue

@@ -25,6 +25,7 @@ defineProps<{
   font-size: 18px;
   font-weight: bolder;
   font-variant: titling-caps;
+  text-transform: capitalize;
 }
 .body {
   flex: 1;

src/components/education/MyEducation.vue

@@ -1,10 +1,13 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue";
+</script>
 <template>
-  <div>
+  <LeftSection :title="$t('section.education')">
     My Education
-  </div>
+  </LeftSection>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "MyEducation"
 };

src/components/experiences/MyExperiences.vue

@@ -3,7 +3,7 @@ import RightSection from "@/components/common/RightSection.vue";
 </script>
 
 <template>
-  <RightSection title="Experiences">
+  <RightSection :title="$t('section.experiences')">
     {{ message }}
   </RightSection>
 </template>

src/components/informations/MyHobbies.vue

@@ -1,10 +1,14 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue"
+</script>
+
 <template>
-  <div>
+  <LeftSection :title="$t('section.hobbies')">
     My Hobbies
-  </div>
+  </LeftSection>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "MyHobbies"
 };

src/components/informations/MyInformations.vue

@@ -1,10 +1,14 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue";
+</script>
+
 <template>
-  <div>
+  <LeftSection :title="$t('section.information')">
     My Informations
-  </div>
+  </LeftSection>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "MyInformations"
 };

src/components/informations/MyLanguages.vue

@@ -1,10 +1,13 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue";
+</script>
 <template>
-  <div>
+  <LeftSection :title="$t('section.languages')">
     My Languages
-  </div>
+  </LeftSection>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "MyLanguages"
 };

src/components/skills/MySkills.vue

@@ -3,7 +3,7 @@ import RightSection from "@/components/common/RightSection.vue";
 </script>
 
 <template>
-  <RightSection title="Skills">
+  <RightSection :title="$t('section.skills')">
     Here are my skills
   </RightSection>
 </template>

src/main.ts

@@ -1,11 +1,29 @@
 import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 
 import "./assets/main.css";
 
+const i18n = createI18n({
+  locale: "fr",
+  messages: {
+    fr: {
+      section: {
+        information: "informations",
+        education: "formation",
+        languages: "langues",
+        hobbies: "hobbies",
+        experiences: "expériences",
+        skills: "compétences",
+      },
+    },
+    en: { hello: "こんにちは！" },
+  },
+});
+
 const app = createApp(App);
 
 app.use(createPinia());
-
+app.use(i18n);
 app.mount("#app");