fluent-vue

Internationalization plugin for Vue.js

Get Started

Simple api

Just 2 methods, 1 directive and 1 component is all you need to internationalize your app.

Vue 2 and 3 compatible

By utilising @vue/composition-api library, fluent-vue is made compatible both with Vue version 2 and version 3.

SFC support

With fluent-vue-loader you can include localization messages with rest of your single file component code.

Easy to read

Fluent syntax used for describing translation is easy to read and understand.

Powerful

Fluent syntax allows to represent complex concepts of natural languages.

Asymmetric localization

Natural-sounding translations with genders and grammatical cases only when necessary.

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