Navbar I18n

File: src/@core/components/I18n.vue

---

It accepts languages prop and will update the app language according to the selected language. This component is defined in src/layouts/components/I18n.vue file.

Assume you want to change languages shown in the navbar i18n menu then you can update src/layouts/components/NavBarI18n.vue according to your needs. In below example, we will only allow english and arabic languages to be selected.

TS

<script lang="ts" setup>
import NavBarI18n from '@core/components/I18n.vue'
import type { I18nLanguage } from '@layouts/types'

const i18nCompLanguages: I18nLanguage[] = [
  {
    label: 'English',
    i18nLang: 'en',
    isRTL: false,
  },
  {
    label: 'Arabic',
    i18nLang: 'ar',
    isRTL: true,
  },
]
</script>

<template>
  <NavBarI18n :languages="i18nCompLanguages" />
</template>

JS

<script lang="ts" setup>
import NavBarI18n from '@core/components/I18n.vue'
import type { I18nLanguage } from '@layouts/types'

const i18nCompLanguages: I18nLanguage[] = [
  {
    label: 'English',
    i18nLang: 'en',
    isRTL: false,
  },
  {
    label: 'Arabic',
    i18nLang: 'ar',
    isRTL: true,
  },
]
</script>

<template>
  <NavBarI18n :languages="i18nCompLanguages" />
</template>

TIP

We auto store the i18n language in cookies for later usage.