Introduction

fluent-vue is an internationalization plugin for Vue.jsopen in new window. It's a Vue.js integration for Fluent.jsopen in new window - JavaScript implementation of Mozilla's Project Fluentopen in new window.

fluent-vue API is inspired by vue-i18nopen in new window. But API surface is much smaller as most things are handled by Fluent syntax.

Fluent keeps simple things simple and makes complex things possible. The syntax used for describing translations is easy to read and understand. At the same time, it allows, when necessary, to represent complex concepts from natural languages like gender, plurals, conjugations, and others. Check the Fluent syntax page or the official Fluent Syntax Guideopen in new window to learn more about the syntax.

Example

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Hello, ⁨John Doe⁩!
⁨John Doe⁩ ⁨added ⁨2⁩ new photos⁩ to ⁨his stream⁩.
male