fluent-vue

Internationalization plugin for Vue.js

Internationalization i18n Vue

fluent-vue/fluent-vue fluent-vue.demivan.me fluent-vue

README

Internationalization plugin for Vue.js

fluent-vue is a Vue.js integration for Fluent.js - JavaScript implementation of Mozilla's Project Fluent

🚀 Features

- Simple api for developers: Just 2 methods, 1 directive and 1 component

- Powerfull syntax for translators: Use the entire expressive power of every language without need for changes to application source code

- Isolation: Locale-specific logic doesn't leak to other locales. A simple string in English can map to a complex multi-variant translation in another language

- Seamless migration: Works for both Vue 3 and 2

- No bundler required: Usable via CDN

🎉 Example

```vue
<template>
<div>
<div>{{ $t('hello-user', { userName }) }}</div>
<div>{{ $t('shared-photos', { userName, photoCount, userGender }) }}</div>
</div>
</template>
<fluent locale="en">
# Simple things are simple.
hello-user = Hello, {$userName}!
# Complex things are possible.
shared-photos =
{$userName} {$photoCount ->
[one] added one photo
*[other] added {$photoCount} new photos
} to {$userGender ->
[male] his stream
[female] her stream
*[other] their stream
}.
</fluent>
```

📖 Documentation

Documentation can be found here: https://fluent-vue.demivan.me

Examples for different Vue.js versions and build systems can be found here.

📜 Changelog

Changes for each release are documented in the CHANGELOG.md.

📦 Packages

Project	NPM	Repo
-------	---	----
fluent-vue	[![fluent-vue](https://img.shields.io/npm/v/fluent-vue.svg)](https://www.npmjs.com/package/fluent-vue)	[fluent-vue/fluent-vue](https://github.com/fluent-vue/fluent-vue)
unplugin-fluent-vue	[![unplugin-fluent-vue](https://img.shields.io/npm/v/unplugin-fluent-vue.svg)](https://www.npmjs.com/package/unplugin-fluent-vue)	[fluent-vue/unplugin-fluent-vue](https://github.com/fluent-vue/unplugin-fluent-vue)
Webpack	[![fluent-vue-loader](https://img.shields.io/npm/v/fluent-vue-loader.svg)](https://www.npmjs.com/package/fluent-vue-loader)	[fluent-vue/fluent-vue-loader](https://github.com/fluent-vue/fluent-vue-loader)
Rollup/Vite	[![frollup-plugin-fluent-vue](https://img.shields.io/npm/v/rollup-plugin-fluent-vue.svg)](https://www.npmjs.com/package/rollup-plugin-fluent-vue)	[fluent-vue/rollup-plugin-fluent-vue](https://github.com/fluent-vue/rollup-plugin-fluent-vue)