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.io service or intl-pluralrules npm package for this purpose.

Install npm packages

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

pnpm add fluent-vue @fluent/bundle

yarn add fluent-vue @fluent/bundle

npm install fluent-vue @fluent/bundle

Note:

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

pnpm add @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)

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)