Integrate i18n

src/i18n.js

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n';
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+
+const messages = {
+    en,
+    fr,
+};
+const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages,
+});
+export default i18n;

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "footer": {
+    "allRightsReserved": "All rights reserved"
+  }
+}

src/locales/fr.json

@@ -0,0 +1,5 @@
+{
+  "footer": {
+    "allRightsReserved": "Tout droits réservés"
+  }
+}

src/main.js

@@ -12,6 +12,7 @@ import vueGoogleOauth from 'vue3-google-login'
 import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import {useUserStore} from "@/stores/userStore.js";
+import i18n from './i18n.js';
 
 const vuetify = createVuetify({
     components,
@@ -25,6 +26,10 @@ const app = createApp(App)
     .use(vueGoogleOauth, {
         clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
     })
+    .use(i18n)
+
+// Make $t globally available
+app.config.globalProperties.$t = i18n.global.t;
 
 // this force the creation of the stores
 const subscriptionStore = useSubscriptionStore()

src/views/main/Footer.vue

@@ -2,7 +2,7 @@
   
   <footer>
     <div class="p-4 text-center font-sans">
-      Hutopy &copy;{{ new Date().getFullYear() }} - Tout droits réservés
+      Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
   </footer>
   

src/views/main/Header.vue

@@ -70,6 +70,9 @@
 
       <v-icon class="mx-2">mdi-bell-outline</v-icon>
 
+      <v-btn variant="text"  @click="changeLanguage('fr')">Français</v-btn>
+      <v-btn variant="text" class="mx-2" @click="changeLanguage('en')">English</v-btn>
+
       <div class="text-center">
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
@@ -138,7 +141,9 @@ import {useRouter} from 'vue-router';
 import {useSideBarStore} from '@/stores/sideBarStore.js';
 import {useUserStore} from "@/stores/userStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const authStore = useAuthStore()
 const userStore = useUserStore()
 const sideBarStore = useSideBarStore()
@@ -147,6 +152,14 @@ const router = useRouter();
 const searchQuery = ref("");
 const showSearch = ref(false);
 
+// List of available languages
+const selectedLanguage = ref(locale.value);
+
+function changeLanguage(lang) {
+  locale.value = lang;
+  selectedLanguage.value = lang;
+}
+
 const onSearch = () => {
   const query = searchQuery.value.trim();
   if (!query) {