Awesome
unplugin-fluent-vue
<p align="center"> <a href="https://github.com/fluent-vue/unplugin-fluent-vue/actions"> <img src="https://img.shields.io/github/actions/workflow/status/fluent-vue/unplugin-fluent-vue/test.yml?branch=main" alt="GitHub Workflow Status"> </a> <a href="https://codecov.io/gh/fluent-vue/unplugin-fluent-vue"> <img src="https://codecov.io/gh/fluent-vue/unplugin-fluent-vue/branch/main/graph/badge.svg?token=0JSSE94EGJ" alt="codecov"> </a> <a href="https://standardjs.com"> <img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="Standard - JavaScript Style Guide"> </a> <a href="https://github.com/fluent-vue/unplugin-fluent-vue/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/fluent-vue/unplugin-fluent-vue" alt="GitHub license"> </a> </p>fluent-vue plugin for Vite, Webpack and Rollup (thanks to unplugin).
It adds support for defining Fluent messages in Vue SFCs and external ftl files.
Installation
npm install unplugin-fluent-vue --save-dev
Usage
Vite
// vite.config.js
import {
ExternalFluentPlugin,
SFCFluentPlugin,
} from 'unplugin-fluent-vue/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue(),
// Choose one of the following:
SFCFluentPlugin({ // define messages in SFCs
blockType: 'fluent', // default 'fluent' - name of the block in SFCs
checkSyntax: true, // default true - whether to check syntax of the messages
}),
ExternalFluentPlugin({ // define messages in external ftl files
baseDir: path.resolve('src'), // required - base directory for Vue files
ftlDir: path.resolve('src/locales'), // required - directory with ftl files
locales: ['en', 'da'], // required - list of locales
checkSyntax: true, // default true - whether to check syntax of the messages
}),
],
})
Docs: https://fluent-vue.demivan.me/integrations/unplugin.html