feat(i18n): add frontend internationalization setup

app/package.json

@@ -26,6 +26,7 @@
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",
+    "vue-i18n": "11.3.0",
     "vue-router": "^4.2.4",
     "vue-toastification": "^2.0.0-rc.5",
     "vue3-lottie": "^3.2.0",

app/src/i18n/index.ts

@@ -0,0 +1,41 @@
+import { createI18n } from 'vue-i18n'
+import en from './locales/en.json'
+import zhTW from './locales/zh-TW.json'
+
+export const supportedLocales = ['zh-TW', 'en'] as const
+
+export type SupportedLocale = (typeof supportedLocales)[number]
+
+function isSupportedLocale(locale: string): locale is SupportedLocale {
+  return supportedLocales.includes(locale as SupportedLocale)
+}
+
+function getInitialLocale(): SupportedLocale {
+  const savedLocale = localStorage.getItem('locale')
+
+  if (savedLocale && isSupportedLocale(savedLocale)) {
+    return savedLocale
+  }
+
+  return navigator.language.startsWith('zh') ? 'zh-TW' : 'en'
+}
+
+const initialLocale = getInitialLocale()
+
+document.documentElement.lang = initialLocale
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: initialLocale,
+  fallbackLocale: 'zh-TW',
+  messages: {
+    'zh-TW': zhTW,
+    en,
+  },
+})
+
+export function setLocale(locale: SupportedLocale) {
+  i18n.global.locale.value = locale
+  localStorage.setItem('locale', locale)
+  document.documentElement.lang = locale
+}

app/src/i18n/locales/en.json

@@ -0,0 +1 @@
+{}

app/src/i18n/locales/zh-TW.json

@@ -0,0 +1 @@
+{}

app/src/main.ts

@@ -1,18 +1,15 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
-import './style.css'
-/* import font awesome icon component */
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import './library'
-/* import Vue Toastification */
-import Toast, { POSITION } from 'vue-toastification'
-/* import Vue Lottie */
-import Vue3Lottie from 'vue3-lottie'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // import font awesome icon component
+import { i18n } from './i18n'
+import Toast, { POSITION } from 'vue-toastification' // import Vue Toastification
+import Vue3Lottie from 'vue3-lottie' // import Vue Lottie
 import 'vue-toastification/dist/index.css'
 import App from './App.vue'
 import router from './router'
 import formbricks from './utils/formbricks'
+import './style.css'
+import './library'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -21,6 +18,7 @@ app.component('font-awesome-icon', FontAwesomeIcon)
 
 app.use(pinia)
 app.use(router)
+app.use(i18n)
 
 router.afterEach(() => {
   if (typeof formbricks !== 'undefined') {