Multi Language

1. Add content

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

{
  "Modern": "عصري",
  "Contacts":"جهات الاتصال",
  "Chats":"الدردشات"
}



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

{
  "Modern": "Modern",
  "Contacts":"Contacts",
  "Chats":"Chats"
}



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

{
  "Modern": "現代的",
  "Contacts":"聯繫人",
  "Chats":"聊天記錄"
}



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

{
  "Modern": "Moderne",
  "Contacts":"Les contacts",
  "Chats":"Chattes"
}

2. Usage

                                    

// ----------------------------------------------------
// File: src/components/layout/full/vertical-header/languageDD.vue
// ---------------------------------------------------- 

<script setup lang="ts">
import {  computed } from "vue";
import { languageDD } from "@/_mockApis/headerData";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/shadcn/ui/dropdown-menu";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();

const currentLang = computed(() => {
   languageDD.find((lang) => lang.value === locale.value) ?? languageDD[0];
});


</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button
        variant="ghost"
        size="icon"
        class="h-10 w-10 text-muted hover:bg-lightprimary hover:text-primary dark:hover:bg-lightprimary dark:hover:text-primary rounded-full transition"
      >
        <img
          :src="currentLang?.avatar"
          :alt="locale"
          class="w-6 h-6 object-cover rounded-full"
        />
      </Button>
    </DropdownMenuTrigger>

    <DropdownMenuContent class="w-52 p-4 shadow-md rounded-md bg-card border-0">
      <DropdownMenuItem
        v-for="(item, index) in languageDD"
        :key="index"
        @click="locale = item.value"
        class="flex items-center gap-3 px-2 py-2 rounded-md cursor-pointer hover:bg-muted transition rtl:flex-row-reverse rtl:text-end"
      >
        <img
          :src="item.avatar"
          alt="flag"
          class="w-5 h-5 object-cover rounded-full"
        />
        <span
        >
        class="text-sm text-muted dark:text-darklink group-hover:!text-primary dark:group-hover:!text-primary font-medium leading-[25px]"
          {{ item.title }} ({{ item.subtext }})
        </span>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>