fluent-vue - Internationalization plugin for Vue.js (original) (raw)

js

// vite.config.js
import { defineConfig } from 'vite'
import {
  ExternalFluentPlugin,
  SFCFluentPlugin,
} from 'unplugin-fluent-vue/vite'

export default defineConfig({
  plugins: [
    vue(),
    // define messages in SFCs
    SFCFluentPlugin({
      blockType: 'fluent', // default 'fluent' - name of the block in SFCs
      checkSyntax: true, // default true - whether to check syntax of the messages
    }),
    // define messages in external ftl files
    ExternalFluentPlugin({
      locales: ['en', 'da'], // required - list of locales
      checkSyntax: true, // default true - whether to check syntax of the messages

      baseDir: path.resolve('src'), // base directory for Vue files
      ftlDir: path.resolve('src/locales'), // directory with ftl files

      // Instead of using baseDir and ftlDir you can use this function to define path to ftl file for given locale and Vue file.
      getFtlPath(locale, vuePath) {
        return path.join(options.ftlDir, locale, `${path.relative(options.baseDir, vuePath)}.ftl`)
      },
    }),
  ],
})