From 6d04f1cbdc63980636528eca9fed5994fc7d1e81 Mon Sep 17 00:00:00 2001
From: claude <imdat2999@gmail.com>
Date: Fri, 6 Mar 2026 02:11:46 +0000
Subject: [PATCH] replace vue-i18n with i18next-vue

Complete the i18n migration by switching runtime setup and remaining components to i18next-vue, and add shared locale constants/helpers for SSR and client language handling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 AGENTS.md                                     |   2 +-
 src/components/DashboardNav.vue               |   4 +-
 src/components/GlobalUploadIndicator.vue      |   4 +-
 src/components/NotificationDrawer.vue         |   4 +-
 src/components/app/AppDialog.vue              |   4 +-
 src/components/app/AppToastHost.vue           |   4 +-
 src/components/dashboard/StatsCard.vue        |   4 +-
 src/composables/useAppConfirm.ts              |   6 +-
 src/composables/useUploadQueue.ts             |   4 +-
 src/i18n/constants.ts                         |   7 +
 src/i18n/index.ts                             |  19 +++
 src/lib/translation/index.ts                  | 133 +++++++++++++-----
 src/lib/utils.ts                              |   2 +-
 src/main.ts                                   |   6 +-
 src/routes/NotFound.vue                       |   4 +-
 src/routes/auth/forgot.vue                    |   4 +-
 src/routes/auth/login.vue                     |   4 +-
 src/routes/auth/signup.vue                    |   4 +-
 src/routes/home/Home.vue                      |   6 +-
 src/routes/home/Layout.vue                    |   4 +-
 src/routes/home/Privacy.vue                   |   4 +-
 src/routes/home/Terms.vue                     |   4 +-
 src/routes/notification/Notification.vue      |   4 +-
 .../components/NotificationActions.vue        |   4 +-
 .../components/NotificationItem.vue           |   4 +-
 .../components/NotificationList.vue           |   4 +-
 src/routes/overview/Overview.vue              |   4 +-
 .../overview/components/NameGradient.vue      |   4 +-
 .../overview/components/QuickActions.vue      |   4 +-
 .../overview/components/RecentVideos.vue      |   4 +-
 src/routes/overview/components/Referral.vue   |   4 +-
 .../overview/components/StatsOverview.vue     |   4 +-
 .../overview/components/StorageUsage.vue      |   4 +-
 .../overview/components/WelcomeBanner.vue     |   4 +-
 src/routes/settings/Settings.vue              |   4 +-
 .../components/ConnectedAccountsCard.vue      |   4 +-
 .../components/ProfileInformationCard.vue     |   4 +-
 .../components/SecuritySettingsCard.vue       |   4 +-
 src/routes/settings/pages/AdsVast.vue         |   4 +-
 src/routes/settings/pages/Billing.vue         |   9 +-
 src/routes/settings/pages/DangerZone.vue      |   4 +-
 src/routes/settings/pages/DomainsDns.vue      |   4 +-
 .../settings/pages/NotificationSettings.vue   |   4 +-
 src/routes/settings/pages/PlayerSettings.vue  |   4 +-
 .../settings/pages/SecurityNConnected.vue     |   4 +-
 src/routes/upload/Upload.vue                  |   4 +-
 src/routes/upload/components/BulkActions.vue  |   4 +-
 src/routes/upload/components/InfoTip.vue      |   4 +-
 .../upload/components/RemoteUrlForm.vue       |   4 +-
 .../upload/components/UploadDropzone.vue      |   4 +-
 .../upload/components/UploadModeToggle.vue    |   4 +-
 src/routes/upload/components/UploadQueue.vue  |   4 +-
 .../upload/components/UploadQueueItem.vue     |   4 +-
 src/routes/video/CopyVideoModal.vue           |   4 +-
 src/routes/video/DetailVideo.vue              |   4 +-
 src/routes/video/DetailVideoModal.vue         |   4 +-
 src/routes/video/Videos.vue                   |   4 +-
 src/routes/video/components/CardPopover.vue   |   4 +-
 .../video/components/Detail/VideoEditForm.vue |   4 +-
 .../components/Detail/VideoInfoHeader.vue     |   7 +-
 .../components/Detail/VideoInfoPanel.vue      |   4 +-
 .../video/components/Detail/VideoPlayer.vue   |   4 +-
 .../video/components/VideoBulkActions.vue     |   4 +-
 src/routes/video/components/VideoFilters.vue  |   4 +-
 src/routes/video/components/VideoGrid.vue     |   4 +-
 src/routes/video/components/VideoTable.vue    |   4 +-
 src/stores/auth.ts                            |   4 +-
 67 files changed, 257 insertions(+), 168 deletions(-)
 create mode 100644 src/i18n/constants.ts
 create mode 100644 src/i18n/index.ts

diff --git a/AGENTS.md b/AGENTS.md
index 205d22f..fc9f4d9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,7 +1,7 @@
 # AGENTS.md
 
 This file provides guidance for AI coding agents working with the Holistream codebase.
-
+hallo
 ## Project Overview
 
 **Holistream** is a Vue 3 streaming application with Server-Side Rendering (SSR) deployed on Cloudflare Workers. It provides video upload, management, and streaming capabilities for content creators.
