npm install vue-i18n

import { createApp } from 'vue';
import type { DefineComponent } from 'vue';

import { createPinia } from 'pinia';
import 'bootstrap/dist/css/bootstrap.min.css';
import './assets/scss/app.scss';

import App from './App.vue';

import لعربية from './core/locales/ae.json';
import 简体中文 from './core/locales/cn.json';
import Deutsch from './core/locales/de.json';
import English from './core/locales/en.json';
import Español from './core/locales/es.json';
import Français from './core/locales/fr.json';
import Português from './core/locales/pt.json';

import router from './router';

const messages = {
  English,
  Deutsch,
  Español,
  Français,
  Português,
  简体中文,
  لعربية,
};

const i18n = createI18n({
  legacy: false,
  locale: 'English',
  fallbackLocale: 'English',
  messages,
});


const app = createApp(App);

app
  .use(createPinia())
  .use(router)
  .use(i18n)

app.mount('#app');

<template>
  <div class="translate_wrapper" :class="{ active: layoutState.isLanguage }">
    <div class="current_lang" v-if="selectedLanguage">
      <div class="lang">
        <i :class="`flag-icon flag-icon-${selectedLanguage.icon}`"></i>
        <span class="lang-txt">{{ selectedLanguage.code }}</span>
      </div>
    </div>
    <div class="more_lang" :class="{ active: layoutState.isLanguage }">
      <div class="lang selected" v-for="(language, index) in languages" :key="index" @click="selectLanguage(language)">
        <i :class="`flag-icon flag-icon-${language.icon}`"></i>
        <span class="lang-txt"
          >{{ language.name }}
          <span v-if="language.country_code"> ({{ language.country_code }})</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

import { language } from '@/core/data/header';
import { useLayout } from '@/stores/layout';
import type { Language } from '@/types/header';

const layoutStore = useLayout();
const { layoutState } = storeToRefs(layoutStore);
const i18n = useI18n();

let languages = ref(language);
let selectedLanguage = ref<Language>({
  id: 1,
  name: 'English',
  code: 'en',
  icon: 'us',
  country_code: 'US',
  active: true,
});

onMounted(() => {
  const savedLang = localStorage.getItem('selectedLang');

  if (savedLang) {
    const found = languages.value.find(lang => lang.name === savedLang);
    if (found) {
      selectLanguage(found);
      return;
    }
  }

  languages.value.filter(details => {
    if (details.active) {
      selectLanguage(details);
    }
  });
});

function selectLanguage(language: Language) {
  i18n.locale.value = language.name;
  selectedLanguage.value = language;
  localStorage.setItem('selectedLang', language.name);
}
</script>

<style scoped></style>

export const language: Language[] = [
    {
        id: 1,
        name: 'English',
        code: 'en',
        icon: 'us',
        country_code: "US",
        active: true
    },
    {
        id: 2,
        name: 'Deutsch',
        code: 'de',
        icon: 'de'
    },
    {
        id: 3,
        name: 'Español',
        code: 'es',
        icon: 'es'
    },
    {
        id: 4,
        name: 'Français',
        code: 'fr',
        icon: 'fr'
    },
    {
        id: 5,
        name: 'Português',
        code: 'pt',
        icon: 'pt',
        country_code: "BR"
    },
    {
        id: 6,
        name: '简体中文',
        code: 'cn',
        icon: 'cn'
    },
    {
        id: 7,
        name: 'لعربية',
        code: 'ae',
        icon: 'ae',
        country_code: "ae"
    }
]