- Add comprehensive locale management with `useLocale` composable - Implement dynamic locale loading and persistent storage - Create type-safe internationalization infrastructure - Add flag emojis and locale selection utilities - Expand English locale with more comprehensive message schemas
43 lines
No EOL
1 KiB
TypeScript
43 lines
No EOL
1 KiB
TypeScript
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import type { AvailableLocale } from '@/i18n'
|
|
import { AVAILABLE_LOCALES, changeLocale, isAvailableLocale } from '@/i18n'
|
|
|
|
export function useLocale() {
|
|
const { locale, t } = useI18n()
|
|
|
|
const currentLocale = computed(() => locale.value as AvailableLocale)
|
|
|
|
const locales = computed(() =>
|
|
AVAILABLE_LOCALES.map(code => ({
|
|
code,
|
|
name: t(`locales.${code}`),
|
|
flag: getFlagEmoji(code)
|
|
}))
|
|
)
|
|
|
|
async function setLocale(newLocale: string) {
|
|
if (isAvailableLocale(newLocale)) {
|
|
await changeLocale(newLocale)
|
|
}
|
|
}
|
|
|
|
// Helper function to get flag emoji from locale code
|
|
function getFlagEmoji(locale: string): string {
|
|
const flagMap: Record<string, string> = {
|
|
'en': '🇬🇧',
|
|
'es': '🇪🇸',
|
|
'fr': '🇫🇷',
|
|
'de': '🇩🇪',
|
|
'zh': '🇨🇳'
|
|
}
|
|
return flagMap[locale] || '🌐'
|
|
}
|
|
|
|
return {
|
|
currentLocale,
|
|
locales,
|
|
setLocale,
|
|
isAvailableLocale
|
|
}
|
|
}
|