https://github.com/efureev/fint-i18n
Localization library for Vue 3 with lazy-loading blocks, template compilation, and extensible plugins.
https://github.com/efureev/fint-i18n
i18n lazy-loading localization translation vue3
Last synced: about 6 hours ago
JSON representation
Localization library for Vue 3 with lazy-loading blocks, template compilation, and extensible plugins.
- Host: GitHub
- URL: https://github.com/efureev/fint-i18n
- Owner: efureev
- Created: 2026-04-07T17:16:36.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-28T07:20:54.000Z (about 2 months ago)
- Last Synced: 2026-04-28T09:12:05.428Z (about 2 months ago)
- Topics: i18n, lazy-loading, localization, translation, vue3
- Language: TypeScript
- Homepage: https://efureev.github.io/fint-i18n/
- Size: 130 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @feugene/fint-i18n
[](https://codecov.io/gh/efureev/fint-i18n)
[](https://badge.fury.io/js/@feugene%2Ffint-i18n)
[](https://bundlephobia.com/package/@feugene/fint-i18n)
[](https://bundlephobia.com/package/@feugene/fint-i18n)
[Русская версия (Russian version)](./README.ru.md)
Localization library for Vue 3 with lazy-loading blocks, template compilation, and extensible plugins.
## Features
- **Small surface area**: The package is split into `core`, `vue`, and `plugins` entry points.
- **Performant runtime**: Templates are compiled into functions and cached.
- **Async blocks**: Support for splitting translations into blocks and lazy-loading them.
- **Bridge Mode**: Transparent integration with `vue-i18n`.
- **Plugins**: Hook system for extending functionality (persistence, logging, etc.).
- **Simple runtime contract**: The only peer dependency is `vue`.
## Documentation
You can find detailed information about the library in the relevant sections:
- 📦 **[Installation and Getting Started](./docs/en/installation.md)**: How to install the package and configure it in a Vue application.
- 📂 **[Defining Messages](./docs/en/defining-messages.md)**: JSON formats, loaders, and dynamic merging.
- 🌐 **[Authoring localization packages](./docs/en/authoring-localization-packages.md)**: Per-locale export contract for tree-shakable donor packages.
- 🚀 **[Usage](./docs/en/usage.md)**: How to use `t()`, `$t`, and the `v-t` directive.
- 📘 **[API Reference](./docs/en/api.md)**: Detailed description of all functions, methods, and composables.
- 🔌 **[Plugins](./docs/en/plugins.md)**: Extending functionality via the hook system and built-in plugins.
- 🧱 **[Translation Blocks](./docs/en/blocks.md)**: Deep dive into the concept of blocks and memory management.
- ⚡ **[Benchmarks and Bundle Analysis](./docs/en/bundle-analysis.md)**: How to measure the hot path and analyze the `dist` composition.
---
## Quick Start
### 1. Initialization
```typescript
import { createApp } from 'vue'
import { createFintI18n } from '@feugene/fint-i18n/core'
import { installI18n } from '@feugene/fint-i18n/vue'
import { en as appEn, ru as appRu } from './i18n/messages'
import { en as granularityEn, ru as granularityRu } from '@feugene/granularity/i18n'
const i18n = createFintI18n({
locale: 'en',
fallbackLocale: 'en',
// Import only the locales the application actually ships — bundlers will
// tree-shake the rest out of the final build.
loaders: [appEn, appRu, granularityEn, granularityRu],
})
const app = createApp(App)
installI18n(app, i18n)
app.mount('#app')
```
`loaders` accepts:
- `LocaleLoaderCollection` — a single locale/block collection;
- `LocaleLoaderCollection[]` — an array of collections from multiple packages;
- for each `block`, you can pass a single loader or an array of loaders.
Rules:
- collections in `loaders: [...]` are merged **from left to right**;
- if the same `block` is found in multiple collections, loaders are combined into an array;
- loaders for a single block are executed **sequentially**;
- in case of key conflicts in messages, the **last** loader wins;
- when `loadBlock('pages.articles')` is called, it first looks for an exact block match, then the nearest parent block (`pages`).
### 2. Usage in components
```vue
import { useFintI18n, useI18nScope } from '@feugene/fint-i18n/vue'
// Connect necessary blocks (they will load automatically)
await useI18nScope(['common', 'auth'])
const { t, locale, setLocale } = useFintI18n()
const changeLanguage = async () => {
await setLocale(locale.value === 'en' ? 'ru' : 'en')
}
{{ t('common.welcome', { name: 'User' }) }}
Change Language
```