add the language selector component

components/LanguageSelector.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-select
+    v-model="locale"
+    :items="items"
+    :key="`locale-${locale}`"
+    density="compact"
+    variant="plain"
+    :hide-details="true"
+  />
+</template>
+
+<script setup lang="ts">
+  const items = [
+    { value: 'fr', title: 'FR' },
+    { value: 'en', title: 'EN' },
+  ]
+
+  const { setLocale } = useI18n()
+
+  const locale = ref('fr')
+
+  watch(locale, () => {
+    setLocale(locale.value)
+  });
+</script>
+
+<style scoped lang="scss">
+:deep(.v-field__input) {
+  padding: 0;
+}
+
+:deep(.v-field__append-inner) {
+  padding-top: 3px !important;
+}
+</style>

components/Topbar.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="topbar">
     <div class="icon-links">
+      <LanguageSelector class="mr-3" />
+
       <ThemeSwitcher />
 
       <nuxt-link

lang/en.json

@@ -1,5 +1,5 @@
 {
-  "Olivier Massot - Fullstack Developer": "Olivier Massot - Fullstack Developer",
+  "Olivier Massot - Fullstack developer": "Olivier Massot - Fullstack Developer",
   "Find me on Github": "Find me on Github",
   "Find me on Stackoverflow": "Find me on Stackoverflow",
   "Find me on LinkedIn": "Find me on LinkedIn",

lang/fr.json

@@ -1,5 +1,5 @@
 {
-  "Olivier Massot - Fullstack Developer": "Olivier Massot - Développeur Fullstack",
+  "Olivier Massot - Fullstack developer": "Olivier Massot - Développeur Fullstack",
   "Find me on Github": "Retrouvez moi sur Github",
   "Find me on Stackoverflow": "Retrouvez moi sur Stackoverflow",
   "Find me on LinkedIn": "Retrouvez moi sur LinkedIn",

nuxt.config.ts

@@ -84,5 +84,26 @@ export default defineNuxtConfig({
     url: 'https://olivier-massot.ogene.fr'
   },
 
+  i18n: {
+    langDir: 'lang',
+    lazy: true,
+    locales: [
+      {
+        code: 'en',
+        iso: 'en-US',
+        file: 'en.json',
+        name: 'English',
+      },
+      {
+        code: 'fr',
+        iso: 'fr-FR',
+        file: 'fr.json',
+        name: 'Français',
+      },
+    ],
+    defaultLocale: 'fr',
+    detectBrowserLanguage: true,
+  },
+
   compatibilityDate: '2024-07-02',
 })