feat(web): add domain-based locale detection and lang-prefixed SSG routes

Detect locale from domain (fxtun.ru → ru), generate /ru/* and /en/*
prefixed routes with forcedLocale, improve canonical URLs and hreflang.

Author: mephistofox

web/src/composables/useSeo.ts

@@ -1,47 +1,89 @@
 import { useHead, useSeoMeta } from '@unhead/vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { i18n, getDomainLocale } from '../i18n'
 
 interface SeoOptions {
   titleKey?: string
   descriptionKey?: string
   title?: string
   description?: string
-  path?: string
   image?: string
   type?: 'website' | 'article'
 }
 
 export function useSeo(options: SeoOptions = {}) {
   const { t, locale } = useI18n()
+  const route = useRoute()
 
-  const title = computed(() => options.title || (options.titleKey ? t(options.titleKey) : 'fxTunnel'))
-  const description = computed(() => options.description || (options.descriptionKey ? t(options.descriptionKey) : t('seo.defaultDescription')))
-  const url = computed(() => `https://fxtun.dev${options.path || ''}`)
+  // Effective locale: forcedLocale from route meta takes priority
+  const effectiveLocale = (route.meta.forcedLocale as 'en' | 'ru') ?? locale.value
+
+  // Apply forcedLocale globally (for component body rendering)
+  if (route.meta.forcedLocale) {
+    locale.value = effectiveLocale
+    // @ts-expect-error vue-i18n composition api
+    i18n.global.locale.value = effectiveLocale
+  }
+
+  // Helper: translate with explicit locale (bypasses reactive locale for SSG)
+  // @ts-expect-error vue-i18n message schema
+  const te = (key: string) => i18n.global.messages.value[effectiveLocale]?.[key.split('.')[0]]
+    ? t(key, [], { locale: effectiveLocale })
+    : t(key)
+
+  const title = computed(() => options.title || (options.titleKey ? te(options.titleKey) : 'fxTunnel'))
+  const description = computed(() => options.description || (options.descriptionKey ? te(options.descriptionKey) : te('seo.defaultDescription')))
   const image = options.image || 'https://fxtun.dev/og-image.png'
 
+  const isLangPrefix = computed(() =>
+    route.path.startsWith('/ru') || route.path.startsWith('/en')
+  )
+
+  const cleanPath = computed(() => {
+    if (route.path.startsWith('/ru')) return route.path.slice(3) || '/'
+    if (route.path.startsWith('/en')) return route.path.slice(3) || '/'
+    return route.path
+  })
+
+  const enCanonical = computed(() => `https://fxtun.dev${cleanPath.value}`)
+  const ruCanonical = computed(() => `https://fxtun.ru${cleanPath.value}`)
+
+  const canonical = computed(() => {
+    if (isLangPrefix.value) {
+      return route.path.startsWith('/ru') ? ruCanonical.value : enCanonical.value
+    }
+    const domain = getDomainLocale() === 'ru' ? 'fxtun.ru' : 'fxtun.dev'
+    return `https://${domain}${cleanPath.value}`
+  })
+
+  const showHreflang = computed(() => !isLangPrefix.value)
+
+  useHead({
+    htmlAttrs: { lang: effectiveLocale },
+    link: computed(() => [
+      { rel: 'canonical', href: canonical.value },
+      ...(showHreflang.value ? [
+        { rel: 'alternate', hreflang: 'en', href: enCanonical.value },
+        { rel: 'alternate', hreflang: 'ru', href: ruCanonical.value },
+        { rel: 'alternate', hreflang: 'x-default', href: enCanonical.value },
+      ] : []),
+    ]),
+  })
+
   useSeoMeta({
     title,
     description,
     ogTitle: title,
     ogDescription: description,
     ogImage: image,
-    ogUrl: url,
+    ogUrl: canonical,
     ogType: options.type || 'website',
     ogSiteName: 'fxTunnel',
     twitterCard: 'summary_large_image',
     twitterTitle: title,
     twitterDescription: description,
     twitterImage: image,
   })
-
-  useHead({
-    htmlAttrs: { lang: locale },
-    link: [
-      { rel: 'canonical', href: url },
-      { rel: 'alternate', hreflang: 'en', href: url },
-      { rel: 'alternate', hreflang: 'ru', href: url },
-      { rel: 'alternate', hreflang: 'x-default', href: url },
-    ],
-  })
 }

web/src/i18n/index.ts

@@ -4,20 +4,18 @@ import ru from './ru.json'
 
 type MessageSchema = typeof en
 
+export function getDomainLocale(): 'en' | 'ru' | null {
+  if (import.meta.env.SSR) return null
+  const host = window.location.hostname
+  if (host === 'fxtun.ru' || host.endsWith('.fxtun.ru')) return 'ru'
+  return null
+}
+
 function getDefaultLocale(): 'en' | 'ru' {
   if (import.meta.env.SSR) return 'en'
-
-  const saved = localStorage.getItem('locale')
-  if (saved === 'en' || saved === 'ru') {
-    return saved
-  }
-
-  const browserLang = navigator.language.split('-')[0]
-  if (['ru', 'uk', 'be'].includes(browserLang)) {
-    return 'ru'
-  }
-
-  return 'en'
+  return getDomainLocale()
+    ?? (localStorage.getItem('locale') as 'en' | 'ru' | null)
+    ?? (['ru', 'uk', 'be'].includes(navigator.language.split('-')[0]) ? 'ru' : 'en')
 }
 
 export const i18n = createI18n<[MessageSchema], 'en' | 'ru'>({

web/src/main.ts

@@ -12,8 +12,22 @@ export const createApp = ViteSSG(
     app.use(createPinia())
     app.use(i18n)
 
+    // Set locale from route meta — works during both SSG and client
+    router.beforeEach((to, _from, next) => {
+      if (to.meta.forcedLocale) {
+        // @ts-expect-error vue-i18n composition api
+        i18n.global.locale.value = to.meta.forcedLocale as 'en' | 'ru'
+      }
+      next()
+    })
+
     if (!import.meta.env.SSR) {
       router.beforeEach(async (to, _from, next) => {
+        if (to.meta.forcedLocale) {
+          const { setLocale } = await import('./i18n')
+          setLocale(to.meta.forcedLocale as 'en' | 'ru')
+        }
+
         const { useAuthStore } = await import('./stores/auth')
         const authStore = useAuthStore()
 

web/src/router.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-export const routes: RouteRecordRaw[] = [
+const publicRoutes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'landing',
@@ -24,6 +24,19 @@ export const routes: RouteRecordRaw[] = [
     name: 'offer',
     component: () => import('./views/OfferView.vue'),
   },
+]
+
+function langPrefixedRoutes(lang: 'ru' | 'en'): RouteRecordRaw[] {
+  return publicRoutes.map(r => ({
+    ...r,
+    path: `/${lang}${r.path === '/' ? '' : r.path}`,
+    name: `${String(r.name)}-${lang}`,
+    meta: { ...r.meta, forcedLocale: lang },
+  }))
+}
+
+export const routes: RouteRecordRaw[] = [
+  ...publicRoutes,
   {
     path: '/checkout',
     name: 'checkout',
@@ -140,6 +153,8 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('./views/admin/AdminSubscriptionsView.vue'),
     meta: { requiresAuth: true, requiresAdmin: true },
   },
+  ...langPrefixedRoutes('ru'),
+  ...langPrefixedRoutes('en'),
   {
     path: '/:pathMatch(.*)*',
     name: 'not-found',

web/src/views/LoginView.vue

@@ -12,7 +12,7 @@ const themeStore = useThemeStore()
 const authStore = useAuthStore()
 const { t, locale } = useI18n()
 
-useSeo({ titleKey: 'seo.login.title', descriptionKey: 'seo.login.description', path: '/login' })
+useSeo({ titleKey: 'seo.login.title', descriptionKey: 'seo.login.description' })
 
 const showOffer = computed(() => locale.value === 'ru')
 

web/src/views/OfferView.vue

@@ -8,7 +8,7 @@ import { useSeo } from '@/composables/useSeo'
 const themeStore = useThemeStore()
 const { t, locale } = useI18n()
 
-useSeo({ titleKey: 'seo.offer.title', descriptionKey: 'seo.offer.description', path: '/offer' })
+useSeo({ titleKey: 'seo.offer.title', descriptionKey: 'seo.offer.description' })
 
 function toggleLocale() {
   const current = getLocale()

web/src/views/RegisterView.vue

@@ -9,7 +9,7 @@ import Card from '@/components/ui/Card.vue'
 const themeStore = useThemeStore()
 const { t } = useI18n()
 
-useSeo({ titleKey: 'seo.register.title', descriptionKey: 'seo.register.description', path: '/register' })
+useSeo({ titleKey: 'seo.register.title', descriptionKey: 'seo.register.description' })
 
 function toggleLocale() {
   const current = getLocale()

web/vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
     Sitemap({
       hostname: "https://fxtun.dev",
       dynamicRoutes: ["/login", "/register", "/offer"],
-      exclude: ["/docs/offer"],
+      exclude: ["/docs/offer", "/ru", "/ru/*", "/en", "/en/*"],
       generateRobotsTxt: false,
     }),
   ],
@@ -26,10 +26,11 @@ export default defineConfig({
     script: "async",
     formatting: "minify",
     beastiesOptions: false,
-    includedRoutes(paths) {
-      return paths.filter((p) =>
-        ["/", "/login", "/register", "/offer"].includes(p)
-      );
+    includedRoutes() {
+      const pages = ["/", "/login", "/register", "/offer"];
+      const ruPages = pages.map((p) => `/ru${p === "/" ? "" : p}`);
+      const enPages = pages.map((p) => `/en${p === "/" ? "" : p}`);
+      return [...pages, ...ruPages, ...enPages];
     },
   },
   server: {