erickwilder / fluent-vue

Project fluent integration with Vue.js

fluent-vue

Vue.js integration for Project Fluent.

Project is in beta state. I don't recommend using it in production just yet, but would greatly appreciate any feedback.

• Features
  • $t method - simple way of adding translations
  • $ta method - gets all attributes for translation key
  • v-t directive - binds all whitelisted attributes
  • i18n component - allows using components inside translations
• Instalation

Features

$t method - simple way of adding translations

Resources:

aria-key = Aria value
greeting = Hello, {$name}

Template:

<div :aria-label="$t('aria-key')">{{ $t('greeting', { name: 'World' }) }}</div>

Result:

<div aria-label="Aria value">Hello, ⁨World⁩</div>

$ta method - gets all attributes for translation key

Useful for binding translations to custom components

Resources:

greeting = Hello, {$name}
  .aria-label = Label value

Template:

<div v-bind="$ta('greeting')">{{ $t('greeting', { name: 'World' }) }}</div>

Result:

<div aria-label="Aria value">Hello, ⁨World⁩</div>

v-t directive - binds all whitelisted attributes

Resources:

greeting = Hello, {$name}
  .aria-label = Label value

Template:

<div v:greeting="{ name: 'World' }"></div>

Result:

<div aria-label="Label value">Hello, ⁨World⁩</div>

i18n component - allows using components inside translations

Resources:

greeting = Hello, {$name}

Template:

<i18n path="greeting" tag="div">
  <template #name>
    <b>World</b>
  </template>
</i18n>

Result:

<div>Hello, ⁨<b>World</b>⁩</div>

Instalation

Add fluent-vue and @fluent/bundle to your project:

For npm users:

npm install fluent-vue @fluent/bundle

For yarn users:

yarn add fluent-vue @fluent/bundle

Install Vue plugin

import Vue from 'vue';
import FluentVue from 'fluent-vue';

Vue.use(FluentVue)

Configure fluent-vue

import { FluentBundle, FluentResource } from '@fluent/bundle';

// Create bundle
const bundle = new FluentBundle({
  locales: 'en'
})

// Add resources to the bundle 
bundle.addResource(new FluentResource('key = World'))
bundle.addResource(new FluentResource('another-key = Hello, {$name}'))

// Create `FluentVue` instance with options
const fluent = new FluentVue({
  bundles: [bundle]
})

// Add `fluent` option to your Vue instance
new Vue({
  el: "#root",
  fluent,
  render: h => h(App)
})