diff --git a/src/components/DashboardNav.vue b/src/components/DashboardNav.vue
index f0b6ec1..b1450e3 100644
--- a/src/components/DashboardNav.vue
+++ b/src/components/DashboardNav.vue
@@ -6,14 +6,14 @@ import SettingsIcon from "@/components/icons/SettingsIcon.vue";
 // import Upload from "@/components/icons/Upload.vue";
 import { cn } from "@/lib/utils";
 import { computed, createStaticVNode, ref } from "vue";
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import NotificationDrawer from "./NotificationDrawer.vue";
 
 const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/15 flex press-animated items-center justify-center shrink-0";
 const homeHoist = createStaticVNode(`<img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />`, 1);
 const notificationPopover = ref<InstanceType<typeof NotificationDrawer>>();
 const isNotificationOpen = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleNotificationClick = (event: Event) => {
     notificationPopover.value?.toggle(event);
diff --git a/src/components/GlobalUploadIndicator.vue b/src/components/GlobalUploadIndicator.vue
index af2eb5f..2625d0c 100644
--- a/src/components/GlobalUploadIndicator.vue
+++ b/src/components/GlobalUploadIndicator.vue
@@ -3,13 +3,13 @@ import { useUploadQueue } from '@/composables/useUploadQueue';
 import UploadQueueItem from '@/routes/upload/components/UploadQueueItem.vue';
 import { useUIState } from '@/stores/uiState';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const { items, completeCount, pendingCount, startQueue, removeItem, cancelItem, removeAll } = useUploadQueue();
 const uiState = useUIState();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const isCollapsed = ref(false);
 
diff --git a/src/components/NotificationDrawer.vue b/src/components/NotificationDrawer.vue
index ea85566..d69ebe7 100644
--- a/src/components/NotificationDrawer.vue
+++ b/src/components/NotificationDrawer.vue
@@ -2,7 +2,7 @@
 import NotificationItem from '@/routes/notification/components/NotificationItem.vue';
 import { onClickOutside } from '@vueuse/core';
 import { computed, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 // Ensure client-side only rendering to avoid hydration mismatch
 const isMounted = ref(false);
@@ -28,7 +28,7 @@ interface Notification {
 
 const visible = ref(false);
 const drawerRef = ref(null);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 // Mock notifications data
 const notifications = computed<Notification[]>(() => [
diff --git a/src/components/app/AppDialog.vue b/src/components/app/AppDialog.vue
index 7dfa68e..ab5b172 100644
--- a/src/components/app/AppDialog.vue
+++ b/src/components/app/AppDialog.vue
@@ -2,7 +2,7 @@
 import XIcon from '@/components/icons/XIcon.vue';
 import { cn } from '@/lib/utils';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 // Ensure client-side only rendering to avoid hydration mismatch
 const isMounted = ref(false);
@@ -26,7 +26,7 @@ const emit = defineEmits<{
   (e: 'close'): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const close = () => {
   emit('update:visible', false);
diff --git a/src/components/app/AppToastHost.vue b/src/components/app/AppToastHost.vue
index 33f2254..5a7e627 100644
--- a/src/components/app/AppToastHost.vue
+++ b/src/components/app/AppToastHost.vue
@@ -6,11 +6,11 @@ import XCircleIcon from '@/components/icons/XCircleIcon.vue';
 import XIcon from '@/components/icons/XIcon.vue';
 import { cn } from '@/lib/utils';
 import { onBeforeUnmount, watchEffect } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useAppToast, type AppToastSeverity } from '@/composables/useAppToast';
 
 const { toasts, remove } = useAppToast();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const timers = new Map<string, ReturnType<typeof setTimeout>>();
 
diff --git a/src/components/dashboard/StatsCard.vue b/src/components/dashboard/StatsCard.vue
index ea49880..eeb34af 100644
--- a/src/components/dashboard/StatsCard.vue
+++ b/src/components/dashboard/StatsCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { VNode } from 'vue';
 
 interface Trend {
@@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
   color: 'primary'
 });
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 // const gradients = {
 //   primary: 'from-primary/20 to-primary/5',
diff --git a/src/composables/useAppConfirm.ts b/src/composables/useAppConfirm.ts
index e2e4a62..4aee38e 100644
--- a/src/composables/useAppConfirm.ts
+++ b/src/composables/useAppConfirm.ts
@@ -32,9 +32,9 @@ const state = reactive<AppConfirmState>({
 
 const requireConfirm = (options: AppConfirmOptions) => {
   const i18n = getActiveI18n();
-  const defaultHeader = i18n?.global.t('confirm.defaultHeader') ?? 'Confirm';
-  const defaultAccept = i18n?.global.t('confirm.defaultAccept') ?? 'OK';
-  const defaultReject = i18n?.global.t('confirm.defaultReject') ?? 'Cancel';
+  const defaultHeader = i18n?.t('confirm.defaultHeader') ?? 'Confirm';
+  const defaultAccept = i18n?.t('confirm.defaultAccept') ?? 'OK';
+  const defaultReject = i18n?.t('confirm.defaultReject') ?? 'Cancel';
 
   state.visible = true;
   state.loading = false;
diff --git a/src/composables/useUploadQueue.ts b/src/composables/useUploadQueue.ts
index c2803fd..7913a98 100644
--- a/src/composables/useUploadQueue.ts
+++ b/src/composables/useUploadQueue.ts
@@ -42,7 +42,7 @@ const abortItem = (id: string) => {
 
 export function useUploadQueue() {
     const t = (key: string, params?: Record<string, unknown>) =>
-        getActiveI18n()?.global.t(key, params) ?? key;
+        getActiveI18n()?.t(key, params) ?? key;
 
     const remainingSlots = computed(() => Math.max(0, MAX_ITEMS - items.value.length));
 
@@ -331,7 +331,7 @@ export function useUploadQueue() {
         const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         const value = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
-        return `${new Intl.NumberFormat(getActiveI18n()?.global.locale.value === 'vi' ? 'vi-VN' : 'en-US').format(value)} ${sizes[i]}`;
+        return `${new Intl.NumberFormat(getActiveI18n()?.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US').format(value)} ${sizes[i]}`;
     };
 
     const totalSize = computed(() => {
diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts
new file mode 100644
index 0000000..ac9c0a9
--- /dev/null
+++ b/src/i18n/constants.ts
@@ -0,0 +1,7 @@
+export const supportedLocales = ['en', 'vi'] as const;
+
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+export const defaultLocale: SupportedLocale = 'en';
+
+export const localeCookieKey = 'i18next';
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..2f316f3
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,19 @@
+import type { i18n as I18nInstance } from 'i18next';
+
+import { getActiveI18nInstance } from '@/lib/translation';
+
+import { defaultLocale, supportedLocales, type SupportedLocale } from './constants';
+
+export { supportedLocales, defaultLocale } from './constants';
+export type { SupportedLocale } from './constants';
+export { localeCookieKey } from './constants';
+
+export const normalizeLocale = (locale?: string): SupportedLocale => {
+  if (!locale) return defaultLocale;
+  const normalized = locale.toLowerCase().split('-')[0] as SupportedLocale;
+  return supportedLocales.includes(normalized) ? normalized : defaultLocale;
+};
+
+export const getActiveI18n = (): I18nInstance | undefined => {
+  return getActiveI18nInstance();
+};
diff --git a/src/lib/translation/index.ts b/src/lib/translation/index.ts
index 70898ad..694d62e 100644
--- a/src/lib/translation/index.ts
+++ b/src/lib/translation/index.ts
@@ -1,37 +1,98 @@
-import i18next from "i18next";
-import I18NextHttpBackend from "i18next-http-backend";
-import LanguageDetector from "i18next-browser-languagedetector";
-const i18n = i18next.createInstance();
+import i18next, { type i18n as I18nInstance } from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import I18NextHttpBackend from 'i18next-http-backend';
+import { tryGetContext } from 'hono/context-storage';
 
-i18n
-  .use(I18NextHttpBackend)
-  .use(LanguageDetector)
-  .init({
-    supportedLngs: ["en", "vi"],
-    fallbackLng: "en",
-    defaultNS: "common",
-    ns: [
-      "common",
-      "app",
-      "auth",
-      "nav",
-      "settings",
-      "pageHeader",
-      "confirm",
-      "toast",
-      "overview",
-      "video",
-      "notification",
-      "upload",
-      "home",
-      "legal",
-      "notFound",
-    ],
-    interpolation: {
-      escapeValue: false,
-    },
-    backend: {
-      loadPath: "/locales/{{lng}}/{{ns}}.json", // dynamic fetch JSON
-    },
-  });
-export default i18n;
+import { defaultLocale, localeCookieKey, supportedLocales, type SupportedLocale } from '@/i18n/constants';
+
+const runtimeNamespace = 'translation';
+
+let clientI18n: I18nInstance | undefined;
+
+const normalizeLanguage = (language?: string): SupportedLocale => {
+  if (!language) return defaultLocale;
+  const normalized = language.toLowerCase().split('-')[0] as SupportedLocale;
+  return supportedLocales.includes(normalized) ? normalized : defaultLocale;
+};
+
+const getLoadPath = () => {
+  const cdnBase = import.meta.env.VITE_I18N_CDN_BASE_URL?.trim().replace(/\/+$/, '');
+  if (cdnBase) {
+    return `${cdnBase}/locales/{{lng}}/{{lng}}.json`;
+  }
+  return '/locales/{{lng}}/{{lng}}.json';
+};
+
+const createInstance = () => {
+  const instance = i18next.createInstance();
+
+  instance.use(I18NextHttpBackend);
+  if (!import.meta.env.SSR) {
+    instance.use(LanguageDetector);
+  }
+
+  return instance;
+};
+
+const initInstance = async (instance: I18nInstance, language?: string) => {
+  const lng = normalizeLanguage(language);
+
+  if (!instance.isInitialized) {
+    await instance.init({
+      supportedLngs: [...supportedLocales],
+      fallbackLng: defaultLocale,
+      load: 'languageOnly',
+      lng,
+      ns: [runtimeNamespace],
+      defaultNS: runtimeNamespace,
+      fallbackNS: runtimeNamespace,
+      interpolation: {
+        escapeValue: false,
+      },
+      backend: {
+        loadPath: getLoadPath(),
+      },
+      ...(import.meta.env.SSR
+        ? {}
+        : {
+            detection: {
+              order: ['cookie', 'navigator', 'htmlTag'],
+              lookupCookie: localeCookieKey,
+              caches: ['cookie'],
+            },
+          }),
+    });
+
+    return instance;
+  }
+
+  if (instance.resolvedLanguage !== lng) {
+    await instance.changeLanguage(lng);
+  }
+
+  return instance;
+};
+
+export const createI18nForRuntime = async (language?: string) => {
+  if (import.meta.env.SSR) {
+    const serverI18n = await initInstance(createInstance(), language);
+    const context = tryGetContext<any>();
+    context?.set?.('i18n', serverI18n);
+    return serverI18n;
+  }
+
+  if (!clientI18n) {
+    clientI18n = createInstance();
+  }
+
+  return initInstance(clientI18n, language);
+};
+
+export const getActiveI18nInstance = () => {
+  if (!import.meta.env.SSR) {
+    return clientI18n;
+  }
+
+  const context = tryGetContext<any>();
+  return context?.get?.('i18n') as I18nInstance | undefined;
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index a244414..885d2ac 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -53,7 +53,7 @@ export function getImageAspectRatio(url: string): Promise<AspectInfo> {
 
 
 const getRuntimeLocaleTag = () => {
-  const locale = getActiveI18n()?.global.locale.value;
+  const locale = getActiveI18n()?.resolvedLanguage;
   return locale === 'vi' ? 'vi-VN' : 'en-US';
 };
 
diff --git a/src/main.ts b/src/main.ts
index 2a24e1e..302d4ba 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,7 +6,7 @@ import { createSSRApp } from 'vue';
 import { RouterView } from 'vue-router';
 
 import I18NextVue from 'i18next-vue';
-import i18next from '@/lib/translation';
+import { createI18nForRuntime } from '@/lib/translation';
 
 import { withErrorBoundary } from './lib/hoc/withErrorBoundary';
 import createAppRouter from './routes';
@@ -32,8 +32,8 @@ export async function createApp(lng: string = 'en') {
         }
     });
     app.use(pinia);
-    await i18next.init({lng});
-    app.use(I18NextVue, {i18next});
+    const i18next = await createI18nForRuntime(lng);
+    app.use(I18NextVue, { i18next });
     app.use(PiniaColada, {
         pinia,
         plugins: [
diff --git a/src/routes/NotFound.vue b/src/routes/NotFound.vue
index 78babca..101e213 100644
--- a/src/routes/NotFound.vue
+++ b/src/routes/NotFound.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { VueHead } from '@/components/VueHead';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
diff --git a/src/routes/auth/forgot.vue b/src/routes/auth/forgot.vue
index f24d8fe..e9ce56a 100644
--- a/src/routes/auth/forgot.vue
+++ b/src/routes/auth/forgot.vue
@@ -31,11 +31,11 @@
 import { client } from '@/api/client';
 import { useAppToast } from '@/composables/useAppToast';
 import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { z } from 'zod';
 
 const toast = useAppToast();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const form = reactive({
     email: ''
diff --git a/src/routes/auth/login.vue b/src/routes/auth/login.vue
index d42f723..e62ba39 100644
--- a/src/routes/auth/login.vue
+++ b/src/routes/auth/login.vue
@@ -80,13 +80,13 @@
 import { useAuthStore } from '@/stores/auth';
 import { useAppToast } from '@/composables/useAppToast';
 import { reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { z } from 'zod';
 
 const toast = useAppToast();
 const auth = useAuthStore();
 const showPassword = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const form = reactive({
     email: '',
diff --git a/src/routes/auth/signup.vue b/src/routes/auth/signup.vue
index 2a18fc3..a792fb5 100644
--- a/src/routes/auth/signup.vue
+++ b/src/routes/auth/signup.vue
@@ -51,12 +51,12 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth';
 import { reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { z } from 'zod';
 
 const auth = useAuthStore();
 const showPassword = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const form = reactive({
     name: '',
diff --git a/src/routes/home/Home.vue b/src/routes/home/Home.vue
index c77e787..1e4aac4 100644
--- a/src/routes/home/Home.vue
+++ b/src/routes/home/Home.vue
@@ -173,13 +173,13 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { cn } from '@/lib/utils';
+import { useTranslation } from 'i18next-vue';
 
-const { t, tm } = useI18n();
+const { t } = useTranslation();
 
 const getFeatureList = (key: string): string[] => {
-    const localized = tm(key);
+    const localized = t(key, { returnObjects: true });
     return Array.isArray(localized) ? localized.map((item) => String(item)) : [];
 };
 
diff --git a/src/routes/home/Layout.vue b/src/routes/home/Layout.vue
index 12c08c6..1edaa94 100644
--- a/src/routes/home/Layout.vue
+++ b/src/routes/home/Layout.vue
@@ -80,7 +80,7 @@
 </template>
 <script lang="ts" setup>
 import { Head } from '@unhead/vue/components'
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
diff --git a/src/routes/home/Privacy.vue b/src/routes/home/Privacy.vue
index fcebfb0..19b15e2 100644
--- a/src/routes/home/Privacy.vue
+++ b/src/routes/home/Privacy.vue
@@ -21,10 +21,10 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useHead } from '@unhead/vue';
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const pageContent = computed(() => {
     const title = t('legal.privacy.title');
diff --git a/src/routes/home/Terms.vue b/src/routes/home/Terms.vue
index e9f7a22..d7ec699 100644
--- a/src/routes/home/Terms.vue
+++ b/src/routes/home/Terms.vue
@@ -21,10 +21,10 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useHead } from '@unhead/vue';
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const pageContent = computed(() => {
     const title = t('legal.terms.title');
diff --git a/src/routes/notification/Notification.vue b/src/routes/notification/Notification.vue
index 3b867ac..a3a8e3d 100644
--- a/src/routes/notification/Notification.vue
+++ b/src/routes/notification/Notification.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import NotificationActions from './components/NotificationActions.vue';
 import NotificationList from './components/NotificationList.vue';
@@ -21,7 +21,7 @@ interface Notification {
 
 const loading = ref(false);
 const activeTab = ref('all');
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const notifications = ref<Notification[]>([
     {
diff --git a/src/routes/notification/components/NotificationActions.vue b/src/routes/notification/components/NotificationActions.vue
index ab2a54d..07dff75 100644
--- a/src/routes/notification/components/NotificationActions.vue
+++ b/src/routes/notification/components/NotificationActions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 interface Props {
     loading?: boolean;
@@ -13,7 +13,7 @@ const emit = defineEmits<{
     clearAll: [];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/notification/components/NotificationItem.vue b/src/routes/notification/components/NotificationItem.vue
index b326d68..9f4d756 100644
--- a/src/routes/notification/components/NotificationItem.vue
+++ b/src/routes/notification/components/NotificationItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import InfoIcon from '@/components/icons/InfoIcon.vue';
 import CheckCircleIcon from '@/components/icons/CheckCircleIcon.vue';
 import AlertTriangleIcon from '@/components/icons/AlertTriangleIcon.vue';
@@ -32,7 +32,7 @@ const emit = defineEmits<{
     delete: [id: string];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const iconComponent = computed(() => {
     const icons: Record<string, any> = {
diff --git a/src/routes/notification/components/NotificationList.vue b/src/routes/notification/components/NotificationList.vue
index 5081a24..ab1d1f7 100644
--- a/src/routes/notification/components/NotificationList.vue
+++ b/src/routes/notification/components/NotificationList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import NotificationItem from './NotificationItem.vue';
 
 interface Notification {
@@ -24,7 +24,7 @@ const emit = defineEmits<{
     delete: [id: string];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/overview/Overview.vue b/src/routes/overview/Overview.vue
index 024f1f6..e659a97 100644
--- a/src/routes/overview/Overview.vue
+++ b/src/routes/overview/Overview.vue
@@ -2,7 +2,7 @@
 import { client, type ModelVideo } from '@/api/client';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import NameGradient from './components/NameGradient.vue';
 import QuickActions from './components/QuickActions.vue';
 import RecentVideos from './components/RecentVideos.vue';
@@ -10,7 +10,7 @@ import StatsOverview from './components/StatsOverview.vue';
 
 const loading = ref(true);
 const recentVideos = ref<ModelVideo[]>([]);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const stats = ref({
     totalVideos: 0,
diff --git a/src/routes/overview/components/NameGradient.vue b/src/routes/overview/components/NameGradient.vue
index f524755..ccaa38e 100644
--- a/src/routes/overview/components/NameGradient.vue
+++ b/src/routes/overview/components/NameGradient.vue
@@ -5,8 +5,8 @@
 </template>
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const auth = useAuthStore();
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
diff --git a/src/routes/overview/components/QuickActions.vue b/src/routes/overview/components/QuickActions.vue
index bdeb99d..488eb07 100644
--- a/src/routes/overview/components/QuickActions.vue
+++ b/src/routes/overview/components/QuickActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import Chart from '@/components/icons/Chart.vue';
 import Credit from '@/components/icons/Credit.vue';
 import Upload from '@/components/icons/Upload.vue';
@@ -17,7 +17,7 @@ defineProps<Props>();
 
 const uiState = useUIState();
 const router = useRouter();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const quickActions = computed(() => [
     {
diff --git a/src/routes/overview/components/RecentVideos.vue b/src/routes/overview/components/RecentVideos.vue
index 8a8f3e5..e4291c4 100644
--- a/src/routes/overview/components/RecentVideos.vue
+++ b/src/routes/overview/components/RecentVideos.vue
@@ -2,7 +2,7 @@
 import { ModelVideo } from '@/api/client';
 import EmptyState from '@/components/dashboard/EmptyState.vue';
 import { formatDate, formatDuration } from '@/lib/utils';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRouter } from 'vue-router';
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
 defineProps<Props>();
 
 const router = useRouter();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const getStatusClass = (status?: string) => {
     switch (status?.toLowerCase()) {
diff --git a/src/routes/overview/components/Referral.vue b/src/routes/overview/components/Referral.vue
index e53dc9e..36e790e 100644
--- a/src/routes/overview/components/Referral.vue
+++ b/src/routes/overview/components/Referral.vue
@@ -28,11 +28,11 @@
 <script lang="ts" setup>
 import { useAuthStore } from '@/stores/auth';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const auth = useAuthStore();
 const isCopied = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const url = computed(() => `${location.origin}/ref/${auth.user?.username || ''}`);
 
diff --git a/src/routes/overview/components/StatsOverview.vue b/src/routes/overview/components/StatsOverview.vue
index e25870d..fdc86b5 100644
--- a/src/routes/overview/components/StatsOverview.vue
+++ b/src/routes/overview/components/StatsOverview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import StatsCard from '@/components/dashboard/StatsCard.vue';
 import { formatBytes } from '@/lib/utils';
 
@@ -15,7 +15,7 @@ interface Props {
 }
 
 defineProps<Props>();
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/overview/components/StorageUsage.vue b/src/routes/overview/components/StorageUsage.vue
index f04f1d8..6766c6f 100644
--- a/src/routes/overview/components/StorageUsage.vue
+++ b/src/routes/overview/components/StorageUsage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { formatBytes } from '@/lib/utils';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 interface Props {
     loading: boolean;
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const storagePercentage = computed(() => {
     return Math.round((props.stats.storageUsed / props.stats.storageLimit) * 100);
diff --git a/src/routes/overview/components/WelcomeBanner.vue b/src/routes/overview/components/WelcomeBanner.vue
index c751b66..449d5d0 100644
--- a/src/routes/overview/components/WelcomeBanner.vue
+++ b/src/routes/overview/components/WelcomeBanner.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const auth = useAuthStore();
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/settings/Settings.vue b/src/routes/settings/Settings.vue
index 9357402..ad386df 100644
--- a/src/routes/settings/Settings.vue
+++ b/src/routes/settings/Settings.vue
@@ -63,7 +63,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRoute } from 'vue-router';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import AppConfirmHost from '@/components/app/AppConfirmHost.vue';
@@ -80,7 +80,7 @@ import VideoPlayIcon from '@/components/icons/VideoPlayIcon.vue';
 
 const route = useRoute();
 const auth = useAuthStore();
-const { t } = useI18n();
+const { t } = useTranslation();
 // Map tab values to their paths
 const tabPaths: Record<string, string> = {
     profile: '/settings',
diff --git a/src/routes/settings/components/ConnectedAccountsCard.vue b/src/routes/settings/components/ConnectedAccountsCard.vue
index d84ff84..759f7cb 100644
--- a/src/routes/settings/components/ConnectedAccountsCard.vue
+++ b/src/routes/settings/components/ConnectedAccountsCard.vue
@@ -6,7 +6,7 @@ import CheckIcon from '@/components/icons/CheckIcon.vue';
 import LockIcon from '@/components/icons/LockIcon.vue';
 import TelegramIcon from '@/components/icons/TelegramIcon.vue';
 import XIcon from '@/components/icons/XIcon.vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     dialogVisible: boolean;
@@ -31,7 +31,7 @@ const emit = defineEmits<{
     (e: 'disconnect-telegram'): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleChangePassword = () => {
     emit('change-password');
diff --git a/src/routes/settings/components/ProfileInformationCard.vue b/src/routes/settings/components/ProfileInformationCard.vue
index 43a33e2..db1d889 100644
--- a/src/routes/settings/components/ProfileInformationCard.vue
+++ b/src/routes/settings/components/ProfileInformationCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import AppButton from '@/components/app/AppButton.vue';
 import AppInput from '@/components/app/AppInput.vue';
 import AppProgressBar from '@/components/app/AppProgressBar.vue';
@@ -12,7 +12,7 @@ import UserIcon from '@/components/icons/UserIcon.vue';
 import XIcon from '@/components/icons/XIcon.vue';
 
 const auth = useAuthStore();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const props = defineProps<{
     editing: boolean;
diff --git a/src/routes/settings/components/SecuritySettingsCard.vue b/src/routes/settings/components/SecuritySettingsCard.vue
index 492dbe9..34d0235 100644
--- a/src/routes/settings/components/SecuritySettingsCard.vue
+++ b/src/routes/settings/components/SecuritySettingsCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import AppButton from '@/components/app/AppButton.vue';
 import AppDialog from '@/components/app/AppDialog.vue';
 import AppInput from '@/components/app/AppInput.vue';
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 const twoFactorDialogVisible = ref(false);
 const twoFactorCode = ref('');
 const twoFactorSecret = ref('JBSWY3DPEHPK3PXP');
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleToggle2FA = async () => {
     if (!props.twoFactorEnabled) {
diff --git a/src/routes/settings/pages/AdsVast.vue b/src/routes/settings/pages/AdsVast.vue
index cbddeef..9a49589 100644
--- a/src/routes/settings/pages/AdsVast.vue
+++ b/src/routes/settings/pages/AdsVast.vue
@@ -12,11 +12,11 @@ import TrashIcon from '@/components/icons/TrashIcon.vue';
 import { useAppConfirm } from '@/composables/useAppConfirm';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const toast = useAppToast();
 const confirm = useAppConfirm();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 interface VastTemplate {
     id: string;
diff --git a/src/routes/settings/pages/Billing.vue b/src/routes/settings/pages/Billing.vue
index 6fa45e5..d1f58b8 100644
--- a/src/routes/settings/pages/Billing.vue
+++ b/src/routes/settings/pages/Billing.vue
@@ -13,11 +13,12 @@ import { useAppToast } from '@/composables/useAppToast';
 import { useAuthStore } from '@/stores/auth';
 import { useQuery } from '@pinia/colada';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
+import { getActiveI18n } from '@/i18n';
 
 const toast = useAppToast();
 const auth = useAuthStore();
-const { t, locale } = useI18n();
+const { t } = useTranslation();
 
 const { data, isLoading } = useQuery({
     key: () => ['payments-and-plans'],
@@ -93,7 +94,7 @@ const getStatusLabel = (status: string) => {
     return map[status] || status;
 };
 
-const currencyFormatter = computed(() => new Intl.NumberFormat(locale.value === 'vi' ? 'vi-VN' : 'en-US', {
+const currencyFormatter = computed(() => new Intl.NumberFormat(getActiveI18n()?.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US', {
     style: 'currency',
     currency: 'USD',
     maximumFractionDigits: 2,
@@ -118,7 +119,7 @@ const subscribe = async (plan: ModelPlan) => {
 
         paymentHistory.value.unshift({
             id: `inv_${Date.now()}`,
-            date: new Date().toLocaleDateString(locale.value === 'vi' ? 'vi-VN' : 'en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
+            date: new Date().toLocaleDateString(getActiveI18n()?.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
             amount: plan.price || 0,
             plan: plan.name || t('settings.billing.unknownPlan'),
             status: 'success',
diff --git a/src/routes/settings/pages/DangerZone.vue b/src/routes/settings/pages/DangerZone.vue
index cd0d1bb..c8a5082 100644
--- a/src/routes/settings/pages/DangerZone.vue
+++ b/src/routes/settings/pages/DangerZone.vue
@@ -6,11 +6,11 @@ import SlidersIcon from '@/components/icons/SlidersIcon.vue';
 import TrashIcon from '@/components/icons/TrashIcon.vue';
 import { useAppConfirm } from '@/composables/useAppConfirm';
 import { useAppToast } from '@/composables/useAppToast';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const toast = useAppToast();
 const confirm = useAppConfirm();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleDeleteAccount = () => {
     confirm.require({
diff --git a/src/routes/settings/pages/DomainsDns.vue b/src/routes/settings/pages/DomainsDns.vue
index e1c8f86..e06c4ea 100644
--- a/src/routes/settings/pages/DomainsDns.vue
+++ b/src/routes/settings/pages/DomainsDns.vue
@@ -11,11 +11,11 @@ import TrashIcon from '@/components/icons/TrashIcon.vue';
 import { useAppConfirm } from '@/composables/useAppConfirm';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const toast = useAppToast();
 const confirm = useAppConfirm();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const domains = ref([
     { id: '1', name: 'example.com', addedAt: '2024-01-15' },
diff --git a/src/routes/settings/pages/NotificationSettings.vue b/src/routes/settings/pages/NotificationSettings.vue
index 6249158..cfe5c74 100644
--- a/src/routes/settings/pages/NotificationSettings.vue
+++ b/src/routes/settings/pages/NotificationSettings.vue
@@ -8,10 +8,10 @@ import SendIcon from '@/components/icons/SendIcon.vue';
 import TelegramIcon from '@/components/icons/TelegramIcon.vue';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const toast = useAppToast();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const notificationSettings = ref({
     email: true,
diff --git a/src/routes/settings/pages/PlayerSettings.vue b/src/routes/settings/pages/PlayerSettings.vue
index 19443a5..3cb16ef 100644
--- a/src/routes/settings/pages/PlayerSettings.vue
+++ b/src/routes/settings/pages/PlayerSettings.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import AppButton from '@/components/app/AppButton.vue';
 import AppSwitch from '@/components/app/AppSwitch.vue';
 import CheckIcon from '@/components/icons/CheckIcon.vue';
 import { useAppToast } from '@/composables/useAppToast';
 
 const toast = useAppToast();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const playerSettings = ref({
     autoplay: true,
diff --git a/src/routes/settings/pages/SecurityNConnected.vue b/src/routes/settings/pages/SecurityNConnected.vue
index b6727bf..e19d664 100644
--- a/src/routes/settings/pages/SecurityNConnected.vue
+++ b/src/routes/settings/pages/SecurityNConnected.vue
@@ -13,12 +13,12 @@ import { normalizeLocale } from '@/i18n';
 import { useAppConfirm } from '@/composables/useAppConfirm';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const auth = useAuthStore();
 const toast = useAppToast();
 const confirm = useAppConfirm();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const selectedLanguage = ref<SupportedLocale>(normalizeLocale((auth.user as any)?.language ?? (auth.user as any)?.locale));
 const languageSaving = ref(false);
diff --git a/src/routes/upload/Upload.vue b/src/routes/upload/Upload.vue
index 991ad88..fbb8858 100644
--- a/src/routes/upload/Upload.vue
+++ b/src/routes/upload/Upload.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useUploadQueue } from '@/composables/useUploadQueue';
 import { useUIState } from '@/stores/uiState';
 import RemoteUrlForm from './components/RemoteUrlForm.vue';
@@ -8,7 +8,7 @@ import UploadDropzone from './components/UploadDropzone.vue';
 
 const uiState = useUIState();
 const mode = ref<'local' | 'remote'>('local');
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const { addFiles, addRemoteUrls, pendingCount, startQueue, remainingSlots, maxItems } = useUploadQueue();
 
diff --git a/src/routes/upload/components/BulkActions.vue b/src/routes/upload/components/BulkActions.vue
index 86564da..1f5c74b 100644
--- a/src/routes/upload/components/BulkActions.vue
+++ b/src/routes/upload/components/BulkActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     pendingCount?: number;
@@ -9,7 +9,7 @@ defineProps<{
 
 const category = ref('');
 const visibility = ref('public');
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/upload/components/InfoTip.vue b/src/routes/upload/components/InfoTip.vue
index aa17f1c..ca32f04 100644
--- a/src/routes/upload/components/InfoTip.vue
+++ b/src/routes/upload/components/InfoTip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/upload/components/RemoteUrlForm.vue b/src/routes/upload/components/RemoteUrlForm.vue
index a168355..e92ad86 100644
--- a/src/routes/upload/components/RemoteUrlForm.vue
+++ b/src/routes/upload/components/RemoteUrlForm.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{ maxUrls?: number }>();
 const urls = ref('');
 
 const emit = defineEmits<{ submit: [urls: string[]] }>();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleSubmit = () => {
     const limit = props.maxUrls ?? 5;
diff --git a/src/routes/upload/components/UploadDropzone.vue b/src/routes/upload/components/UploadDropzone.vue
index b5b8fcf..48e026c 100644
--- a/src/routes/upload/components/UploadDropzone.vue
+++ b/src/routes/upload/components/UploadDropzone.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{ maxFiles?: number }>();
 const emit = defineEmits<{ filesSelected: [files: FileList] }>();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const isDragOver = ref(false);
 let dragCounter = 0;
diff --git a/src/routes/upload/components/UploadModeToggle.vue b/src/routes/upload/components/UploadModeToggle.vue
index 74e1c52..33147bc 100644
--- a/src/routes/upload/components/UploadModeToggle.vue
+++ b/src/routes/upload/components/UploadModeToggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     modelValue: 'local' | 'remote';
@@ -11,7 +11,7 @@ const emit = defineEmits<{
     'update:modelValue': [value: 'local' | 'remote'];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const modeList = computed<{ id: 'local' | 'remote'; label: string; icon: string }[]>(() => [
     {
diff --git a/src/routes/upload/components/UploadQueue.vue b/src/routes/upload/components/UploadQueue.vue
index f6642c9..4fe4705 100644
--- a/src/routes/upload/components/UploadQueue.vue
+++ b/src/routes/upload/components/UploadQueue.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UploadQueueItem from './UploadQueueItem.vue';
 import type { QueueItem } from '@/composables/useUploadQueue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     items?: QueueItem[];
@@ -17,7 +17,7 @@ const emit = defineEmits<{
     startQueue: [];
 }>()
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/upload/components/UploadQueueItem.vue b/src/routes/upload/components/UploadQueueItem.vue
index 6208718..9a6383b 100644
--- a/src/routes/upload/components/UploadQueueItem.vue
+++ b/src/routes/upload/components/UploadQueueItem.vue
@@ -2,7 +2,7 @@
 import FileUploadType from '@/components/icons/FileUploadType.vue';
 import type { QueueItem } from '@/composables/useUploadQueue';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     item: QueueItem;
@@ -13,7 +13,7 @@ const emit = defineEmits<{
     cancel: [id: string];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const statusLabel = computed(() => {
     switch (props.item.status) {
diff --git a/src/routes/video/CopyVideoModal.vue b/src/routes/video/CopyVideoModal.vue
index 50b451c..92af199 100644
--- a/src/routes/video/CopyVideoModal.vue
+++ b/src/routes/video/CopyVideoModal.vue
@@ -3,7 +3,7 @@ import type { ModelVideo } from '@/api/client';
 import { fetchMockVideoById } from '@/mocks/videos';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     videoId: string;
@@ -17,7 +17,7 @@ const toast = useAppToast();
 const video = ref<ModelVideo | null>(null);
 const loading = ref(true);
 const copiedField = ref<string | null>(null);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const fetchVideo = async () => {
     loading.value = true;
diff --git a/src/routes/video/DetailVideo.vue b/src/routes/video/DetailVideo.vue
index 99929ac..879dd4d 100644
--- a/src/routes/video/DetailVideo.vue
+++ b/src/routes/video/DetailVideo.vue
@@ -5,7 +5,7 @@ import { deleteMockVideo, fetchMockVideoById, updateMockVideo } from '@/mocks/vi
 import { useAppConfirm } from '@/composables/useAppConfirm';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRoute, useRouter } from 'vue-router';
 import VideoEditForm from './components/Detail/VideoEditForm.vue';
 import VideoHeader from './components/Detail/VideoInfoHeader.vue';
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();
 const toast = useAppToast();
 const confirm = useAppConfirm();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const videoId = route.params.id as string;
 const video = ref<ModelVideo | null>(null);
diff --git a/src/routes/video/DetailVideoModal.vue b/src/routes/video/DetailVideoModal.vue
index e4877e4..85814db 100644
--- a/src/routes/video/DetailVideoModal.vue
+++ b/src/routes/video/DetailVideoModal.vue
@@ -3,7 +3,7 @@ import type { ModelVideo } from '@/api/client';
 import { fetchMockVideoById, updateMockVideo } from '@/mocks/videos';
 import { useAppToast } from '@/composables/useAppToast';
 import { ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     videoId: string;
@@ -17,7 +17,7 @@ const toast = useAppToast();
 const video = ref<ModelVideo | null>(null);
 const loading = ref(true);
 const saving = ref(false);
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const form = ref({
     title: '',
diff --git a/src/routes/video/Videos.vue b/src/routes/video/Videos.vue
index 59815f3..534c8ce 100644
--- a/src/routes/video/Videos.vue
+++ b/src/routes/video/Videos.vue
@@ -4,7 +4,7 @@ import EmptyState from '@/components/dashboard/EmptyState.vue';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import { fetchMockVideos } from '@/mocks/videos';
 import { createStaticVNode, computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import { useRouter } from 'vue-router';
 
 import { useUploadQueue } from '@/composables/useUploadQueue';
@@ -23,7 +23,7 @@ const uiState = useUIState();
 const { addFiles, startQueue } = useUploadQueue();
 const toast = useAppToast();
 const router = useRouter();
-const { t } = useI18n();
+const { t } = useTranslation();
 const videos = ref<ModelVideo[]>([]);
 const loading = ref(true);
 const error = ref<string | null>(null);
diff --git a/src/routes/video/components/CardPopover.vue b/src/routes/video/components/CardPopover.vue
index 12ab85c..13ca701 100644
--- a/src/routes/video/components/CardPopover.vue
+++ b/src/routes/video/components/CardPopover.vue
@@ -45,7 +45,7 @@ import EllipsisVerticalIcon from '@/components/icons/EllipsisVerticalIcon.vue';
 import type { ModelVideo } from '@/api/client';
 import { useAppToast } from '@/composables/useAppToast';
 import { computed, nextTick, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 const props = defineProps<{
@@ -61,7 +61,7 @@ const isOpen = ref(false);
 const containerRef = ref<HTMLElement>();
 const menuRef = ref<HTMLElement>();
 const menuStyle = ref<Record<string, string>>({});
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const videoUrl = computed(() => {
     return `${window.location.origin}/videos/${props.video.id}`;
diff --git a/src/routes/video/components/Detail/VideoEditForm.vue b/src/routes/video/components/Detail/VideoEditForm.vue
index 712fa68..8ef7043 100644
--- a/src/routes/video/components/Detail/VideoEditForm.vue
+++ b/src/routes/video/components/Detail/VideoEditForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     title: string;
@@ -14,7 +14,7 @@ const emit = defineEmits<{
     toggleEdit: [];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/video/components/Detail/VideoInfoHeader.vue b/src/routes/video/components/Detail/VideoInfoHeader.vue
index e49490d..92a3b11 100644
--- a/src/routes/video/components/Detail/VideoInfoHeader.vue
+++ b/src/routes/video/components/Detail/VideoInfoHeader.vue
@@ -2,7 +2,8 @@
 import type { ModelVideo } from '@/api/client';
 import { formatBytes, getStatusSeverity } from '@/lib/utils';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
+import { getActiveI18n } from '@/i18n';
 
 const props = defineProps<{
     video: ModelVideo;
@@ -14,7 +15,7 @@ const emit = defineEmits<{
     delete: [];
 }>();
 
-const { t, locale } = useI18n();
+const { t } = useTranslation();
 
 const formatFileSize = (bytes?: number): string => {
     if (!bytes) return '-';
@@ -35,7 +36,7 @@ const formatDuration = (seconds?: number): string => {
 const formatDate = (dateStr?: string): string => {
     if (!dateStr) return '-';
     const date = new Date(dateStr);
-    return date.toLocaleString(locale.value === 'vi' ? 'vi-VN' : 'en-US', {
+    return date.toLocaleString(getActiveI18n()?.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US', {
         month: 'long',
         day: 'numeric',
         year: 'numeric',
diff --git a/src/routes/video/components/Detail/VideoInfoPanel.vue b/src/routes/video/components/Detail/VideoInfoPanel.vue
index f7fa694..40d22db 100644
--- a/src/routes/video/components/Detail/VideoInfoPanel.vue
+++ b/src/routes/video/components/Detail/VideoInfoPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ModelVideo } from '@/api/client';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     video: ModelVideo;
@@ -11,7 +11,7 @@ const emit = defineEmits<{
     copy: [text: string, label: string];
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const handleCopy = (text: string, label: string) => {
     emit('copy', text, label);
diff --git a/src/routes/video/components/Detail/VideoPlayer.vue b/src/routes/video/components/Detail/VideoPlayer.vue
index 201e79c..4ff3656 100644
--- a/src/routes/video/components/Detail/VideoPlayer.vue
+++ b/src/routes/video/components/Detail/VideoPlayer.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ModelVideo } from '@/api/client';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     video: ModelVideo;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/video/components/VideoBulkActions.vue b/src/routes/video/components/VideoBulkActions.vue
index 4c25e23..355eb3b 100644
--- a/src/routes/video/components/VideoBulkActions.vue
+++ b/src/routes/video/components/VideoBulkActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModelVideo } from '@/api/client';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 defineProps<{
     selectedVideos: ModelVideo[];
@@ -11,7 +11,7 @@ const emit = defineEmits<{
     (e: 'clear'): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 </script>
 
 <template>
diff --git a/src/routes/video/components/VideoFilters.vue b/src/routes/video/components/VideoFilters.vue
index c874f57..e959af4 100644
--- a/src/routes/video/components/VideoFilters.vue
+++ b/src/routes/video/components/VideoFilters.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     searchQuery: string;
@@ -19,7 +19,7 @@ const emit = defineEmits<{
     (e: 'search'): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 const pageCount = computed(() => Math.ceil(props.total / props.limit) || 1);
 const first = computed(() => Math.min((props.page - 1) * props.limit + 1, props.total));
 const last = computed(() => Math.min(props.page * props.limit, props.total));
diff --git a/src/routes/video/components/VideoGrid.vue b/src/routes/video/components/VideoGrid.vue
index 2bfb1ad..d358967 100644
--- a/src/routes/video/components/VideoGrid.vue
+++ b/src/routes/video/components/VideoGrid.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ModelVideo } from '@/api/client';
 import { formatDate, formatDuration, getStatusSeverity } from '@/lib/utils';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 import CardPopover from './CardPopover.vue';
 
 const props = defineProps<{
@@ -15,7 +15,7 @@ const emit = defineEmits<{
     (e: 'delete', videoId: string): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const severityClasses: Record<string, string> = {
     success: 'bg-green-100 text-green-800',
diff --git a/src/routes/video/components/VideoTable.vue b/src/routes/video/components/VideoTable.vue
index 0487e4c..75f8b28 100644
--- a/src/routes/video/components/VideoTable.vue
+++ b/src/routes/video/components/VideoTable.vue
@@ -5,7 +5,7 @@ import PencilIcon from '@/components/icons/PencilIcon.vue';
 import TrashIcon from '@/components/icons/TrashIcon.vue';
 import VideoIcon from '@/components/icons/VideoIcon.vue';
 import { formatBytes, formatDate, getStatusSeverity } from '@/lib/utils';
-import { useI18n } from 'vue-i18n';
+import { useTranslation } from 'i18next-vue';
 
 const props = defineProps<{
     videos: ModelVideo[];
@@ -20,7 +20,7 @@ const emit = defineEmits<{
     (e: 'copy', videoId: string): void;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const severityClasses: Record<string, string> = {
     success: 'bg-green-100 text-green-800',
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 70b314b..7b3dd53 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -23,14 +23,14 @@ const resolveUserLocale = (target: Partial<ModelUser> | null | undefined): Suppo
 const applyRuntimeLocale = (locale: SupportedLocale) => {
     const i18n = getActiveI18n();
     if (!i18n) return;
-    i18n.global.locale.value = locale;
+    i18n.changeLanguage(locale);
 };
 
 export const useAuthStore = defineStore('auth', () => {
     const user = ref<ModelUser | null>(null);
     const router = useRouter();
     const t = (key: string, params?: Record<string, unknown>) =>
-        getActiveI18n()?.global.t(key, params) ?? key;
+        getActiveI18n()?.t(key, params) ?? key;
     const loading = ref(false);
     const error = ref<string | null>(null);
     const initialized = ref(false);