Overview
Bimble Chat Vue provides comprehensive internationalization support with Vue I18n, enabling multi-language functionality and RTL (Right-to-Left) layout support for Arabic and Urdu languages.
10 Languages Supported
English, French, Spanish, Russian, Chinese, Japanese, Portuguese, Hindi, Arabic, and Urdu
RTL Support
Complete Right-to-Left layout support for Arabic and Urdu languages
Dynamic Switching
Real-time language switching without page reload using Vue I18n
Flag Icons
Country flag icons for easy language identification and selection
Supported Languages
The application supports 10 languages with proper locale configuration and flag representation.
I18n Configuration
The Vue I18n configuration is set up in src/utils/i18n.ts with message files organized in the locales directory.
Vue I18n Setup
import { createI18n } from 'vue-i18n';
import messages from '@/utils/locales/messages';
const i18n = createI18n({
legacy: false, // Use Composition API
locale: 'en', // Default language
fallbackLocale: 'en', // Fallback language
messages: messages, // Language messages
silentTranslationWarn: true,
silentFallbackWarn: true
});
export default i18n;Message Files Structure
import en from './en.json';
import fr from './fr.json';
// Import additional language files as they're added
const messages = {
en: en,
fr: fr,
// Add more language imports here
};
export default messages;Language File Example
{
"save": "Save",
"cancel": "Cancel",
"delete": "Delete",
"edit": "Edit",
"search": "Search",
"loading": "Loading...",
"chats": "Chats",
"calls": "Calls",
"contacts": "Contacts",
"settings": "Settings",
"profile": "Profile",
"appearance": "Appearance",
"language": "Language",
"themeMode": "Theme Mode",
"colorScheme": "Color Scheme"
}RTL (Right-to-Left) Support
Complete RTL layout support is provided for Arabic and Urdu languages using Vuetify's RTL functionality.
Layout Implementation
<template>
<!-- RTL Layout -->
<v-locale-provider v-if="settings.setRTLLayout" rtl>
<v-app :theme="settings.activeTheme">
<SidebarNav v-if="!mobile"></SidebarNav>
<v-main>
<RouterView />
</v-main>
</v-app>
</v-locale-provider>
<!-- LTR Layout -->
<v-locale-provider v-else>
<v-app :theme="settings.activeTheme">
<SidebarNav v-if="!mobile"></SidebarNav>
<v-main>
<RouterView />
</v-main>
</v-app>
</v-locale-provider>
</template>RTL Settings Toggle
<template>
<v-btn-toggle v-model="rtlLayoutModel"
color="primary"
mandatory>
<v-btn :value="false" variant="outlined">
<template #prepend>
<IconTextDirectionLtr size="21" />
</template>
{{ t('leftToRight') }}
</v-btn>
<v-btn :value="true" variant="outlined">
<template #prepend>
<IconTextDirectionRtl size="21" />
</template>
{{ t('rightToLeft') }}
</v-btn>
</v-btn-toggle>
</template>
<script setup>
// RTL layout computed property
const rtlLayoutModel = computed({
get: () => settings.setRTLLayout,
set: (value: boolean) => settings.setRTLLayout = value
})
</script>Usage in Components
Use the $t() function or useI18n composable to display translated text in your Vue components.
Template Usage
<template>
<!-- Using $t() in templates -->
<v-btn>{{ $t('save') }}</v-btn>
<h1>{{ $t('settings') }}</h1>
<p>{{ $t('welcome_message') }}</p>
<!-- With parameters -->
<p>{{ $t('user_greeting', { name: userName }) }}</p>
<!-- Navigation items -->
<v-list-item-title>{{ $t(item.title) }}</v-list-item-title>
</template>Composition API Usage
<script setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
// Using t() function
const buttonText = t('save')
const pageTitle = t('settings')
// Change language programmatically
const changeLanguage = (newLocale: string) => {
locale.value = newLocale
}
// Get current locale
const currentLanguage = locale.value
</script>Settings Store Integration
// Language switching with settings store
const settings = useSettingsStore()
const changeLanguage = (code: string) => {
locale.value = code
settings.SET_LANGUAGE(code) // Persist language preference
}How to Setup Language
Simple steps to configure and change languages in the application.
Language Files Location
Language files are located in src/utils/locales/ directory. Each language has its own JSON file.
src/utils/locales/
├── en.json (English - Default)
├── fr.json (French)
├── messages.ts (Import configuration)Change Language in Application
Users can change language through the sidebar dropdown or in Settings → Appearance.
// Using the language dropdown component
<LanguageDropdown />
// Or programmatically
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
locale.value = 'fr' // Change to FrenchUsing Translations
Use $t() in templates or t() in script to display translated text.
<template>
<h1>{{ $t('settings') }}</h1>
<v-btn>{{ $t('save') }}</v-btn>
</template>RTL Language Support
For RTL languages like Arabic or Urdu, the layout automatically switches to right-to-left direction.