fluent-vue

Importing .ftl files

In addition to using Vue custom blocks to define localization messages, it is possible to import them from .ftl files.

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

import enMessages from './en.ftl'

const enBundle = new FluentBundle('en')
enBundle.addResource(new FluentResource(enMessages))
1
2
3
4
5
6

You will need to configure your build system to support importing .ftl files as raw strings.

Note

You can code-split your localizations messages into multiple .ftl files. Just import .ftl file when you need and call bundle.addResource. But make sure that there are not duplicate keys in different files as localization messages added using addResource are global.

Webpack

For Webpack 5 you need to set .ftl files to be type: 'asset/source'. In earlier Webpack versions, this was done using raw-loader.

module: {
  rules: [
    ...,
    {
      test: /\.ftl$/,
      type: 'asset/source'
    }
  ]
}
1
2
3
4
5
6
7
8
9

Vite

For Vite you need to add ?raw to your .ftl file imports to import them as strings.

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

import enMessages from './en.ftl?raw'

const enBundle = new FluentBundle('en')
enBundle.addResource(new FluentResource(enMessages))
1
2
3
4
5
6