⛴ i18n migration

utils/config/i18n.ts → i18n.config.ts

@@ -1,9 +1,7 @@
 import MarkdownIt from 'markdown-it'
-import type { LocaleMessages, VueMessageType } from '#i18n'
-import { defineI18nConfig } from '#i18n'
-import commonData from '@/locales/all_lang.json'
+import commonData from '@/i18n/locales/all_lang.json'
 
-const locales = import.meta.glob('../../locales/*.json', { eager: true })
+const locales = import.meta.glob('./i18n/locales/*.json', { eager: true })
 export const langsFlags = [
   {
     value: 'en',
@@ -43,7 +41,7 @@ const md = MarkdownIt({
   breaks: false,
 })
 function getMessages() {
-  const messages: { [x: string]: LocaleMessages<VueMessageType> } = {}
+  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) {
@@ -58,6 +56,16 @@ function getMessages() {
 }
 
 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,
@@ -66,6 +74,4 @@ export default defineI18nConfig(() => ({
     common: str => str.split('.').reduce((o, i) => o[i], commonData),
   },
   messages: getMessages(),
-  warnHtmlInMessage: false,
-  warnHtmlMessage: false,
 }))

nuxt.config.ts

@@ -316,16 +316,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

@@ -120,7 +120,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",

script/checkLocale.mjs

@@ -26,7 +26,7 @@ argArr.forEach((arg) => {
 
 const CONSTANTS = {
   BASE_LOCALE: args.baseLocale,
-  LOCALE_DIR: 'locales',
+  LOCALE_DIR: 'i18n/locales',
   LOCALES: args.locales,
 }
 

script/orderLocale.mjs

@@ -39,7 +39,7 @@ const orderJsonByKeys = (json) => {
 // Project locale directory.
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
-const localeDir = path.join(__dirname, '..', 'locales')
+const localeDir = path.join(__dirname, '..', 'i18n/locales')
 
 // Get all language paths to re-order.
 const languages = getDirectoryFiles(localeDir, []).filter(file => file.endsWith('.json'))