Started to work on localization

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "vue": "^3.5.13",
+        "vue-i18n": "^11.1.2",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -855,6 +856,47 @@
         "node": ">=18"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.2.tgz",
+      "integrity": "sha512-nmG512G8QOABsserleechwHGZxzKSAlggGf9hQX0nltvSwyKNVuB/4o6iFeG2OnjXK253r8p8eSDOZf8PgFdWw==",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.2",
+        "@intlify/shared": "11.1.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.2.tgz",
+      "integrity": "sha512-T/xbNDzi+Yv0Qn2Dfz2CWCAJiwNgU5d95EhhAEf4YmOgjCKktpfpiUSmLcBvK1CtLpPQ85AMMQk/2NCcXnNj1g==",
+      "dependencies": {
+        "@intlify/shared": "11.1.2",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.2.tgz",
+      "integrity": "sha512-dF2iMMy8P9uKVHV/20LA1ulFLL+MKSbfMiixSmn6fpwqzvix38OIc7ebgnFbBqElvghZCW9ACtzKTGKsTGTWGA==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -2533,6 +2575,25 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.2.tgz",
+      "integrity": "sha512-MfdkdKGUHN+jkkaMT5Zbl4FpRmN7kfelJIwKoUpJ32ONIxdFhzxZiLTVaAXkAwvH3y9GmWpoiwjDqbPIkPIMFA==",
+      "dependencies": {
+        "@intlify/core-base": "11.1.2",
+        "@intlify/shared": "11.1.2",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.2",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

src/assets/localization/en/localization.json

@@ -0,0 +1,5 @@
+{
+    "message": {
+      "hello": "hello world"
+    }
+}

src/assets/localization/fr/localization.json

@@ -0,0 +1,5 @@
+{
+    "message": {
+      "hello": "BONJOUR"
+    }
+  }

src/assets/localization/ja/localization.json

@@ -0,0 +1,5 @@
+{
+    "message": {
+      "hello": "こんにちは、世界"
+    }
+  }

src/components/home/welcome.vue

@@ -7,7 +7,7 @@
            
             <div id="name_div_right_container">
               <div class="test" id="welcome_text_div">
-                <h1>Hello ! I'm </h1>
+                <h1>Hello ! I'm {{ $t('message.hello') }} </h1>
                 <h2>AI enthousiast</h2>
               </div>
               <div id="social_networks" class="test">

src/main.js

@@ -3,9 +3,35 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { createI18n } from 'vue-i18n'
+
+// Localization
+
+import fr from "./assets/localization/fr/localization.json";
+import en from "./assets/localization/en/localization.json";
+import ja from "./assets/localization/ja/localization.json";
+
+let userLanguage = navigator.language || navigator.userLanguage;
+
+if(userLanguage.split("-")[0] == "fr") userLanguage = "fr";
+else if(userLanguage.split("-")[0] == "jp" || userLanguage.split("-")[0] == "ja") userLanguage = "ja";
+else userLanguage = "en";
+
+const i18n = createI18n({
+    locale: userLanguage,
+    fallbackLocale: 'en',
+    messages: {
+      en: en,
+      ja: ja,
+      fr: fr
+    }
+})
+
+// Creating App
 
 const app = createApp(App)
 
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')