https://github.com/fluent-vue/fluent-vue

Internationalization plugin for Vue.js
https://github.com/fluent-vue/fluent-vue

ftl hacktoberfest i18n internationalization internationalization-plugin javascript localization translation vue vue2 vue3 vuejs

Last synced: 16 days ago
JSON representation

Internationalization plugin for Vue.js

• Host: GitHub
• URL: https://github.com/fluent-vue/fluent-vue
• Owner: fluent-vue
• License: mit
• Created: 2019-07-03T05:35:20.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-05-28T13:54:03.000Z (6 months ago)
• Last Synced: 2024-05-29T01:42:36.413Z (6 months ago)
• Topics: ftl, hacktoberfest, i18n, internationalization, internationalization-plugin, javascript, localization, translation, vue, vue2, vue3, vuejs
• Language: TypeScript
• Homepage: https://fluent-vue.demivan.me
• Size: 7.35 MB
• Stars: 235
• Watchers: 5
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://vshymanskyy.github.io/StandWithUkraine)



  





  Internationalization plugin for Vue.js





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



`fluent-vue` is a [Vue.js](https://vuejs.org) integration for [Fluent.js](https://github.com/projectfluent/fluent.js) - JavaScript implementation of Mozilla's [Project Fluent](https://projectfluent.org)

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

  


    
{{ $t('hello-user', { userName }) }}

    
{{ $t('shared-photos', { userName, photoCount, userGender }) }}

  


# 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

  }.

```

## 📖 Documentation

Documentation can be found here: [https://fluent-vue.demivan.me](https://fluent-vue.demivan.me)

Examples for different Vue.js versions and build systems can be found [here](https://github.com/fluent-vue/examples).

## 📜 Changelog

Changes for each release are documented in the [CHANGELOG.md](https://github.com/demivan/fluent-vue/blob/main/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)

## 📄 License

[MIT License](https://github.com/fluent-vue/fluent-vue/blob/main/LICENSE) © 2020 [Ivan Demchuk](https://github.com/demivan)