unplugin-fluent

Use all the power of the fluent project with your favorite bundler/compiler 🌊

Transform your fluent files into compiled fluent resources

Usage

Import your .ftl files, that's all!!!

import enUs from './locales/en-us.ftl'
import esMx from './locales/es-mx.ftl'

// create your bundles
const bundle = new FluentBundle('en-US', { useIsolating: false })
const bundle = new FluentBundle('es-MX', { useIsolating: false })

Install

npm i -D @fluent/bundle unplugin-fluent

pnpm add -D @fluent/bundle unplugin-fluent

Vite

// vite.config.ts
import fluent from 'unplugin-fluent/vite'

export default defineConfig({
  plugins: [
    fluent({ /* options */ }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import fluent from 'unplugin-fluent/rollup'

export default {
  plugins: [
    fluent({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-fluent/webpack')({ /* options */ })
  ]
}

Nuxt

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['unplugin-fluent/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-fluent/webpack')({ /* options */ }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import fluent from 'unplugin-fluent/esbuild'

build({
  plugins: [fluent()],
})

Note: Unplugin fluent compiles your fluent files into FluentResources, sometimes this behavior can increase ypur bundle size in favor of performance