⬆️ i18n version

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -53,7 +53,7 @@
               :data-testid="`sidebar-language-${lang.value}`"
               :value="lang.value"
               :class="{ 'is-active': $i18n.locale === lang.value }"
-              @click="setUserLocale(lang.value)"
+              @click="usePreferencesStore().setUserLocale(lang.value)"
             >
               <span>{{ lang.flag }} {{ lang.label }}</span>
             </NeoDropdownItem>
@@ -81,7 +81,6 @@
 <script setup lang="ts">
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
 import type { Prefix } from '@kodadot1/static'
-import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 import { transferVisible, teleportVisible, swapVisible } from '@/utils/config/permission.config'
 
 const { urlPrefix } = usePrefix()

components/navbar/MobileLanguageOption.vue

@@ -14,13 +14,11 @@
 </template>
 
 <script lang="ts" setup>
-import { langsFlags, setUserLocale } from '@/utils/config/i18n'
-
 const { $i18n } = useNuxtApp()
 const emit = defineEmits(['select'])
 
 const setUserLang = (value: string) => {
-  setUserLocale(value)
+  usePreferencesStore().setUserLocale(value)
   emit('select')
 }
 </script>

components/navbar/ProfileDropdown.vue

@@ -77,7 +77,7 @@
         aria-role="listitem"
         :value="lang.value"
         :class="{ 'is-active': $i18n.locale === lang.value }"
-        @click="setUserLocale(lang.value)"
+        @click="usePreferencesStore().setUserLocale(lang.value)"
       >
         <span>{{ lang.flag }} {{ lang.label }}</span>
       </NeoDropdownItem>
@@ -87,14 +87,12 @@
 
 <script lang="ts" setup>
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
+
 import { useIdentityStore } from '@/stores/identity'
-import {
-  langsFlags as langsFlagsList,
-  setUserLocale,
-} from '@/utils/config/i18n'
+import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
+
 import { openConnectWalletModal } from '@/components/common/ConnectWallet/useConnectWallet'
 import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
-import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
 
 const identityStore = useIdentityStore()
 const { isDarkMode } = useTheme()
@@ -106,7 +104,6 @@ const account = computed(() => identityStore.getAuthAddress)
 const profileIcon = computed(() =>
   isDarkMode.value ? '/profile-dark.svg' : '/profile.svg',
 )
-const langsFlags = computed(() => langsFlagsList)
 
 const toggleWalletConnectModal = () => {
   useProfileOnboardingStore().setSidebarToggled()

declaration.d.ts

@@ -0,0 +1,9 @@
+import type {
+  ComponentCustomOptions as _ComponentCustomOptions,
+  ComponentCustomProperties as _ComponentCustomProperties,
+} from 'vue'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties extends _ComponentCustomProperties {}
+  interface ComponentCustomOptions extends _ComponentCustomOptions {}
+}

i18n.config.ts

@@ -0,0 +1,42 @@
+import MarkdownIt from 'markdown-it'
+import commonData from '@/i18n/locales/all_lang.json'
+
+const locales = import.meta.glob('./i18n/locales/*.json', { eager: true })
+const md = MarkdownIt({
+  breaks: false,
+})
+function getMessages() {
+  const messages: { [x: string]: string } = {}
+  for (const [key, value] of Object.entries(locales)) {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      if (locale === 'all_lang') {
+        continue
+      }
+      messages[locale] = value.default
+    }
+  }
+  return messages
+}
+
+export default defineI18nConfig(() => ({
+  skipSettingLocaleOnNavigate: true,
+  warnHtmlMessage: false,
+  defaultLocale: 'en',
+  detectBrowserLanguage: {
+    useCookie: true,
+    cookieKey: 'lang',
+    fallbackLocale: 'en',
+    alwaysRedirect: true,
+  },
+  strategy: 'no_prefix',
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  silentTranslationWarn: true,
+  modifiers: {
+    md: str => md.renderInline(str),
+    common: str => str.split('.').reduce((o, i) => o[i], commonData),
+  },
+  messages: getMessages(),
+}))

nuxt.config.ts

@@ -315,16 +315,10 @@ export default defineNuxtConfig({
   pwa,
 
   i18n: {
-    skipSettingLocaleOnNavigate: true,
-    defaultLocale: 'en',
-    detectBrowserLanguage: {
-      useCookie: true,
-      cookieKey: 'lang',
-      fallbackLocale: 'en',
-      alwaysRedirect: true,
+    compilation: {
+      strictMessage: false,
     },
-    strategy: 'no_prefix',
-    vueI18n: './utils/config/i18n.ts',
+    vueI18n: './i18n.config.ts',
   },
 
   apollo: {

package.json

@@ -121,7 +121,7 @@
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/device": "^3.2.2",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/i18n": "^8.5.3",
+    "@nuxtjs/i18n": "^9.1.1",
     "@nuxtjs/sitemap": "^5.3.5",
     "@playwright/test": "^1.47.1",
     "@types/jest": "^27.5.2",