diff --git a/package-lock.json b/package-lock.json index 89511c9..1a01151 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e7418a3..f77721f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "vue": "^3.5.13", + "vue-i18n": "^11.1.2", "vue-router": "^4.5.0" }, "devDependencies": { diff --git a/src/assets/localization/en/localization.json b/src/assets/localization/en/localization.json new file mode 100644 index 0000000..211b0be --- /dev/null +++ b/src/assets/localization/en/localization.json @@ -0,0 +1,5 @@ +{ + "message": { + "hello": "hello world" + } +} \ No newline at end of file diff --git a/src/assets/localization/fr/localization.json b/src/assets/localization/fr/localization.json new file mode 100644 index 0000000..2b21256 --- /dev/null +++ b/src/assets/localization/fr/localization.json @@ -0,0 +1,5 @@ +{ + "message": { + "hello": "BONJOUR" + } + } \ No newline at end of file diff --git a/src/assets/localization/ja/localization.json b/src/assets/localization/ja/localization.json new file mode 100644 index 0000000..34c8aee --- /dev/null +++ b/src/assets/localization/ja/localization.json @@ -0,0 +1,5 @@ +{ + "message": { + "hello": "こんにちは、世界" + } + } \ No newline at end of file diff --git a/src/components/home/welcome.vue b/src/components/home/welcome.vue index 069f7ab..64fbb00 100644 --- a/src/components/home/welcome.vue +++ b/src/components/home/welcome.vue @@ -7,7 +7,7 @@
-

Hello ! I'm

+

Hello ! I'm {{ $t('message.hello') }}

AI enthousiast

diff --git a/src/main.js b/src/main.js index 5a5dbdb..98686be 100644 --- a/src/main.js +++ b/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')