VueCraft NPM

Активная локаль ​

useLocale() возвращает текущую локаль, функцию переключения, флаг загрузки и метаданные активной локали.

ts
import { useLocale } from 'vue-i18n-kit'

const { locale, setLocale, isLoading, localeMeta } = useLocale()

Возвращаемое значение ​

locale ​

Ref<string> — код текущей активной локали (реактивный).

setLocale ​

(lang: string) => Promise<void> — переключиться на другую локаль. Ленивая загрузка JSON при необходимости, затем обновляет locale. Бросает исключение, если lang не зарегистрирован.

isLoading ​

Ref<boolean> — true, пока идёт загрузка JSON локали.

localeMeta ​

ComputedRef<Record<string, unknown> | undefined> — метаданные активной локали из её LocaleDefinition.meta. Обновляются реактивно при переключении локали.

Передайте generic-тип, чтобы получить типизированный localeMeta без ручного приведения типов:

ts
interface AppLocaleMeta {
  display: string
  flag: string
  author?: string
}

const { localeMeta } = useLocale<AppLocaleMeta>()
localeMeta.value?.display // string | undefined — полностью типизировано

Пример — переключатель локали ​

vue
<script setup lang="ts">
import { useLocale, useAvailableLocales } from 'vue-i18n-kit'

const { locale, setLocale, isLoading, localeMeta } = useLocale()
const { availableLocales } = useAvailableLocales()

async function handleChange(code: string) {
  try {
    await setLocale(code)
  } catch (err) {
    console.error('Failed to load locale:', err)
  }
}
</script>

<template>
  <span>{{ localeMeta?.flag }} {{ localeMeta?.display ?? locale }}</span>

  <select :value="locale" @change="handleChange(($event.target as HTMLSelectElement).value)">
    <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
      {{ loc.meta?.flag }} {{ loc.meta?.display ?? loc.code }}
    </option>
  </select>

  <span v-if="isLoading">Loading…</span>
</template>