feat: add global $li18n provide with renderKey to reactively rend…

…er locale changes
NamesMT · Nov 16, 2024 · dbf604c · dbf604c
1 parent c68e80f
commit dbf604c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/apps/frontend/app/pages/index.vue b/apps/frontend/app/pages/index.vue
@@ -14,11 +14,6 @@ definePageMeta({
 })
 
 const { t, locale, setLocale } = useI18n()
-
-const dayjsRenderKey = ref(0)
-// Fast trigger dayjs re-render after locale change
-watch(locale, () => setTimeout(() => ++dayjsRenderKey.value, 100))
-
 const runtimeConfig = useRuntimeConfig()
 const colorMode = useColorMode()
 const { $apiClient, $auth } = useNuxtApp()
@@ -90,7 +85,7 @@ const { isPending, isError, data, error } = useQuery({
         @pointerdown="setLocale(locale === 'en' ? 'vi' : 'en')"
       />
 
-      <div :key="dayjsRenderKey">
+      <div :key="$li18n.renderKey">
         {{ dayjs().format('dddd') }}
       </div>
     </div>

diff --git a/apps/frontend/app/plugins/i18n.ts → apps/frontend/app/plugins/li18n.ts b/apps/frontend/app/plugins/i18n.ts → apps/frontend/app/plugins/li18n.ts
@@ -1,7 +1,7 @@
 import { defaultOptions } from 'primevue/config'
 
 export default defineNuxtPlugin({
-  name: 'local-i18n',
+  name: 'local-li18n',
   parallel: true,
   dependsOn: [
     'local-auth',
@@ -15,15 +15,26 @@ export default defineNuxtPlugin({
       firstDayOfWeek: 1,
     }
 
+    const li18n = reactive({
+      renderKey: 0,
+    })
+
     watchImmediate(() => $i18n.locale.value, async (locale) => {
-      // @ts-expect-error locale might not be defined
       await setDayjsLocale(locale).catch(() => { console.error(`Failed to set '${locale}' for dayjs hook`) })
 
       switch (locale) {
         default:
           primevue.config.locale = { ...baseLocale }
           break
       }
+
+      ++li18n.renderKey
     })
+
+    return {
+      provide: {
+        li18n,
+      },
+    }
   },
 })