Multi Language

1. Add content

                        
// ----------------------------------------------------
// File: src/utils/locales/ar.json
// ----------------------------------------------------

{
    "eCommerce": "التجارة الإلكترونية",
    "Analytics": "التحليلات",
    "CRM": "إدارة علاقات العملاء",
    "Chats": "الدردشات"
}



// ----------------------------------------------------
// File: src/utils/locales/zh.json
// ----------------------------------------------------

{
    "eCommerce": "電子商務",
    "Analytics": "分析",
    "CRM": "客戶關係管理",
    "Chats": "聊天记录"
}



// ----------------------------------------------------
// File: src/utils/locales/en.json
// ----------------------------------------------------

{
    "eCommerce": "eCommerce",
    "Analytics": "Analytics",
    "CRM": "CRM",
    "Chats": "Chats"
}



// ----------------------------------------------------
// File: src/utils/locales/fr.json
// ----------------------------------------------------

{
    "eCommerce": "commerce électronique",
    "Analytics": "Analytique",
    "CRM": "GRC",
    "Chats": "Chattes"
}

2. Usage


// ----------------------------------------------------
// File: src/layouts/full/vertical-header/LanguageDD.vue
// ----------------------------------------------------

<script setup lang="ts">
import { ref } from 'vue';
import { languageDD } from '@/_mockApis/headerData';
import flag1 from '@/assets/images/flag/icon-flag-en.svg';
import flag2 from '@/assets/images/flag/icon-flag-ro.svg';
import flag3 from '@/assets/images/flag/icon-flag-zh.svg';
import flag4 from '@/assets/images/flag/icon-flag-fr.svg';
</script>
<template>
    <v-menu open-on-hover open-on-click>
        <template v-slot:activator="{ props }">
            <v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
                <v-avatar size="20">
                    <img v-if="$i18n.locale === 'en'" :src="flag1" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
                    <img v-if="$i18n.locale === 'fr'" :src="flag4" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
                    <img v-if="$i18n.locale === 'ro'" :src="flag2" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
                    <img v-if="$i18n.locale === 'zh'" :src="flag3" :alt="$i18n.locale" width="22" height="22" class="obj-cover" />
                </v-avatar>
            </v-btn>
        </template>
        <v-sheet rounded="md" width="200" elevation="1">
            <v-list class="theme-list">
                <v-list-item
                    v-for="(item, index) in languageDD"
                    :key="index"
                    color="primary"
                    :active="$i18n.locale == item.value"
                    class="d-flex align-center custom-text-primary"
                    @click="() => ($i18n.locale = item.value)"
                >
                    <template v-slot:prepend>
                        <v-avatar size="22">
                            <img :src="item.avatar" :alt="item.avatar" width="22" height="22" class="obj-cover" />
                        </v-avatar>
                    </template>
                    <v-list-item-title class="text-body-large font-weight-regular custom-title">
                        {{ item.title }}
                        <span class="text-disabled text-body-large pl-2">({{ item.subtext }})</span>
                    </v-list-item-title>
                </v-list-item>
            </v-list>
        </v-sheet>
    </v-menu>
</template>