Added i18n Translation Support

Co-Authored-By: Tixx <83774803+WiserTixx@users.noreply.github.com>

package-lock.json

@@ -18,6 +18,7 @@
         "tailwindcss": "^4.1.17",
         "tailwindcss-animate": "^1.0.7",
         "vue": "^3.5.25",
+        "vue-i18n": "^11.2.2",
         "vue-router": "^4.6.3"
       },
       "devDependencies": {
@@ -719,6 +720,47 @@
         "@swc/helpers": "^0.5.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.2.tgz",
+      "integrity": "sha512-0mCTBOLKIqFUP3BzwuFW23hYEl9g/wby6uY//AC5hTgQfTsM2srCYF2/hYGp+a5DZ/HIFIgKkLJMzXTt30r0JQ==",
+      "dependencies": {
+        "@intlify/message-compiler": "11.2.2",
+        "@intlify/shared": "11.2.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.2.tgz",
+      "integrity": "sha512-XS2p8Ff5JxWsKhgfld4/MRQzZRQ85drMMPhb7Co6Be4ZOgqJX1DzcZt0IFgGTycgqL8rkYNwgnD443Q+TapOoA==",
+      "dependencies": {
+        "@intlify/shared": "11.2.2",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.2.tgz",
+      "integrity": "sha512-OtCmyFpSXxNu/oET/aN6HtPCbZ01btXVd0f3w00YsHOb13Kverk1jzA2k47pAekM55qbUw421fvPF1yxZ+gicw==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -3178,6 +3220,25 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.2.tgz",
+      "integrity": "sha512-ULIKZyRluUPRCZmihVgUvpq8hJTtOqnbGZuv4Lz+byEKZq4mU0g92og414l6f/4ju+L5mORsiUuEPYrAuX2NJg==",
+      "dependencies": {
+        "@intlify/core-base": "11.2.2",
+        "@intlify/shared": "11.2.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.6.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",

package.json

@@ -21,6 +21,7 @@
     "tailwindcss": "^4.1.17",
     "tailwindcss-animate": "^1.0.7",
     "vue": "^3.5.25",
+    "vue-i18n": "^11.2.2",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {

src/components/AppFooter.vue

@@ -79,7 +79,7 @@ import { RouterLink } from 'vue-router'
             rel="noopener noreferrer"
             class="text-xs text-orange-600 hover:text-orange-700 underline-offset-2 hover:underline dark:text-orange-400 dark:hover:text-orange-300"
           >
-            Support on Patreon
+            {{ $t("message.footer.support_on_patreon") }}
           </a>
         </div>
 
@@ -93,7 +93,7 @@ import { RouterLink } from 'vue-router'
               to="/about"
               class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
             >
-              About
+              {{ $t("message.footer.about") }}
             </RouterLink>
             <span>&middot;</span>
             <a
@@ -102,7 +102,7 @@ import { RouterLink } from 'vue-router'
               rel="noopener noreferrer"
               class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
             >
-              Privacy Policy
+              {{ $t("message.footer.privacy_policy") }}
             </a>
             <span>&middot;</span>
             <a
@@ -111,7 +111,7 @@ import { RouterLink } from 'vue-router'
               rel="noopener noreferrer"
               class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
             >
-              Terms &amp; Conditions
+              {{ $t("message.footer.terms_conditions") }}
             </a>
           </div>
         </div>

src/components/AppNavigation.vue

@@ -54,7 +54,7 @@ function closeMobileMenu() {
                   rel="noopener noreferrer"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  Forum
+                  {{ $t('message.nav.forums') }}
                 </a>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -66,7 +66,7 @@ function closeMobileMenu() {
                   rel="noopener noreferrer"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  Docs
+                  {{ $t('message.nav.docs') }}
                 </a>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -76,7 +76,7 @@ function closeMobileMenu() {
                   to="/communities"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  Communities
+                  {{ $t('message.nav.communities') }}
                 </RouterLink>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -86,7 +86,7 @@ function closeMobileMenu() {
                   to="/servers"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  Servers
+                  {{ $t('message.nav.servers') }}
                 </RouterLink>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -96,7 +96,7 @@ function closeMobileMenu() {
                   to="/stats"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  Statistics
+                  {{ $t('message.nav.statistics') }}
                 </RouterLink>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -108,7 +108,7 @@ function closeMobileMenu() {
                   rel="noopener noreferrer"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  GitHub
+                  {{ $t('message.nav.github') }}
                 </a>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -120,7 +120,7 @@ function closeMobileMenu() {
                   rel="noopener noreferrer"
                   :class="cn(navigationMenuTriggerStyle(), 'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white')"
                 >
-                  Patreon
+                  {{ $t('message.nav.patreon') }}
                 </a>
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -157,13 +157,6 @@ function closeMobileMenu() {
         class="md:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
       >
         <div class="px-4 py-3 space-y-1">
-          <RouterLink
-            to="/about"
-            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
-            @click="closeMobileMenu"
-          >
-            About
-          </RouterLink>
           <a
             href="https://forum.beammp.com"
             target="_blank"
@@ -171,7 +164,7 @@ function closeMobileMenu() {
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            Forum
+            {{ $t('message.nav.forums') }}
           </a>
           <a
             href="https://docs.beammp.com"
@@ -180,28 +173,28 @@ function closeMobileMenu() {
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            Docs
+            {{ $t('message.nav.docs') }}
           </a>
           <RouterLink
             to="/communities"
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            Communities
+            {{ $t('message.nav.communities') }}
           </RouterLink>
           <RouterLink
             to="/servers"
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            Servers
+            {{ $t('message.nav.servers') }}
           </RouterLink>
           <RouterLink
             to="/stats"
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            Statistics
+            {{ $t('message.nav.statistics') }}
           </RouterLink>
           <a
             href="https://github.com/BeamMP/BeamMP"
@@ -210,7 +203,7 @@ function closeMobileMenu() {
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            GitHub
+            {{ $t('message.nav.github') }}
           </a>
           <a
             href="https://www.patreon.com/BeamMP"
@@ -219,7 +212,7 @@ function closeMobileMenu() {
             class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
             @click="closeMobileMenu"
           >
-            Patreon
+            {{ $t('message.nav.patreon') }}
           </a>
         </div>
       </div>

src/components/ThemeToggle.vue

@@ -45,7 +45,7 @@ onMounted(() => {
           ? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
           : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
       ]"
-      title="Light mode"
+      :title="$t('message.theme.light')"
       @click="setTheme('light')"
     >
       <Sun class="w-4 h-4" />
@@ -57,7 +57,7 @@ onMounted(() => {
           ? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
           : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
       ]"
-      title="System theme"
+      :title="$t('message.theme.system')"
       @click="setTheme('system')"
     >
       <Monitor class="w-4 h-4" />
@@ -69,7 +69,7 @@ onMounted(() => {
           ? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
           : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
       ]"
-      title="Dark mode"
+      :title="$t('message.theme.dark')"
       @click="setTheme('dark')"
     >
       <Moon class="w-4 h-4" />

src/i18n.js

@@ -0,0 +1,38 @@
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+export const SUPPORT_LOCALES = ['en']
+
+export function setupI18n(options = { locale: 'en' }) {
+  const i18n = createI18n(options)
+  setI18nLanguage(i18n, options.locale)
+  return i18n
+}
+
+export function setI18nLanguage(i18n, locale) {
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+  /**
+   * NOTE:
+   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
+   * The following is an example for axios.
+   *
+   * axios.defaults.headers.common['Accept-Language'] = locale
+   */
+  document.querySelector('html').setAttribute('lang', locale)
+}
+
+export async function loadLocaleMessages(i18n, locale) {
+  // load locale messages with dynamic import
+  const messages = await import(
+    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+  )
+
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+
+  return nextTick()
+}

src/locales/en.json

@@ -0,0 +1,514 @@
+{
+  "message": {
+    "theme": {
+      "light": "Light mode",
+      "dark": "Dark mode",
+      "system": "System"
+    },
+    "nav": {
+      "home": "Home",
+      "forums": "Forums",
+      "docs": "Docs",
+      "communities": "Communities",
+      "servers": "Servers",
+      "statistics": "Statistics",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "theme": {
+        "light": "Light Theme",
+        "dark": "Dark Theme",
+        "system": "System Theme"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Support us on Patreon",
+      "about": "About",
+      "privacy_policy": "Privacy Policy",
+      "terms_conditions": "Terms & Conditions"
+    },
+    "404": {
+      "title": "Page Not Found",
+      "description": "The page you requested doesn’t exist. It may have been moved or removed.",
+      "return_home": "Return Home"
+    },
+    "home": {
+      "hero": {
+        "title": "Multiplayer for BeamNG.Drive",
+        "subtitle": "Experience the ultimate soft-body physics with friends. Race, roleplay, or just cruise together.",
+        "download_now": "Download Now",
+        "browse_servers": "Browse Servers"
+      },
+      "metrics": {
+        "active_players": "Active Players",
+        "players_online": "Players Online",
+        "public_servers": "Public Servers",
+        "all_servers": "All Servers"
+      },
+      "why_choose_beammp": "Why Choose BeamMP?",
+      "features": {
+        "stable_servers": {
+          "title": "Stable Servers",
+          "description": "BeamMP allows for stable servers, with a variety of servers located across the globe."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "BeamMP uses the same maps, vehicles & mods so you don't need to learn anything new!"
+        },
+        "standalone": {
+          "title": "Standalone",
+          "description": "BeamMP doesn't modify your original installation, so you can play either singleplayer or multiplayer."
+        },
+        "sync": {
+          "title": "Sync Quality",
+          "description": "BeamMP updates your vehicle position ~100 times per second, allowing for a smooth overall experience."
+        }
+      },
+      "communities": {
+        "join": "Join a Thriving Community",
+        "description": "Discover diverse gameplay experiences across hundreds of unique servers",
+        "racing": {
+          "name": "Racing Communities",
+          "description": "Competitive racing leagues and time trials with players worldwide"
+        },
+        "roleplay": {
+          "name": "Roleplay Servers",
+          "description": "Immersive roleplay experiences from police chases to delivery services"
+        },
+        "crash": {
+          "name": "Crash & Derby",
+          "description": "Demolition derbies and destruction-focused gameplay modes"
+        },
+        "freeroam": {
+          "name": "Freeroam",
+          "description": "Casual multiplayer sessions exploring maps with friends"
+        }
+      },
+      "find": {
+        "title": "Find Your Perfect Server",
+        "description": "Browse hundreds of active servers with different game modes, mods, and communities. From competitive racing to casual free roam, there's something for everyone.",
+        "points": {
+          "custom": "Custom Game Modes",
+          "custom_desc": "Unique experiences created by the community",
+          "moderation": "Active Moderation",
+          "moderation_desc": "Safe and friendly gaming environment",
+          "global": "Global Network",
+          "global_desc": "Servers located worldwide for low latency"
+        },
+        "browse_all_servers": "Browse All Servers"
+      },
+      "devFeatures": {
+        "title": "Built for Developers",
+        "description": "Create custom game modes, host your own server, and contribute to the project",
+        "lua": {
+          "title": "Lua API",
+          "description": "Powerful server-side Lua scripting for custom game modes and features"
+        },
+        "docs": {
+          "title": "Documentation",
+          "description": "Comprehensive guides and API references for server development"
+        },
+        "openSource": {
+          "title": "Open Source",
+          "description": "Community-driven development with source available on GitHub"
+        },
+        "learn_more": "Learn More",
+        "host": {
+          "title": "Ready to Host Your Own Server?",
+          "description": "Download the server files and create your own unique BeamMP experience",
+          "windows": "Windows Server",
+          "linux": "Linux Builds"
+        }
+      },
+      "faq": {
+        "title": "Frequently Asked Questions",
+        "0": {
+          "question": "The server list is not showing up!",
+          "answer":
+            "Try restarting BeamMP as this can sometimes happen. If this fails to fix your issue please create a topic on our forum or visit the support channel on our discord."
+        },
+        "1": {
+          "question": "How do I open a ticket in case something doesn't work or I have questions?",
+          "answer":
+            "Please check the #how-to-use channel in Discord and on our forum. Please give an accurate description of what you have done so the support team will help you in a fast and effective way."
+        },
+        "2": {
+          "question": "Help! I'm getting error codes",
+          "answer":
+            "Please head over to our forum and see if anyone has had the issue before. It is likely that someone else has at some point and therefore there will also probably be a solution posted with it too in the replies. Alternatively visit our discord where the larger portion of community is currently based."
+        },
+        "3": {
+          "question": "Does this work with pirated versions of BeamNG.drive?",
+          "answer":
+            "We don't know if it works with pirated versions of BeamNG.drive, but we will not provide any support to non legit copies of the game. Nor will we change to support it."
+        },
+        "4": {
+          "question": "How do I host a server?",
+          "answer":
+            "The server files required for hosting your own server can be found at the top of this page below the client download. You will also require an authentication key which can be found from keymaster. Further information around the setup can be found on our wiki."
+        },
+        "5": {
+          "question": "Can I use mods?",
+          "answer":
+            "Mods are supported. These are installed on the server. See our wiki for more information."
+        }
+      },
+      "stats": {
+        "active_players": "Active Players",
+        "global_servers": "Global Servers",
+        "total_downloads": "Total Downloads"
+      }
+    },
+    "communities": {
+      "title": "Communities",
+      "description": "Discover thriving communities built around BeamMP. From competitive racing leagues to casual free roam sessions, find your perfect group to play with.",
+      "starting": {
+        "title": "Want to Start Your Own Community?",
+        "description": "Host your own BeamMP server and build a community around your favorite game modes",
+        "setup_guide": "Server Setup Guide",
+        "join_discord": "Join Our Discord"
+      }
+    },
+    "servers": {
+      "title": "Servers",
+      "description": "Browse and join BeamMP servers from around the world. Find your favorite game modes, communities, and experiences all in one place.",
+      "show_only": "Show Only:",
+      "loading_servers": "Loading servers...",
+      "server_count": "0 servers found | 1 server found | {count} servers found",
+      "players_found": "0 players | 1 player | {count} players",
+      "filters": {
+        "hide_empty": "Hide Empty",
+        "hide_full": "Hide Full",
+        "search": "Search Servers...",
+        "hide_password": "Hide Password Protected",
+        "show_official": "Official",
+        "show_partner": "Partner",
+        "show_featured": "Featured"
+      },
+      "table_headers": {
+        "location": "Location",
+        "name": "Server Name",
+        "map": "Map",
+        "players": "Players",
+        "mods": "Mods",
+        "status": "Status"
+      }
+    },
+    "statistics": {
+      "title": "Statistics",
+      "description": "Live snapshot metrics from active servers and a player volume timeline. Releases can be annotated on the chart.",
+      "loading": "Loading…",
+      "peak": "Peak: {count}",
+      "current_players": "Current Players",
+      "current_servers": "Current Servers",
+      "avg_players_per_server": "AVG Players / Server",
+      "official_servers": "Official Servers",
+      "partner_servers": "Partner Servers",
+      "player_volume": "Player Volume Over Time",
+      "hint": "Release markers are shown as orange vertical lines (e.g., v3.0.0, v4.0.0). Hover over data points for details.",
+      "server_volume": "Server Volume Over Time",
+      "server_hint": "Server count follows similar trends. Release markers indicate major version launches."
+    },
+    "countries_iso": {
+      "AF": "Afghanistan",
+      "AX": "Aland Islands",
+      "AL": "Albania",
+      "DZ": "Algeria",
+      "AS": "American Samoa",
+      "AD": "Andorra",
+      "AO": "Angola",
+      "AI": "Anguilla",
+      "AQ": "Antarctica",
+      "AG": "Antigua And Barbuda",
+      "AR": "Argentina",
+      "AM": "Armenia",
+      "AW": "Aruba",
+      "AU": "Australia",
+      "AT": "Austria",
+      "AZ": "Azerbaijan",
+      "BS": "Bahamas",
+      "BH": "Bahrain",
+      "BD": "Bangladesh",
+      "BB": "Barbados",
+      "BY": "Belarus",
+      "BE": "Belgium",
+      "BZ": "Belize",
+      "BJ": "Benin",
+      "BM": "Bermuda",
+      "BT": "Bhutan",
+      "BO": "Bolivia",
+      "BA": "Bosnia And Herzegovina",
+      "BW": "Botswana",
+      "BV": "Bouvet Island",
+      "BR": "Brazil",
+      "IO": "British Indian Ocean Territory",
+      "BN": "Brunei Darussalam",
+      "BG": "Bulgaria",
+      "BF": "Burkina Faso",
+      "BI": "Burundi",
+      "KH": "Cambodia",
+      "CM": "Cameroon",
+      "CA": "Canada",
+      "CV": "Cape Verde",
+      "KY": "Cayman Islands",
+      "CF": "Central African Republic",
+      "TD": "Chad",
+      "CL": "Chile",
+      "CN": "China",
+      "CX": "Christmas Island",
+      "CC": "Cocos (Keeling) Islands",
+      "CO": "Colombia",
+      "KM": "Comoros",
+      "CG": "Congo",
+      "CD": "Congo, Democratic Republic",
+      "CK": "Cook Islands",
+      "CR": "Costa Rica",
+      "CI": "Cote D'Ivoire",
+      "HR": "Croatia",
+      "CU": "Cuba",
+      "CY": "Cyprus",
+      "CZ": "Czech Republic",
+      "DK": "Denmark",
+      "DJ": "Djibouti",
+      "DM": "Dominica",
+      "DO": "Dominican Republic",
+      "EC": "Ecuador",
+      "EG": "Egypt",
+      "SV": "El Salvador",
+      "GQ": "Equatorial Guinea",
+      "ER": "Eritrea",
+      "EE": "Estonia",
+      "ET": "Ethiopia",
+      "FK": "Falkland Islands (Malvinas)",
+      "FO": "Faroe Islands",
+      "FJ": "Fiji",
+      "FI": "Finland",
+      "FR": "France",
+      "GF": "French Guiana",
+      "PF": "French Polynesia",
+      "TF": "French Southern Territories",
+      "GA": "Gabon",
+      "GM": "Gambia",
+      "GE": "Georgia",
+      "DE": "Germany",
+      "GH": "Ghana",
+      "GI": "Gibraltar",
+      "GR": "Greece",
+      "GL": "Greenland",
+      "GD": "Grenada",
+      "GP": "Guadeloupe",
+      "GU": "Guam",
+      "GT": "Guatemala",
+      "GG": "Guernsey",
+      "GN": "Guinea",
+      "GW": "Guinea-Bissau",
+      "GY": "Guyana",
+      "HT": "Haiti",
+      "HM": "Heard Island & Mcdonald Islands",
+      "VA": "Holy See (Vatican City State)",
+      "HN": "Honduras",
+      "HK": "Hong Kong",
+      "HU": "Hungary",
+      "IS": "Iceland",
+      "IN": "India",
+      "ID": "Indonesia",
+      "IR": "Iran, Islamic Republic Of",
+      "IQ": "Iraq",
+      "IE": "Ireland",
+      "IM": "Isle Of Man",
+      "IL": "Israel",
+      "IT": "Italy",
+      "JM": "Jamaica",
+      "JP": "Japan",
+      "JE": "Jersey",
+      "JO": "Jordan",
+      "KZ": "Kazakhstan",
+      "KE": "Kenya",
+      "KI": "Kiribati",
+      "KR": "Korea",
+      "KW": "Kuwait",
+      "KG": "Kyrgyzstan",
+      "LA": "Lao People's Democratic Republic",
+      "LV": "Latvia",
+      "LB": "Lebanon",
+      "LS": "Lesotho",
+      "LR": "Liberia",
+      "LY": "Libyan Arab Jamahiriya",
+      "LI": "Liechtenstein",
+      "LT": "Lithuania",
+      "LU": "Luxembourg",
+      "MO": "Macao",
+      "MK": "Macedonia",
+      "MG": "Madagascar",
+      "MW": "Malawi",
+      "MY": "Malaysia",
+      "MV": "Maldives",
+      "ML": "Mali",
+      "MT": "Malta",
+      "MH": "Marshall Islands",
+      "MQ": "Martinique",
+      "MR": "Mauritania",
+      "MU": "Mauritius",
+      "YT": "Mayotte",
+      "MX": "Mexico",
+      "FM": "Micronesia, Federated States Of",
+      "MD": "Moldova",
+      "MC": "Monaco",
+      "MN": "Mongolia",
+      "ME": "Montenegro",
+      "MS": "Montserrat",
+      "MA": "Morocco",
+      "MZ": "Mozambique",
+      "MM": "Myanmar",
+      "NA": "Namibia",
+      "NR": "Nauru",
+      "NP": "Nepal",
+      "NL": "Netherlands",
+      "AN": "Netherlands Antilles",
+      "NC": "New Caledonia",
+      "NZ": "New Zealand",
+      "NI": "Nicaragua",
+      "NE": "Niger",
+      "NG": "Nigeria",
+      "NU": "Niue",
+      "NF": "Norfolk Island",
+      "MP": "Northern Mariana Islands",
+      "NO": "Norway",
+      "OM": "Oman",
+      "PK": "Pakistan",
+      "PW": "Palau",
+      "PS": "Palestinian Territory, Occupied",
+      "PA": "Panama",
+      "PG": "Papua New Guinea",
+      "PY": "Paraguay",
+      "PE": "Peru",
+      "PH": "Philippines",
+      "PN": "Pitcairn",
+      "PL": "Poland",
+      "PT": "Portugal",
+      "PR": "Puerto Rico",
+      "QA": "Qatar",
+      "RE": "Reunion",
+      "RO": "Romania",
+      "RU": "Russian Federation",
+      "RW": "Rwanda",
+      "BL": "Saint Barthelemy",
+      "SH": "Saint Helena",
+      "KN": "Saint Kitts And Nevis",
+      "LC": "Saint Lucia",
+      "MF": "Saint Martin",
+      "PM": "Saint Pierre And Miquelon",
+      "VC": "Saint Vincent And Grenadines",
+      "WS": "Samoa",
+      "SM": "San Marino",
+      "ST": "Sao Tome And Principe",
+      "SA": "Saudi Arabia",
+      "SN": "Senegal",
+      "RS": "Serbia",
+      "SC": "Seychelles",
+      "SL": "Sierra Leone",
+      "SG": "Singapore",
+      "SK": "Slovakia",
+      "SI": "Slovenia",
+      "SB": "Solomon Islands",
+      "SO": "Somalia",
+      "ZA": "South Africa",
+      "GS": "South Georgia And Sandwich Isl.",
+      "ES": "Spain",
+      "LK": "Sri Lanka",
+      "SD": "Sudan",
+      "SR": "Suriname",
+      "SJ": "Svalbard And Jan Mayen",
+      "SZ": "Swaziland",
+      "SE": "Sweden",
+      "CH": "Switzerland",
+      "SY": "Syrian Arab Republic",
+      "TW": "Taiwan",
+      "TJ": "Tajikistan",
+      "TZ": "Tanzania",
+      "TH": "Thailand",
+      "TL": "Timor-Leste",
+      "TG": "Togo",
+      "TK": "Tokelau",
+      "TO": "Tonga",
+      "TT": "Trinidad And Tobago",
+      "TN": "Tunisia",
+      "TR": "Turkey",
+      "TM": "Turkmenistan",
+      "TC": "Turks And Caicos Islands",
+      "TV": "Tuvalu",
+      "UG": "Uganda",
+      "UA": "Ukraine",
+      "AE": "United Arab Emirates",
+      "GB": "United Kingdom",
+      "US": "United States",
+      "UM": "United States Outlying Islands",
+      "UY": "Uruguay",
+      "UZ": "Uzbekistan",
+      "VU": "Vanuatu",
+      "VE": "Venezuela",
+      "VN": "Viet Nam",
+      "VG": "Virgin Islands, British",
+      "VI": "Virgin Islands, U.S.",
+      "WF": "Wallis And Futuna",
+      "EH": "Western Sahara",
+      "YE": "Yemen",
+      "ZM": "Zambia",
+      "ZW": "Zimbabwe"
+    },
+    "about":{
+      "title": "About BeamMP",
+      "description": "BeamMP brings multiplayer to BeamNG.drive. It’s built by and for the community, focusing on stability, performance, and an authentic driving experience shared with friends.",
+      "note": {
+        "title": "A Note from the Creator",
+        "content": "BeamMP started with a simple idea: I want to play BeamNG.drive with my brothers. What began as an experiment quickly grew into a community-driven project focused on implementing multiplayer, and fun. We care deeply about trying to provide the best experience possible, and making it easy for players to hop in and enjoy driving together. The project is open to contributors of all skill levels. Whether you write code, moderate a server, design scenarios, or help others get set up—your efforts are part of what makes BeamMP thrive. Thank you for being here and helping us build something special."
+      },
+      "provides": {
+        "title": "What BeamMP Provides",
+        "points": {
+          "0": "Multiplayer sessions for BeamNG.drive with server browser and filters",
+          "1": "Server-side moderation tools and configuration options",
+          "2": "Mod support with protection for paid content",
+          "3": "Active community channels (Forum, Discord) for help and collaboration"
+        }
+      },
+      "project": {
+        "title": "Project Values",
+        "points": {
+          "0": "Community-first: decisions guided by real player/server needs",
+          "1": "Reliability: prioritizing stability, sync fidelity, and performance where possible",
+          "2": "Openness: welcoming contributions, feedback, and transparency",
+          "3": "Safety: promoting fair play and respectful interactions"
+        }
+      },
+      "get_involved": {
+        "title": "Get Involved",
+        "description": "There are many ways to participate—join discussions, report issues, contribute code, or help to support the project financially via",
+        "patreon": "Patreon",
+        "forum": "Forums",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Funding & Sustainability",
+        "description": "BeamMP relies on community support. Donations help cover infrastructure, bandwidth, tooling, and development time. If you value the project and want to help it grow, please consider supporting us.",
+        "patreon": "Support us on Patreon",
+        "learn": "Learn more on GitHub"
+      },
+      "credits": {
+        "title": "Credits & Acknowledgements",
+        "description": "BeamMP is maintained by the Mod Team and an incredible group of community contributors. We’d also like to thank server owners, mod creators, testers, and everyone reporting issues—your time and passion keep the project moving forward.",
+        "desc_2": "Special thanks to the BeamNG.drive developers for creating such an amazing platform that makes multiplayer possible.",
+        "desc_3": "Also a heartfelt thank you to the following current and former community members for their significant contributions to BeamMP over the years:",
+        "mentions": {
+          "0": "Jojos38 (Co-Founder) - for their work early on with designing everything to help make the idea become a reality",
+          "1": "Jetta (jetta.cat) - for the logo design and creation.",
+          "2": "Anonymous275 & Lionkor - for their work in rebuilding the project in C++.",
+          "3": "Tixx - for their considerable contributions across the project codebase.",
+          "4": "And many more—thank you to everyone who has contributed in any way!"
+        },
+        "thank_you": "Together, we’re building something special. Thank you for being part of the BeamMP community!"
+      }
+    }
+  }
+}

src/main.js

@@ -1,6 +1,26 @@
 import { createApp } from 'vue'
+//import { createI18n } from 'vue-i18n'
+import { setupI18n } from './i18n'
 import App from './App.vue'
-import router from './routes'
 import './style.css'
 
-createApp(App).use(router).mount('#app')
+//const i18n = createI18n({
+const i18n = setupI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {
+    en: await import('./locales/en.json'),
+    //fr: () => import('./locales/fr.json'),
+    //es: () => import('./locales/es.json'),
+  },
+})
+
+window.i18n = i18n
+window.locale = i18n.global.locale
+
+import router from './routes'
+
+createApp(App)
+  .use(i18n)
+  .use(router)
+  .mount('#app')

src/routes/index.js

@@ -1,3 +1,4 @@
+import { loadLocaleMessages, setI18nLanguage, SUPPORT_LOCALES } from '@/i18n'
 import { createRouter, createWebHistory } from 'vue-router'
 import NotFound from '@/views/NotFound.vue'
 
@@ -80,7 +81,22 @@ const router = createRouter({
 })
 
 // Global navigation guard for meta data
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+  const paramsLocale = to.params.locale || 'en'
+
+  // use locale if paramsLocale is not in SUPPORT_LOCALES
+  /*if (!SUPPORT_LOCALES.includes(paramsLocale)) {
+    return next(`/${locale}`)
+  }*/
+
+  // load locale messages
+  if (!i18n.global.availableLocales.includes(paramsLocale)) {
+    await loadLocaleMessages(i18n, paramsLocale)
+  }
+
+  // set i18n language
+  setI18nLanguage(i18n, paramsLocale)
+
   // Set page title
   document.title = to.meta.title || 'BeamMP'
 

src/views/About.vue

@@ -5,11 +5,10 @@
     <!-- Page Title -->
     <div class="mb-8">
       <h1 class="text-4xl font-extrabold tracking-tight text-neutral-900 dark:text-white">
-        About BeamMP
+        {{ $t('message.about.title') }}
       </h1>
       <p class="mt-3 text-neutral-600 dark:text-neutral-300 max-w-2xl">
-        BeamMP brings multiplayer to BeamNG.drive. It’s built by and for the community, focusing on
+        {{ $t('message.about.description') }}
-        stability, performance, and an authentic driving experience shared with friends.
       </p>
     </div>
 
@@ -18,19 +17,11 @@
       class="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/60 p-6 mb-10"
     >
       <h2 class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
-        A Note from the Creator
+        {{ $t('message.about.note.title') }}
       </h2>
       <div class="prose prose-neutral dark:prose-invert max-w-none">
         <p>
-          BeamMP started with a simple idea: I want to play BeamNG.drive with my brothers. What
+          {{ $t('message.about.note.content') }}
-          began as an experiment quickly grew into a community-driven project focused on
-          implementing multiplayer, and fun. We care deeply about trying to provide the best
-          experience possible, and making it easy for players to hop in and enjoy driving together.
-        </p>
-        <p>
-          The project is open to contributors of all skill levels. Whether you write code, moderate
-          a server, design scenarios, or help others get set up—your efforts are part of what makes
-          BeamMP thrive. Thank you for being here and helping us build something special.
         </p>
       </div>
     </div>
@@ -39,40 +30,39 @@
     <div class="grid gap-8 md:grid-cols-2 mb-10">
       <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6">
         <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
-          What BeamMP Provides
+          {{ $t('message.about.provides.title') }}
         </h3>
         <ul class="space-y-2 text-neutral-700 dark:text-neutral-300">
-          <li>Multiplayer sessions for BeamNG.drive with server browser and filters</li>
+          <li>{{ $t('message.about.provides.points.0') }}</li>
-          <li>Server-side moderation tools and configuration options</li>
+          <li>{{ $t('message.about.provides.points.1') }}</li>
-          <li>Mod support with protection for paid content</li>
+          <li>{{ $t('message.about.provides.points.2') }}</li>
-          <li>Active community channels (Forum, Discord) for help and collaboration</li>
+          <li>{{ $t('message.about.provides.points.3') }}</li>
         </ul>
       </div>
       <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6">
-        <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">Project Values</h3>
+        <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
+          {{ $t('message.about.project.title') }}
+        </h3>
         <ul class="space-y-2 text-neutral-700 dark:text-neutral-300">
-          <li>Community-first: decisions guided by real player/server needs</li>
+          <li>{{ $t('message.about.project.points.0') }}</li>
-          <li>
+          <li>{{ $t('message.about.project.points.1') }}</li>
-            Reliability: prioritizing stability, sync fidelity, and performance where possible
+          <li>{{ $t('message.about.project.points.2') }}</li>
-          </li>
+          <li>{{ $t('message.about.project.points.3') }}</li>
-          <li>Openness: welcoming contributions, feedback, and transparency</li>
-          <li>Safety: promoting fair play and respectful interactions</li>
         </ul>
       </div>
     </div>
 
     <!-- How to Get Involved -->
     <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6 mb-10">
-      <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">Get Involved</h3>
+      <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">{{ $t('message.about.get_involved.title') }}</h3>
       <p class="text-neutral-700 dark:text-neutral-300 mb-4">
-        There are many ways to participate—join discussions, report issues, contribute code, or help
+        {{ $t('message.about.get_involved.description') }}
-        to support the project financially via
         <a
           href="https://www.patreon.com/BeamMP"
           target="_blank"
           rel="noopener noreferrer"
           class="text-orange-500 hover:underline"
-          >Patreon</a
+          >{{ $t('message.about.get_involved.patreon') }}</a
         >.
       </p>
       <div class="flex flex-wrap gap-3">
@@ -81,28 +71,28 @@
           target="_blank"
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >Forum</a
+          >{{ $t('message.about.get_involved.forum') }}</a
         >
         <a
           href="https://docs.beammp.com"
           target="_blank"
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >Docs</a
+          >{{ $t('message.about.get_involved.docs') }}</a
         >
         <a
           href="https://github.com/BeamMP/BeamMP"
           target="_blank"
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >GitHub</a
+          >{{ $t('message.about.get_involved.github') }}</a
         >
         <a
           href="https://discord.gg/beammp"
           target="_blank"
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >Discord</a
+          >{{ $t('message.about.get_involved.discord') }}</a
         >
         <a
           href="https://www.patreon.com/BeamMP"
@@ -110,7 +100,7 @@
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-orange-500 text-white hover:bg-orange-600 transition-colors"
         >
-          Patreon
+          {{ $t('message.about.get_involved.patreon') }}
         </a>
       </div>
     </div>
@@ -118,12 +108,10 @@
     <!-- Funding & Sustainability -->
     <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6 mb-10">
       <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
-        Funding &amp; Sustainability
+        {{ $t('message.about.funding.title') }}
       </h3>
       <p class="text-neutral-700 dark:text-neutral-300 mb-4">
-        BeamMP relies on community support. Donations help cover infrastructure, bandwidth, tooling,
+        {{ $t('message.about.funding.description') }}
-        and development time. If you value the project and want to help it grow, please consider
-        supporting us.
       </p>
       <div class="flex flex-wrap gap-3">
         <a
@@ -132,7 +120,7 @@
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-orange-500 text-white hover:bg-orange-600 transition-colors"
         >
-          Support on Patreon
+          {{ $t('message.about.funding.patreon') }}
         </a>
         <a
           href="https://github.com/BeamMP/BeamMP"
@@ -140,7 +128,7 @@
           rel="noopener noreferrer"
           class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
         >
-          Learn more on GitHub
+          {{ $t('message.about.funding.learn') }}
         </a>
       </div>
     </div>
@@ -148,34 +136,26 @@
     <!-- Credits & Acknowledgements -->
     <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6">
       <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
-        Credits &amp; Acknowledgements
+        {{ $t('message.about.credits.title') }}
       </h3>
       <p class="text-neutral-700 dark:text-neutral-300">
-        BeamMP is maintained by the Mod Team and an incredible group of community contributors. We’d
+        {{ $t('message.about.credits.description') }}
-        also like to thank server owners, mod creators, testers, and everyone reporting issues—your
-        time and passion keep the project moving forward.
       </p>
       <p class="text-neutral-700 dark:text-neutral-300 mt-4">
-        Special thanks to the BeamNG.drive developers for creating such an amazing platform that
+        {{ $t('message.about.credits.desc_2') }}
-        makes projects like BeamMP possible in the first place.
       </p>
       <p class="text-neutral-700 dark:text-neutral-300 mt-4">
-        Also a heartfelt thank you to the following current and former community members for their
+        {{ $t('message.about.credits.desc_3') }}
-        significant contributions to BeamMP over the years:
       </p>
       <ul class="list-disc list-inside text-neutral-700 dark:text-neutral-300 mt-2 space-y-1">
-        <li>
+        <li>{{ $t('message.about.credits.mentions.0') }}</li>
-          Jojos38 (Co-Founder) - for their work early on with designing everything to help make the
+        <li>{{ $t('message.about.credits.mentions.1') }}</li>
-          idea become a reality
+        <li>{{ $t('message.about.credits.mentions.2') }}</li>
-        </li>
+        <li>{{ $t('message.about.credits.mentions.3') }}</li>
-        <li>Jetta (jetta.cat) - for the logo design and creation.</li>
+        <li>{{ $t('message.about.credits.mentions.4') }}</li>
-        <li>Anonymous275 & Lionkor - for their work in rebuilding the project in C++.</li>
-        <li>Tixx - for their considerable contributions across the project codebase.</li>
-        <li>And many others!</li>
       </ul>
       <p class="text-neutral-700 dark:text-neutral-300 mt-4">
-        Together, we’re building something special. Thank you for being part of the BeamMP
+        {{ $t('message.about.credits.thank_you') }}
-        community!
       </p>
     </div>
   </section>

src/views/Communities.vue

@@ -129,11 +129,10 @@ const communities = [
     <!-- Page Header -->
     <section class="text-center space-y-4">
       <h1 class="text-5xl md:text-6xl font-bold">
-        <span class="text-beammp-orange">BeamMP</span> Communities
+        {{ $t('message.communities.title') }}
       </h1>
       <p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
-        Discover thriving communities built around BeamMP. From competitive racing leagues to casual
+        {{ $t('message.communities.description') }}
-        free roam sessions, find your perfect group to play with.
       </p>
     </section>
 
@@ -251,9 +250,9 @@ const communities = [
     <!-- CTA Section -->
     <section class="text-center py-16 bg-neutral-50 dark:bg-neutral-900/30 -mx-4 px-4 rounded-xl">
       <div class="max-w-2xl mx-auto space-y-6">
-        <h2 class="text-3xl md:text-4xl font-bold">Want to Start Your Own Community?</h2>
+        <h2 class="text-3xl md:text-4xl font-bold">{{ $t('message.communities.starting') }}</h2>
         <p class="text-lg text-neutral-600 dark:text-neutral-400">
-          Host your own BeamMP server and build a community around your favorite game modes
+          {{ $t('message.communities.starting.description') }}
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
           <a
@@ -263,7 +262,7 @@ const communities = [
             class="inline-flex items-center gap-2 bg-beammp-orange hover:bg-beammp-orange/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
           >
             <component :is="Shield" class="w-5 h-5" />
-            Server Setup Guide
+            {{ $t('message.communities.starting.setup_guide') }}
           </a>
           <a
             href="https://discord.gg/beammp"
@@ -272,7 +271,7 @@ const communities = [
             class="inline-flex items-center gap-2 bg-neutral-700 hover:bg-neutral-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
           >
             <Users class="w-5 h-5" />
-            Join Our Discord
+            {{ $t('message.communities.starting.join_discord') }}
           </a>
         </div>
       </div>

src/views/Home.vue

@@ -13,6 +13,8 @@ import {
   Shield,
   Rocket,
 } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 
 const onlinePlayers = ref('...')
 const onlineServers = ref('...')
@@ -39,53 +41,49 @@ onMounted(async () => {
 const features = [
   {
     icon: Server,
-    title: 'Stable Servers',
+    title: t('message.home.features.stable_servers.title'),
-    description:
+    description: t('message.home.features.stable_servers.description'),
-      'BeamMP allows for stable servers, with a variety of servers located across the globe.',
   },
   {
     icon: Package,
-    title: 'BeamNG.drive',
+    title: t('message.home.features.beamng.title'),
-    description:
+    description: t('message.home.features.beamng.description'),
-      "BeamMP uses the same maps, vehicles & mods so you don't need to learn anything new!",
   },
   {
     icon: Zap,
-    title: 'Standalone',
+    title: t('message.home.features.standalone.title'),
-    description:
+    description: t('message.home.features.standalone.description'),
-      "BeamMP doesn't modify your original installation, so you can play either singleplayer or multiplayer.",
   },
   {
     icon: Globe,
-    title: 'Sync Quality',
+    title: t('message.home.features.sync.title'),
-    description:
+    description: t('message.home.features.sync.description'),
-      'BeamMP updates your vehicle position ~100 times per second, allowing for a smooth overall experience.',
   },
 ]
 
 const communities = [
   {
-    name: 'Racing Communities',
+    name: t('message.home.communities.racing.name'),
     icon: Rocket,
-    description: 'Competitive racing leagues and time trials with players worldwide',
+    description: t('message.home.communities.racing.description'),
     color: 'from-red-500 to-orange-500',
   },
   {
-    name: 'Roleplay Servers',
+    name: t('message.home.communities.roleplay.name'),
     icon: Gamepad2,
-    description: 'Immersive roleplay experiences from police chases to delivery services',
+    description: t('message.home.communities.roleplay.description'),
     color: 'from-blue-500 to-cyan-500',
   },
   {
-    name: 'Crash & Derby',
+    name: t('message.home.communities.crash.name'),
     icon: Shield,
-    description: 'Demolition derbies and destruction-focused gameplay modes',
+    description: t('message.home.communities.crash.description'),
     color: 'from-purple-500 to-pink-500',
   },
   {
-    name: 'Free Roam',
+    name: t('message.home.communities.freeroam.name'),
     icon: Globe,
-    description: 'Casual multiplayer sessions exploring maps with friends',
+    description: t('message.home.communities.freeroam.description'),
     color: 'from-green-500 to-emerald-500',
   },
 ]
@@ -93,60 +91,53 @@ const communities = [
 const devFeatures = [
   {
     icon: Code,
-    title: 'Lua API',
+    title: t('message.home.devFeatures.lua.title'),
-    description: 'Powerful server-side Lua scripting for custom game modes and features',
+    description: t('message.home.devFeatures.lua.description'),
-    link: 'https://docs.beammp.com/scripting/mod-reference/',
+    link: 'https://docs.beammp.com/' + (locale == 'en' ? '' : locale + '/') + 'scripting/mod-reference/',
   },
   {
     icon: BookOpen,
-    title: 'Documentation',
+    title: t('message.home.devFeatures.docs.title'),
-    description: 'Comprehensive guides and API references for server development',
+    description: t('message.home.devFeatures.docs.description'),
-    link: 'https://docs.beammp.com',
+    link: 'https://docs.beammp.com' + (locale == 'en' ? '' : locale + '/'),
   },
   {
     icon: Wrench,
-    title: 'Open Source',
+    title: t('message.home.devFeatures.openSource.title'),
-    description: 'Community-driven development with source available on GitHub',
+    description: t('message.home.devFeatures.openSource.description'),
     link: 'https://github.com/BeamMP',
   },
 ]
 
 const stats = [
-  { label: 'Active Players', value: onlinePlayers, suffix: '+' },
+  { label: t('message.home.metrics.active_players'), value: onlinePlayers, suffix: '+' },
-  { label: 'Global Servers', value: '500', suffix: '+' },
+  { label: t('message.home.metrics.public_servers'), value: '500', suffix: '+' },
-  { label: 'Total Downloads', value: '2M', suffix: '+' },
+  { label: t('message.home.metrics.all_servers'), value: '2M', suffix: '+' },
 ]
-
 const faqs = [
   {
-    question: 'The server list is not showing up!',
+    question: t('message.home.faq["0"].question'),
-    answer:
+    answer: t('message.home.faq["0"].answer'),
-      'Try restarting BeamMP as this can sometimes happen. If this fails to fix your issue please create a topic on our forum or visit the support channel on our discord.',
   },
   {
-    question: "How do I open a ticket in case something doesn't work or I have questions?",
+    question: t('message.home.faq["1"].question'),
-    answer:
+    answer: t('message.home.faq["1"].answer'),
-      'Please check the #how-to-use channel in Discord and on our forum. Please give an accurate description of what you have done so the support team will help you in a fast and effective way.',
   },
   {
-    question: "Help! I'm getting error codes",
+    question: t('message.home.faq["2"].question'),
-    answer:
+    answer: t('message.home.faq["2"].answer'),
-      'Please head over to our forum and see if anyone has had the issue before. It is likely that someone else has at some point and therefore there will also probably be a solution posted with it too in the replies. Alternatively visit our discord where the larger portion of community is currently based.',
   },
   {
-    question: 'Does this work with pirated versions of BeamNG.drive?',
+    question: t('message.home.faq["3"].question'),
-    answer:
+    answer: t('message.home.faq["3"].answer'),
-      "We don't know if it works with pirated versions of BeamNG.drive, but we will not provide any support to non legit copies of the game. Nor will we change to support it.",
   },
   {
-    question: 'How do I host a server?',
+    question: t('message.home.faq["4"].question'),
-    answer:
+    answer: t('message.home.faq["4"].answer'),
-      'The server files required for hosting your own server can be found at the top of this page below the client download. You will also require an authentication key which can be found from keymaster. Further information around the setup can be found on our wiki.',
   },
   {
-    question: 'Can I use mods?',
+    question: t('message.home.faq["5"].question'),
-    answer:
+    answer: t('message.home.faq["5"].answer'),
-      'Mods are supported. These are installed on the server. See our wiki for more information.',
   },
 ]
 </script>
@@ -171,12 +162,9 @@ const faqs = [
       <!-- Hero Content -->
       <div class="relative max-w-6xl mx-auto px-4 py-32 md:py-40">
         <div class="max-w-4xl mx-auto text-center space-y-8 animate-fade-in">
-          <h1 class="text-5xl md:text-7xl font-bold leading-tight text-white">
+          <h1 class="text-5xl md:text-7xl font-bold leading-tight text-white" v-html="$t('message.home.hero.title', { game: 'BeamNG.drive' })"></h1>
-            Multiplayer for <span class="text-beammp-orange">BeamNG.drive</span>
-          </h1>
           <p class="text-xl md:text-2xl text-neutral-200">
-            Experience the ultimate soft-body physics with friends. Race, roleplay, or just cruise
+            {{ $t('message.home.hero.subtitle') }}
-            together.
           </p>
 
           <!-- CTA Buttons -->
@@ -187,14 +175,14 @@ const faqs = [
               class="group flex items-center gap-3 bg-linear-to-r from-beammp-orange to-red-600 hover:from-red-600 hover:to-beammp-orange px-8 py-4 rounded-lg font-semibold text-lg transition-all transform hover:scale-105 shadow-lg hover:shadow-beammp-orange/50"
             >
               <Download class="w-6 h-6" />
-              Download Now
+              {{ $t('message.home.hero.download_now') }}
             </a>
             <a
               href="/servers"
               class="group flex items-center gap-3 bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/30 px-8 py-4 rounded-lg font-semibold text-lg transition-all text-white"
             >
               <Server class="w-6 h-6" />
-              Browse Servers
+              {{ $t('message.home.hero.browse_servers') }}
             </a>
           </div>
 
@@ -244,9 +232,9 @@ const faqs = [
     <section class="py-16 px-4 bg-neutral-50 dark:bg-neutral-900/30">
       <div class="max-w-6xl mx-auto">
         <div class="text-center mb-12">
-          <h2 class="text-4xl font-bold mb-4">Join a Thriving Community</h2>
+          <h2 class="text-4xl font-bold mb-4">{{ $t('message.home.communities.join') }}</h2>
           <p class="text-lg text-neutral-600 dark:text-neutral-400">
-            Discover diverse gameplay experiences across hundreds of unique servers
+            {{ $t('message.home.communities.description') }}
           </p>
         </div>
         <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -276,10 +264,9 @@ const faqs = [
     <section class="py-16 px-4">
       <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
         <div class="space-y-6 animate-fade-in order-2 md:order-1">
-          <h2 class="text-4xl font-bold">Find Your Perfect Server</h2>
+          <h2 class="text-4xl font-bold">{{ $t('message.home.find.title') }}</h2>
           <p class="text-lg text-neutral-600 dark:text-neutral-400">
-            Browse hundreds of active servers with different game modes, mods, and communities. From
+            {{ $t('message.home.find.description') }}
-            competitive racing to casual free roam, there's something for everyone.
           </p>
           <ul class="space-y-4">
             <li class="flex items-start gap-3">
@@ -289,9 +276,9 @@ const faqs = [
                 <div class="w-2 h-2 bg-beammp-blue rounded-full" />
               </div>
               <div>
-                <div class="font-semibold">Custom Game Modes</div>
+                <div class="font-semibold">{{ $t('message.home.find.points.custom') }}</div>
                 <div class="text-sm text-neutral-600 dark:text-neutral-400">
-                  Unique experiences created by the community
+                  {{ $t('message.home.find.points.custom_desc') }}
                 </div>
               </div>
             </li>
@@ -302,9 +289,9 @@ const faqs = [
                 <div class="w-2 h-2 bg-beammp-orange rounded-full" />
               </div>
               <div>
-                <div class="font-semibold">Active Moderation</div>
+                <div class="font-semibold">{{ $t('message.home.find.points.moderation') }}</div>
                 <div class="text-sm text-neutral-600 dark:text-neutral-400">
-                  Safe and friendly gaming environment
+                  {{ $t('message.home.find.points.moderation_desc') }}
                 </div>
               </div>
             </li>
@@ -315,9 +302,9 @@ const faqs = [
                 <div class="w-2 h-2 bg-beammp-green rounded-full" />
               </div>
               <div>
-                <div class="font-semibold">Global Network</div>
+                <div class="font-semibold">{{ $t('message.home.find.points.global') }}</div>
                 <div class="text-sm text-neutral-600 dark:text-neutral-400">
-                  Servers in every region for low latency
+                  {{ $t('message.home.find.points.global_desc') }}
                 </div>
               </div>
             </li>
@@ -326,7 +313,7 @@ const faqs = [
             href="/servers"
             class="inline-flex items-center gap-2 bg-beammp-blue hover:bg-beammp-blue/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
           >
-            Browse All Servers
+            {{ $t('message.home.find.browse_all_servers') }}
             <Server class="w-5 h-5" />
           </a>
         </div>
@@ -342,9 +329,9 @@ const faqs = [
     <section class="py-16 px-4 bg-neutral-50 dark:bg-neutral-900/30">
       <div class="max-w-6xl mx-auto">
         <div class="text-center mb-12">
-          <h2 class="text-4xl font-bold mb-4">Built for Developers</h2>
+          <h2 class="text-4xl font-bold mb-4">{{ $t('message.home.devFeatures.title') }}</h2>
           <p class="text-lg text-neutral-600 dark:text-neutral-400">
-            Create custom game modes, host your own server, and contribute to the project
+            {{ $t('message.home.devFeatures.description') }}
           </p>
         </div>
         <div class="grid md:grid-cols-3 gap-8">
@@ -366,7 +353,7 @@ const faqs = [
             <div
               class="mt-4 text-beammp-blue dark:text-beammp-orange font-semibold flex items-center gap-2"
             >
-              Learn More
+              {{ $t('message.home.devFeatures.learn_more') }}
               <svg
                 class="w-4 h-4 group-hover:translate-x-1 transition-transform"
                 fill="none"
@@ -389,9 +376,9 @@ const faqs = [
           class="mt-12 bg-linear-to-br from-neutral-800 to-neutral-900 dark:from-neutral-950 dark:to-neutral-900 rounded-xl p-8 md:p-12 text-white"
         >
           <div class="max-w-3xl mx-auto text-center space-y-6">
-            <h3 class="text-3xl font-bold">Ready to Host Your Own Server?</h3>
+            <h3 class="text-3xl font-bold">{{ $t('message.home.devFeatures.host.title') }}</h3>
             <p class="text-neutral-300">
-              Download the server files and create your own unique BeamMP experience
+              {{ $t('message.home.devFeatures.host.description') }}
             </p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
               <a
@@ -403,7 +390,7 @@ const faqs = [
                     d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"
                   />
                 </svg>
-                Windows Server
+                {{ $t('message.home.devFeatures.host.windows') }}
                 <Download class="w-5 h-5" />
               </a>
               <a
@@ -415,7 +402,7 @@ const faqs = [
                     d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.84-.41 1.74-.348 2.642.893 13.117 23.57 6.98 21.94-5.859-.932-7.344-4.59-9.256-7.094-9.547-.31-.036-.623-.05-.935-.05-.007 0-.015 0-.023 0-.007 0-.015 0-.023 0z"
                   />
                 </svg>
-                Linux Builds
+                {{ $t('message.home.devFeatures.host.linux') }}
                 <Download class="w-5 h-5" />
               </a>
             </div>
@@ -426,7 +413,7 @@ const faqs = [
 
     <!-- FAQ Section -->
     <section class="space-y-8 py-8">
-      <h2 class="text-4xl font-bold text-center mb-12">FAQ</h2>
+      <h2 class="text-4xl font-bold text-center mb-12">{{ $t('message.home.faq.title') }}</h2>
       <div class="space-y-6 max-w-4xl mx-auto">
         <details
           v-for="(faq, index) in faqs"

src/views/NotFound.vue

@@ -7,22 +7,22 @@ import { RouterLink } from 'vue-router'
     <div class="text-center px-6 py-10 sm:px-8 sm:py-12 rounded-xl border border-neutral-200/30 bg-white/60 dark:bg-neutral-900/60 backdrop-blur-md shadow-sm space-y-4">
       <div class="flex items-center justify-center gap-3">
         <span class="inline-flex items-center justify-center rounded-full bg-orange-600/10 text-orange-600 dark:text-orange-400 w-12 h-12 text-xl font-bold">404</span>
-        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">Page Not Found</h1>
+        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">{{ $t("message.404.title") }}</h1>
       </div>
       
       <p class="text-neutral-600 dark:text-neutral-300 max-w-prose mx-auto">
-        The page you requested doesn’t exist. It may have been moved or removed.
+        {{ $t("message.404.description") }}
       </p>
       <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
         <RouterLink
           to="/"
           class="inline-flex px-4 py-2 rounded-md bg-orange-600 hover:bg-orange-500 text-white text-sm font-medium">
-          Return Home
+          {{ $t("message.404.return_home") }}
         </RouterLink>
         <RouterLink
           to="/servers"
           class="inline-flex px-4 py-2 rounded-md border border-neutral-300/60 dark:border-neutral-700/60 text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800">
-          Browse Servers
+          {{ $t("message.home.hero.browse_servers") }}
         </RouterLink>
       </div>
     </div>

src/views/Servers.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="servers-container">
     <div class="servers-header">
-      <h1 class="servers-title">BeamMP Servers</h1>
+      <h1 class="servers-title">{{ $t('message.servers.title') }}</h1>
-      <p class="servers-subtitle">Join thousands of players in multiplayer BeamNG.drive</p>
+      <p class="servers-subtitle">{{ $t('message.servers.description') }}</p>
     </div>
 
     <div class="servers-filters">
@@ -10,7 +10,7 @@
         <input
           v-model="searchQuery"
           type="text"
-          placeholder="Search servers..."
+          :placeholder="$t('message.servers.filters.search')"
           class="search-input"
         />
       </div>
@@ -18,51 +18,51 @@
       <div class="filter-group">
         <label class="filter-label">
           <input v-model="filters.hideEmpty" type="checkbox" />
-          Hide Empty
+          {{ $t('message.servers.filters.hide_empty') }}
         </label>
         <label class="filter-label">
           <input v-model="filters.hideFull" type="checkbox" />
-          Hide Full
+          {{ $t('message.servers.filters.hide_full') }}
         </label>
-        <label class="filter-label">
+        <!--<label class="filter-label">
           <input v-model="filters.hidePassword" type="checkbox" />
-          Hide Password
+          {{ $t('message.servers.filters.hide_password') }}
-        </label>
+        </label>-->
       </div>
 
       <div class="filter-group">
-        <span class="filter-heading">Show only:</span>
+        <span class="filter-heading">{{ $t('message.servers.show_only') }}</span>
         <label class="filter-label">
           <input v-model="filters.official" type="checkbox" />
-          Official
+          {{ $t('message.servers.filters.show_official') }}
         </label>
         <label class="filter-label">
           <input v-model="filters.partner" type="checkbox" />
-          Partner
+          {{ $t('message.servers.filters.show_partner') }}
         </label>
         <label class="filter-label">
           <input v-model="filters.featured" type="checkbox" />
-          Featured
+          {{ $t('message.servers.filters.show_featured') }}
         </label>
       </div>
 
       <div class="server-count">
-        {{ filteredServers.length }} servers found ({{ totalPlayers }} players online)
+        {{ $t('message.servers.server_count', { count: filteredServers.length }) }} ({{ $t('message.servers.players_found', { count: totalPlayers }) }})
       </div>
     </div>
 
-    <div v-if="loading" class="loading">Loading servers...</div>
+    <div v-if="loading" class="loading">{{ $t('message.servers.loading_servers') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else class="table-wrapper">
       <table class="servers-table">
         <thead>
           <tr>
-            <th class="col-location">Location</th>
+            <th class="col-location">{{ $t('message.servers.filters.location') }}</th>
-            <th class="col-name">Server Name</th>
+            <th class="col-name">{{ $t('message.servers.filters.name') }}</th>
-            <th class="col-map">Map</th>
+            <th class="col-map">{{ $t('message.servers.filters.map') }}</th>
-            <th class="col-players">Players</th>
+            <th class="col-players">{{ $t('message.servers.filters.players') }}</th>
-            <th class="col-mods">Mods</th>
+            <th class="col-mods">{{ $t('message.servers.filters.mods') }}</th>
-            <th class="col-status">Status</th>
+            <th class="col-status">{{ $t('message.servers.filters.status') }}</th>
           </tr>
         </thead>
         <tbody>
@@ -400,253 +400,7 @@ function formatBytes(bytes) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
-const isoCountries = {
+const isoCountries = i18n.global.messages[locale].message.countries_iso
-  AF: 'Afghanistan',
-  AX: 'Aland Islands',
-  AL: 'Albania',
-  DZ: 'Algeria',
-  AS: 'American Samoa',
-  AD: 'Andorra',
-  AO: 'Angola',
-  AI: 'Anguilla',
-  AQ: 'Antarctica',
-  AG: 'Antigua And Barbuda',
-  AR: 'Argentina',
-  AM: 'Armenia',
-  AW: 'Aruba',
-  AU: 'Australia',
-  AT: 'Austria',
-  AZ: 'Azerbaijan',
-  BS: 'Bahamas',
-  BH: 'Bahrain',
-  BD: 'Bangladesh',
-  BB: 'Barbados',
-  BY: 'Belarus',
-  BE: 'Belgium',
-  BZ: 'Belize',
-  BJ: 'Benin',
-  BM: 'Bermuda',
-  BT: 'Bhutan',
-  BO: 'Bolivia',
-  BA: 'Bosnia And Herzegovina',
-  BW: 'Botswana',
-  BV: 'Bouvet Island',
-  BR: 'Brazil',
-  IO: 'British Indian Ocean Territory',
-  BN: 'Brunei Darussalam',
-  BG: 'Bulgaria',
-  BF: 'Burkina Faso',
-  BI: 'Burundi',
-  KH: 'Cambodia',
-  CM: 'Cameroon',
-  CA: 'Canada',
-  CV: 'Cape Verde',
-  KY: 'Cayman Islands',
-  CF: 'Central African Republic',
-  TD: 'Chad',
-  CL: 'Chile',
-  CN: 'China',
-  CX: 'Christmas Island',
-  CC: 'Cocos (Keeling) Islands',
-  CO: 'Colombia',
-  KM: 'Comoros',
-  CG: 'Congo',
-  CD: 'Congo, Democratic Republic',
-  CK: 'Cook Islands',
-  CR: 'Costa Rica',
-  CI: "Cote D'Ivoire",
-  HR: 'Croatia',
-  CU: 'Cuba',
-  CY: 'Cyprus',
-  CZ: 'Czech Republic',
-  DK: 'Denmark',
-  DJ: 'Djibouti',
-  DM: 'Dominica',
-  DO: 'Dominican Republic',
-  EC: 'Ecuador',
-  EG: 'Egypt',
-  SV: 'El Salvador',
-  GQ: 'Equatorial Guinea',
-  ER: 'Eritrea',
-  EE: 'Estonia',
-  ET: 'Ethiopia',
-  FK: 'Falkland Islands (Malvinas)',
-  FO: 'Faroe Islands',
-  FJ: 'Fiji',
-  FI: 'Finland',
-  FR: 'France',
-  GF: 'French Guiana',
-  PF: 'French Polynesia',
-  TF: 'French Southern Territories',
-  GA: 'Gabon',
-  GM: 'Gambia',
-  GE: 'Georgia',
-  DE: 'Germany',
-  GH: 'Ghana',
-  GI: 'Gibraltar',
-  GR: 'Greece',
-  GL: 'Greenland',
-  GD: 'Grenada',
-  GP: 'Guadeloupe',
-  GU: 'Guam',
-  GT: 'Guatemala',
-  GG: 'Guernsey',
-  GN: 'Guinea',
-  GW: 'Guinea-Bissau',
-  GY: 'Guyana',
-  HT: 'Haiti',
-  HM: 'Heard Island & Mcdonald Islands',
-  VA: 'Holy See (Vatican City State)',
-  HN: 'Honduras',
-  HK: 'Hong Kong',
-  HU: 'Hungary',
-  IS: 'Iceland',
-  IN: 'India',
-  ID: 'Indonesia',
-  IR: 'Iran, Islamic Republic Of',
-  IQ: 'Iraq',
-  IE: 'Ireland',
-  IM: 'Isle Of Man',
-  IL: 'Israel',
-  IT: 'Italy',
-  JM: 'Jamaica',
-  JP: 'Japan',
-  JE: 'Jersey',
-  JO: 'Jordan',
-  KZ: 'Kazakhstan',
-  KE: 'Kenya',
-  KI: 'Kiribati',
-  KR: 'Korea',
-  KW: 'Kuwait',
-  KG: 'Kyrgyzstan',
-  LA: "Lao People's Democratic Republic",
-  LV: 'Latvia',
-  LB: 'Lebanon',
-  LS: 'Lesotho',
-  LR: 'Liberia',
-  LY: 'Libyan Arab Jamahiriya',
-  LI: 'Liechtenstein',
-  LT: 'Lithuania',
-  LU: 'Luxembourg',
-  MO: 'Macao',
-  MK: 'Macedonia',
-  MG: 'Madagascar',
-  MW: 'Malawi',
-  MY: 'Malaysia',
-  MV: 'Maldives',
-  ML: 'Mali',
-  MT: 'Malta',
-  MH: 'Marshall Islands',
-  MQ: 'Martinique',
-  MR: 'Mauritania',
-  MU: 'Mauritius',
-  YT: 'Mayotte',
-  MX: 'Mexico',
-  FM: 'Micronesia, Federated States Of',
-  MD: 'Moldova',
-  MC: 'Monaco',
-  MN: 'Mongolia',
-  ME: 'Montenegro',
-  MS: 'Montserrat',
-  MA: 'Morocco',
-  MZ: 'Mozambique',
-  MM: 'Myanmar',
-  NA: 'Namibia',
-  NR: 'Nauru',
-  NP: 'Nepal',
-  NL: 'Netherlands',
-  AN: 'Netherlands Antilles',
-  NC: 'New Caledonia',
-  NZ: 'New Zealand',
-  NI: 'Nicaragua',
-  NE: 'Niger',
-  NG: 'Nigeria',
-  NU: 'Niue',
-  NF: 'Norfolk Island',
-  MP: 'Northern Mariana Islands',
-  NO: 'Norway',
-  OM: 'Oman',
-  PK: 'Pakistan',
-  PW: 'Palau',
-  PS: 'Palestinian Territory, Occupied',
-  PA: 'Panama',
-  PG: 'Papua New Guinea',
-  PY: 'Paraguay',
-  PE: 'Peru',
-  PH: 'Philippines',
-  PN: 'Pitcairn',
-  PL: 'Poland',
-  PT: 'Portugal',
-  PR: 'Puerto Rico',
-  QA: 'Qatar',
-  RE: 'Reunion',
-  RO: 'Romania',
-  RU: 'Russian Federation',
-  RW: 'Rwanda',
-  BL: 'Saint Barthelemy',
-  SH: 'Saint Helena',
-  KN: 'Saint Kitts And Nevis',
-  LC: 'Saint Lucia',
-  MF: 'Saint Martin',
-  PM: 'Saint Pierre And Miquelon',
-  VC: 'Saint Vincent And Grenadines',
-  WS: 'Samoa',
-  SM: 'San Marino',
-  ST: 'Sao Tome And Principe',
-  SA: 'Saudi Arabia',
-  SN: 'Senegal',
-  RS: 'Serbia',
-  SC: 'Seychelles',
-  SL: 'Sierra Leone',
-  SG: 'Singapore',
-  SK: 'Slovakia',
-  SI: 'Slovenia',
-  SB: 'Solomon Islands',
-  SO: 'Somalia',
-  ZA: 'South Africa',
-  GS: 'South Georgia And Sandwich Isl.',
-  ES: 'Spain',
-  LK: 'Sri Lanka',
-  SD: 'Sudan',
-  SR: 'Suriname',
-  SJ: 'Svalbard And Jan Mayen',
-  SZ: 'Swaziland',
-  SE: 'Sweden',
-  CH: 'Switzerland',
-  SY: 'Syrian Arab Republic',
-  TW: 'Taiwan',
-  TJ: 'Tajikistan',
-  TZ: 'Tanzania',
-  TH: 'Thailand',
-  TL: 'Timor-Leste',
-  TG: 'Togo',
-  TK: 'Tokelau',
-  TO: 'Tonga',
-  TT: 'Trinidad And Tobago',
-  TN: 'Tunisia',
-  TR: 'Turkey',
-  TM: 'Turkmenistan',
-  TC: 'Turks And Caicos Islands',
-  TV: 'Tuvalu',
-  UG: 'Uganda',
-  UA: 'Ukraine',
-  AE: 'United Arab Emirates',
-  GB: 'United Kingdom',
-  US: 'United States',
-  UM: 'United States Outlying Islands',
-  UY: 'Uruguay',
-  UZ: 'Uzbekistan',
-  VU: 'Vanuatu',
-  VE: 'Venezuela',
-  VN: 'Viet Nam',
-  VG: 'Virgin Islands, British',
-  VI: 'Virgin Islands, U.S.',
-  WF: 'Wallis And Futuna',
-  EH: 'Western Sahara',
-  YE: 'Yemen',
-  ZM: 'Zambia',
-  ZW: 'Zimbabwe',
-}
 
 function getCountryName(code) {
   return isoCountries[code] || code

src/views/Statistics.vue

@@ -525,16 +525,15 @@ function onLeaveServers() {
   <section class="max-w-6xl mx-auto px-4 py-10">
     <div class="mb-8">
       <h1 class="text-4xl font-extrabold tracking-tight text-neutral-900 dark:text-white">
-        BeamMP Statistics
+        {{ $t('message.statistics.title') }}
       </h1>
       <p class="mt-3 text-neutral-600 dark:text-neutral-300 max-w-2xl">
-        Live snapshot metrics from active servers and a player volume timeline. Releases can be
+        {{ $t('message.statistics.description') }}
-        annotated on the chart.
       </p>
     </div>
 
     <div v-if="loading" class="py-16 text-center text-neutral-600 dark:text-neutral-300">
-      Loading…
+      {{ $t('message.statistics.loading') }}
     </div>
     <div v-else-if="error" class="py-16 text-center text-red-600">{{ error }}</div>
 
@@ -545,29 +544,29 @@ function onLeaveServers() {
           class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
         >
           <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Current Players
+            {{ $t('message.statistics.current_players') }}
           </div>
           <div class="mt-1 text-3xl font-semibold">{{ totalPlayers }}</div>
           <div class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-            Peak: {{ peakPlayers }}
+            {{ $t('message.statistics.peak', { count: peakPlayers }) }}
           </div>
         </div>
         <div
           class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
         >
           <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Current Servers
+            {{ $t('message.statistics.current_servers') }}
           </div>
           <div class="mt-1 text-3xl font-semibold">{{ serverCount }}</div>
           <div class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-            Peak: {{ peakServers }}
+            {{ $t('message.statistics.peak', { count: peakServers }) }}
           </div>
         </div>
         <div
           class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
         >
           <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Avg Players / Server
+            {{ $t('message.statistics.avg_players_per_server') }}
           </div>
           <div class="mt-1 text-3xl font-semibold">{{ avgPlayers }}</div>
         </div>
@@ -579,7 +578,7 @@ function onLeaveServers() {
           class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-3 bg-white/70 dark:bg-neutral-900/60"
         >
           <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Official Servers
+            {{ $t('message.statistics.official_servers') }}
           </div>
           <div class="mt-1 text-2xl font-semibold">{{ officialCount }}</div>
         </div>
@@ -587,7 +586,7 @@ function onLeaveServers() {
           class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-3 bg-white/70 dark:bg-neutral-900/60"
         >
           <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Partner Servers
+            {{ $t('message.statistics.partner_servers') }}
           </div>
           <div class="mt-1 text-2xl font-semibold">{{ partnerCount }}</div>
         </div>
@@ -598,7 +597,7 @@ function onLeaveServers() {
         class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
       >
         <div class="flex items-center justify-between gap-4 mb-3">
-          <h2 class="text-lg font-semibold">Player Volume Over Time</h2>
+          <h2 class="text-lg font-semibold">{{ $t('message.statistics.player_volume') }}</h2>
           <div class="flex items-center gap-2">
             <button
               v-for="r in ranges"
@@ -646,8 +645,7 @@ function onLeaveServers() {
           </div>
         </div>
         <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-          Release markers are shown as orange vertical lines (e.g., v3.0.0, v4.0.0). Hover over data
+          {{ $t('message.statistics.hint') }}
-          points for details.
         </p>
       </div>
 
@@ -656,7 +654,7 @@ function onLeaveServers() {
         class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
       >
         <div class="flex items-center justify-between gap-4 mb-3">
-          <h2 class="text-lg font-semibold">Server Count Over Time</h2>
+          <h2 class="text-lg font-semibold">{{ $t('message.statistics.server_volume') }}</h2>
         </div>
         <div class="relative">
           <canvas
@@ -689,7 +687,7 @@ function onLeaveServers() {
           </div>
         </div>
         <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-          Server count follows similar trends. Release markers indicate major version launches.
+          {{ $t('message.statistics.server_hint') }}
         </p>
       </div>
     </div>