((locale, language) => {
/** split language to language and code, e.g. en-GB -> [en, GB] */
const [lang, code] = language.split(/[_-]/)
@@ -41,7 +41,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
const availableLocale = availableLocales[0]
/** if we found a matching locale, return it */
- if (availableLocale) locale = availableLocale
+ if (availableLocale) locale = availableLocale as keyof typeof Language
return locale
}, 'en' /** fallback locale */)
diff --git a/packages/nc-gui/composables/useGlobal/types.ts b/packages/nc-gui/composables/useGlobal/types.ts
index e598332022..f1ec9534ee 100644
--- a/packages/nc-gui/composables/useGlobal/types.ts
+++ b/packages/nc-gui/composables/useGlobal/types.ts
@@ -1,7 +1,7 @@
import type { ComputedRef, Ref, ToRefs } from 'vue'
import type { WritableComputedRef } from '@vue/reactivity'
import type { JwtPayload } from 'jwt-decode'
-import type { User } from '~/lib'
+import type { Language, User } from '~/lib'
import type { useCounter } from '#imports'
export interface FeedbackForm {
@@ -30,7 +30,7 @@ export interface AppInfo {
export interface StoredState {
token: string | null
user: User | null
- lang: string
+ lang: keyof typeof Language
darkMode: boolean
feedbackForm: FeedbackForm
filterAutoSave: boolean
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index c8f1f9226d..fdb6fed99c 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -102,9 +102,7 @@ hooks.hook('page:finish', () => {
Switch language
-
-
-
+
diff --git a/packages/nc-gui/plugins/a.i18n.ts b/packages/nc-gui/plugins/a.i18n.ts
index 8653289c29..0d97b9aca1 100644
--- a/packages/nc-gui/plugins/a.i18n.ts
+++ b/packages/nc-gui/plugins/a.i18n.ts
@@ -1,7 +1,7 @@
import { defineNuxtPlugin } from 'nuxt/app'
import { createI18n } from 'vue-i18n'
import { nextTick } from 'vue'
-import type { NocoI18n } from '~/lib'
+import type { Language, NocoI18n } from '~/lib'
let globalI18n: NocoI18n
@@ -18,11 +18,15 @@ export const createI18nPlugin = async (): Promise =>
export const getI18n = () => globalI18n
-export function setI18nLanguage(i18n: NocoI18n, locale: string): void {
+export async function setI18nLanguage(locale: keyof typeof Language, i18n = globalI18n) {
+ if (!i18n.global.availableLocales.includes(locale)) {
+ await loadLocaleMessages(locale)
+ }
+
i18n.global.locale.value = locale
}
-export async function loadLocaleMessages(i18n: NocoI18n, locale: string) {
+export async function loadLocaleMessages(locale: keyof typeof Language, i18n: NocoI18n = globalI18n) {
// load locale messages with dynamic import
const messages = await import(`../lang/${locale}.json`)
diff --git a/packages/nc-gui/plugins/state.ts b/packages/nc-gui/plugins/state.ts
index 6f41aec30b..83bc44aed3 100644
--- a/packages/nc-gui/plugins/state.ts
+++ b/packages/nc-gui/plugins/state.ts
@@ -13,19 +13,18 @@ import { loadLocaleMessages, setI18nLanguage } from '~/plugins/a.i18n'
* console.log($state.lang.value) // 'en'
* ```
*/
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin(async () => {
const state = useGlobal()
const { api } = useApi()
- const i18n = nuxtApp.vueApp.i18n
-
const currentLang = state.lang.value
- await loadLocaleMessages(i18n, currentLang)
+ /** force load initial locale messages */
+ await loadLocaleMessages(currentLang)
/** set i18n locale to stored language */
- setI18nLanguage(i18n, state.lang.value)
+ await setI18nLanguage(currentLang)
try {
state.appInfo.value = await api.utils.appInfo()