fluent-vue

The fluent-vue preset supports fluent-vue, the Vue binding of Project Fluent.

Detection

The preset applies when the project depends on fluent-vue, fluent-vue-loader, rollup-plugin-fluent-vue or unplugin-fluent-vue.

import { fluentVue } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: [fluentVue()],
})

Locale files

If your config has no resources, the preset uses locales/{locale}.ftl and src/locales/{locale}.ftl. The ftl format reads and writes these files.

The preset also adds a locale finder for <fluent locale="..."> blocks in .vue files. Each block is a resource of its locale, and edits from x18n write back into the block:

<template>
  <p>{{ $t('hello', { name }) }}</p>
</template>

<fluent locale="en">
local = Local
</fluent>

The ftl format reads a message attribute as a key of its own: .title on the message login is the key login.title.

Supported syntax

These names count as translate calls: $t, $ta, fluent.format, fluent.formatAttrs, this.$t and this.$ta. useFluent() returns $t, $ta, format and formatAttrs.

In Vue templates, the preset also reads the v-t directive and the <i18n> component:

<template>
  <p v-t:hello />
  <i18n path="welcome" />
</template>

Placeholders

Fluent variables: { $name }. For hello = Hello { $name } in en and hello = Hallo in de, the placeholder-mismatch check reports hello.

Extraction templates