feat: add i18n capabilities

package.json

@@ -10,8 +10,9 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "vanilla-tilt": "^1.7.2",
-    "vue": "^2.6.10",
+    "vue": "^2.6.14",
     "vue-class-component": "^7.0.2",
+    "vue-i18n": "8.27.1",
     "vue-property-decorator": "^8.1.0"
   },
   "devDependencies": {
@@ -20,7 +21,7 @@
     "@vue/cli-service": "^3.7.0",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
-    "typescript": "^3.4.3",
+    "typescript": "^4.8.4",
     "vue-template-compiler": "^2.5.21"
   },
   "postcss": {

src/App.vue

@@ -12,6 +12,7 @@ import { tID } from '@/model/skills';
 import Home from './components/Home.vue';
 import Timeline from './components/Timeline.vue';
 import SkillPicker from './components/SkillPicker.vue';
+import { Locales } from './locales';
 
 
 @Component({
@@ -48,6 +49,13 @@ export default class App extends Vue {
 			return;
 		}
 		picker.select(tID.Vue, false);
+
+		// change app language
+		if( navigator.language.indexOf('fr') > -1 ){
+			this.$i18n.locale = Locales.FR;
+		} else {
+			this.$i18n.locale = Locales.EN;
+		}
 	}
 
 }

src/components/Home.vue

@@ -14,7 +14,7 @@
 			<h1>Adrien<br>Marquès</h1>
 			<br>
 			<br>
-			<h2>FREELANCE DEVELOPER</h2>
+			<h2>{{ $t('home.title') }}</h2>
 		</section>
 
 		<div class='separator'></div>

src/locales/en.json

@@ -0,0 +1,3 @@
+{
+	"home.title": "FREELANCE DEVELOPER"
+}

src/locales/fr.json

@@ -0,0 +1,3 @@
+{
+	"home.title": "DÉVELOPPEUR FREELANCE"
+}

src/locales/index.ts

@@ -0,0 +1,20 @@
+export enum Locales {
+	EN = 'en-US',
+	FR = 'fr-FR',
+}
+
+export const LOCALES = [
+	{ value: Locales.EN, caption: 'English' },
+	{ value: Locales.FR, caption: 'Français' }
+]
+
+
+import en from './en.json';
+import fr from './fr.json';
+
+export const messages = {
+	[Locales.EN]: en,
+	[Locales.FR]: fr
+};
+
+export const defaultLocale = Locales.EN;

src/main.ts

@@ -1,8 +1,19 @@
 import Vue from 'vue';
 import App from './App.vue';
+import VueI18n from 'vue-i18n';
+import { messages, defaultLocale } from '@/locales';
 
 Vue.config.productionTip = false;
 
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+	messages,
+	locale: defaultLocale,
+	fallbackLocale: defaultLocale
+});
+
 new Vue({
+	i18n,
 	render: (h) => h(App),
 }).$mount('#app');

tsconfig.json

@@ -9,6 +9,7 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": [