Internationalization

Installation and Locale Setup

To enable localization in FishtVue, you must configure it during the library installation (usually in main.ts or 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",
        // ...more keys
      },
      ru: {
        of: "из",
        items: "элементов",
        // ...more keys
      }
      // ...more locales
    }
  }
})

Required Fields in Locale Config

Types Reference

FishtVue uses several internal types for localization:

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

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

type Messages = {
  [locale in NameLocale]?: {
    of?: string
    items?: string
    // You can nest as deeply as needed
  }
}

You can provide only the messages you need — the rest will be ignored.

Using Locale Methods at Runtime

You can access and update the current locale using methods exposed by the global FishtVue instance.

Inject the instance like this:

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

const FishtVue = inject<FishtVue>(FishtVueSymbol)

console.log("Active:", FishtVue?.getActiveLocale())        // e.g., "en"
FishtVue.setActiveLocale("ru")                            // changes locale
console.log("Default:", FishtVue?.getDefaultLocale())      // e.g., "en"

Method Overview

How Components Use Translations

Every FishtVue component has access to the t() method for translating keys.

t('save') // returns "Save" or "Сохранить" depending on active locale

It looks up the current active locale and finds the translation from messages.

Notes:

• Keys can be nested: t('pagination.next')
• If the key is missing, it returns undefined
• If the translation is not a string, it’s ignored

Best Practices

• Always define at least a minimal set of messages for each language you support.
• Use consistent keys (e.g., pagination.next, buttons.save) to keep your messages structured.
• Use setActiveLocale() to change language on the fly (e.g., from a language selector).
• You can add new locale messages dynamically by updating FishtVue.config.locale.messages.

Language Switcher

For example, the Language Switcher component allows users to select their preferred language from a dropdown menu, dynamically updating the language of the UI.

<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>