Internationalization Config using vue-i18n

Author: simeonaz

package.json

@@ -16,9 +16,11 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "@vueuse/components": "^13.7.0",
     "@vueuse/core": "^13.5.0",
     "tailwindcss": "^4.1.11",
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "vue-i18n": "^11.1.11"
   },
   "devDependencies": {
     "@vite-pwa/assets-generator": "^1.0.0",

pnpm-lock.yaml

@@ -4,6 +4,10 @@ import { useOnlineStatus } from "./composables/useOnlineStatus";
 
 const { isOnline } = useOnlineStatus();
 // You can use the isOnline variable to show a message or perform actions when user is online or offline
+
+// import the i18n instance
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 </script>
 
 <template>
@@ -27,7 +31,7 @@ const { isOnline } = useOnlineStatus();
           aria-label="GitHub Repository (opens in new tab)"
           class="mt-4 flex items-center justify-center px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition duration-300"
         >
-          ⭐ View on GitHub
+          ⭐ {{ t("view_on_github") }}
         </a>
       </div>
     </main>

src/App.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import DarkModeButton from "./DarkModeButton.vue";
+import LanguageSwitcher from "./LanguageSwitcher.vue";
 </script>
 
 <template>
-  <header class="fixed top-0 inset-x-0 z-50 bg-transparent h-[40px] lg:h-[60px]">
+  <header
+    class="fixed top-0 inset-x-0 z-50 bg-transparent h-[40px] lg:h-[60px]"
+  >
     <div
-      class="max-w-screen-xl mx-auto h-full bg-inherit flex items-center justify-end px-8"
+      class="max-w-screen-xl mx-auto h-full bg-inherit flex justify-end px-8"
     >
-      <DarkModeButton />
+      <div class="flex items-center gap-4">
+        <LanguageSwitcher />
+        <DarkModeButton />
+      </div>
     </div>
   </header>
 </template>

src/assets/icons/language.svg

@@ -10,7 +10,7 @@ const toggleDark = useToggle(isDark);
   <button
     @click="toggleDark()"
     type="button"
-    class="cursor-pointer flex-shrink-0 rounded-md gap-x-1.5 p-1.5 inline-flex items-center"
+    class="cursor-pointer flex-shrink-0 rounded-md inline-flex items-center"
   >
     <!-- Feel free to customize these icons  -->
     {{ isDark ? "☀️" : "🌙" }}

src/components/AppHeader.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { vOnClickOutside } from "@vueuse/components";
+
+const isOpen = ref(false);
+const { locale } = useI18n();
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const close = () => {
+  isOpen.value = false;
+};
+
+const setLang = (lang) => {
+  locale.value = lang;
+  close();
+};
+
+const languages = [
+  { code: "fr", label: "FR", ariaLabel: "Français" },
+  { code: "en", label: "EN", ariaLabel: "English" },
+  { code: "es", label: "ES", ariaLabel: "Español" },
+];
+</script>
+
+<template>
+  <div v-on-click-outside="close">
+    <div class="relative">
+      <button
+        type="button"
+        class="cursor-pointer"
+        @click="toggle"
+        aria-haspopup="menu"
+        :aria-expanded="isOpen"
+      >
+        🌐
+      </button>
+
+      <div
+        v-if="isOpen"
+        class="absolute right-0 mt-2 w-24 rounded-xl border shadow-lg p-1 border-gray-200 dark:border-white/10 bg-white/90 dark:bg-slate-900/90 dark:backdrop-blur transition-colors"
+      >
+        <button
+          v-for="lang in languages"
+          :key="lang.code"
+          type="button"
+          class="flex w-full items-center justify-center gap-2 rounded-lg px-2 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-white/5 transition-colors"
+          :class="{
+            'bg-teal-100 text-teal-700 ring-1 ring-teal-300 dark:bg-teal-500/20 dark:text-teal-300 dark:ring-teal-500/40':
+              locale === lang.code || locale?.value === lang.code,
+          }"
+          @click="setLang(lang.code)"
+          :aria-label="lang.ariaLabel"
+        >
+          <span class="text-teal-700 text-xs">{{ lang.label }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/components/DarkModeButton.vue

@@ -1,6 +1,40 @@
-import './assets/style.css'
+import "./assets/style.css";
 
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+const app = createApp(App);
+
+const i18n = createI18n({
+  legacy: false, // you must set `false`, to use Composition API
+  locale: navigator.language || "en", // get navigator.language or default to "en"
+  fallbackLocale: "en",
+  //   messages are the translations
+  //   create a locales folder and add the translations files
+  //   en.json
+  //   fr.json
+  //   es.json
+  //   then import the translations files
+  //   import en from "./locales/en.json";
+  //   import fr from "./locales/fr.json";
+  //   import es from "./locales/es.json";
+  //   then use the translations files in the app
+  messages: {
+    en: {
+      view_on_github: "View on GitHub",
+    },
+    fr: {
+      view_on_github: "Voir sur GitHub",
+    },
+    es: {
+      view_on_github: "Ver en GitHub",
+    },
+  },
+});
+
+// use the i18n instance
+app.use(i18n);
+
+// mount the app
+app.mount("#app");