Multi Language

1. Add content

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

{
    "Dashboard": "لوحة القيادة",
    "Contact":"اتصال",
    "Blog":"مدونة"
}



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

{
    "Dashboard": "儀表板",
    "Contact":"聯絡",
    "Blog":"博客"
}



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

{
    "Dashboard": "Dashboard",
    "Contact":"Contact",
    "Blog":"Blog"
}



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

{
    "Dashboard": "Tableau de bord",
    "Contact":"a lua legatura",
    "Blog":"Blog"
}



// ----------------------------------------------------
// File: src/utils/locales/messages.ts
// ----------------------------------------------------

import en from './en.json';
import fr from './fr.json';
import ar from './ar.json';
import zh from './zh.json';

const messages = {
    en: en,
    fr: fr,
    ro: ar,
    zh: zh
};

export default messages;

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 :close-on-content-click="false" location="bottom" class="language_dropdown">
        <template v-slot:activator="{ props }">
          <v-btn icon size="small" class="custom-hover-primary" v-bind="props">
            <v-avatar size="24">
                <img v-if="$i18n.locale === 'en'" :src="flag1" :alt="$i18n.locale" width="24" height="24" class="obj-cover" />
                <img v-if="$i18n.locale === 'fr'" :src="flag4" :alt="$i18n.locale" width="24" height="24" class="obj-cover" />
                <img v-if="$i18n.locale === 'ro'" :src="flag2" :alt="$i18n.locale" width="24" height="24" class="obj-cover" />
                <img v-if="$i18n.locale === 'zh'" :src="flag3" :alt="$i18n.locale" width="24" height="24" class="obj-cover" />
            </v-avatar>
          </v-btn>
        </template>
        <v-sheet rounded="md" width="200" elevation="10">
          <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"
              @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-title-medium font-weight-regular">
                    {{ item.title }}
                    <span class="text-disabled text-title-medium pl-2">({{ item.subtext }})</span>
                </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-menu>
  </template>