Installation

Compatibility

fluent-vue is compatible both with Vue 2 and Vue 3.

fluent-vue requires the following Intl formatters:

  • Intl.DateTimeFormat (standard, well-supported)
  • Intl.NumberFormat (standard, well-supported)
  • Intl.PluralRules (standard, new in ECMAScript 2018)

Intl.PluralRules may already be available in some engines. Usually, however, a polyfill is required. You can use polyfill.ioopen in new window service or intl-pluralrulesopen in new window npm package for this purpose.

Install npm packages

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

yarn add fluent-vue @fluent/bundle
npm install fluent-vue @fluent/bundle

Note:

If you are using Vue version 2 you need to install @vue/composition-api

yarn add @vue/composition-api
npm install @vue/composition-api

Configure and install Vue plugin

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

import { createFluentVue } from 'fluent-vue'

import App from './App'

// Create bundles for locales that will be used
const enBundle = new FluentBundle('en')
const ukBundle = new FluentBundle('uk')

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

// Create plugin istance
// bundles - The current negotiated fallback chain of languages
const fluent = createFluentVue({
  bundles: [enBundle, ukBundle]
})

createApp(App)
  // Install Vue plugin
  .use(fluent)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import { FluentBundle, FluentResource } from '@fluent/bundle'

import { createFluentVue } from 'fluent-vue'

// Create bundles for locales that will be used
const enBundle = new FluentBundle('en')
const ukBundle = new FluentBundle('uk')

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

// Create plugin istance
// bundles - The current negotiated fallback chain of languages
const fluent = createFluentVue({
  bundles: [enBundle, ukBundle]
})

// Install Vue plugin
Vue.use(fluent)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21