Introduction

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

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 Guide to learn more about the syntax.

fluent-vue API is inspired by vue-i18n. But API surface is much smaller as most things are handled by Fluent syntax. It has just two methods, one component and one directive.

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 ->
     [1] added one photo
    *[other] added {$photoCount} new photos
  } to {$userGender ->
     [male] his stream
     [female] her stream
    *[other] their stream
  }.
</fluent>

Example

Hello, ⁨John Doe⁩!

⁨John Doe⁩ ⁨added ⁨2⁩ new photos⁩ to ⁨his stream⁩.

$userName

malefemaleunspecified$userGender

$photoCount