Интернационализация

Установка и настройка локали

Чтобы включить локализацию в FishtVue, вы должны настроить ее во время установки библиотеки (обычно в main.ts или main.js):

import FishtVue from 'fishtvue/config'

app.use(FishtVue, {
    locale: {
        defaultLocale: 'en',
        activeLocale: 'en',
        locales: [
            {name: 'English', code: 'en'},
            {name: 'Русский', code: 'ru'}
        ],
        messages: {
            en: {
                of: "of",
                items: "items",
                // ...другие ключи
            },
            ru: {
                of: "из",
                items: "элементов",
                // ...другие ключи
            }
            // ...другие локали
        }
    }
})

Обязательные поля в конфигурации локали

Справочник типов

FishtVue использует несколько внутренних типов для локализации:

type NameLocale = string | "en" | "ru"

type Locale = {
    name?: string
    code?: NameLocale
}

type Messages = {
    [locale in NameLocale]?: {
        of?: string
        items?: string
        // Вы можете вкладывать так глубоко, как необходимо
    }
}

Вы можете предоставить только те сообщения, которые вам нужны — остальные будут проигнорированы.

Использование методов локали во время выполнения

Вы можете получить доступ и обновить текущую локаль, используя методы, предоставляемые глобальным экземпляром FishtVue.

Внедрите экземпляр следующим образом:

import {inject} from 'vue'
import {FishtVueSymbol, type FishtVue} from 'fishtvue/config'

const FishtVue = inject<FishtVue>(FishtVueSymbol)

console.log("Активная:", FishtVue?.getActiveLocale())        // например, "en"
FishtVue.setActiveLocale("ru")                            // изменяет локаль
console.log("По умолчанию:", FishtVue?.getDefaultLocale())      // например, "en"

Обзор методов

Как компоненты используют переводы

Каждый компонент FishtVue имеет доступ к методу t() для перевода ключей.

t('save') // возвращает "Save" или "Сохранить" в зависимости от активной локали

Он ищет текущую активную локаль и находит перевод из messages.

Примечания:

• Ключи могут быть вложенными: t('pagination.next')
• Если ключ отсутствует, возвращается undefined
• Если перевод не является строкой, он игнорируется

Лучшие практики

• Всегда определяйте хотя бы минимальный набор сообщений для каждого языка, который вы поддерживаете.
• Используйте согласованные ключи (например, pagination.next, buttons.save), чтобы поддерживать структурированность ваших сообщений.
• Используйте setActiveLocale() для изменения языка на лету (например, из селектора языка).
• Вы можете динамически добавлять новые сообщения локали, обновляя FishtVue.config.locale.messages.

Переключатель языка

Например, компонент Переключатель языка позволяет пользователям выбирать предпочитаемый язык из выпадающего меню, динамически обновляя язык интерфейса.

<template>
  <select v-model="lang" @change="changeLang">
    <option value="en">English</option>
    <option value="ru">Русский</option>
  </select>
</template>

<script setup lang="ts">
  import {inject, ref} from 'vue'
  import {FishtVueSymbol} from 'fishtvue/config'

  const lang = ref('en')
  const FishtVue = inject(FishtVueSymbol)

  function changeLang() {
    FishtVue?.setActiveLocale(lang.value)
  }
</script>