Fluenti

Framework-agnostic, compile-time i18n — one codebase for Vue, React, Solid, and any framework.

~2 KB core runtime · 5-10x faster than runtime i18n · Framework-agnostic — Vue, React, Solid, Next.js, Nuxt, and more

Why compile-time?

Traditional i18n libraries parse messages at runtime — adding bundle weight and slowing every render. Compile-time i18n resolves translations at build time, shipping plain strings and pre-compiled functions. Source text is used as the message key — no more maintaining separate ID maps.

	Compile-time (Fluenti)	Runtime (react-i18next, vue-i18n, next-intl)
Runtime size	~2 KB gzipped	12–14 KB gzipped
Message parsing	Build time (zero at runtime)	Every render
Speed	5-10x faster; 40x on complex ICU	Baseline
Code splitting	Per-locale, automatic	Manual or none
Multi-framework	One codebase, consistent API	One framework each
Natural keys	Source text = key	Separate ID maps

Features

• Framework-agnostic core — @fluenti/core works with any framework; first-class integrations for Vue, React, Solid, Next.js, Nuxt, React Router, TanStack Start, and SolidStart
• Compile-time transforms — messages compiled at build time, zero runtime parsing overhead
• ICU MessageFormat — plurals, selects, nested arguments, custom formatters
• Vue v-t directive — compile-time template transform, not a runtime directive
• <Trans>, <Plural>, <Select> components — consistent API across Vue, React, and Solid
• Code splitting — lazy-load translations per locale (dynamic, static, or off)
• SSR-safe — locale detection via cookie, query, path, or headers; hydration script helper
• PO + JSON catalogs — gettext-compatible workflow with JSON alternative
• Date / number formatting — thin wrappers around Intl APIs with built-in presets
• Plugin system — extend extract/compile pipeline with custom hooks
• msg descriptors — lazy message constants for use outside components

Quick Start

Vue

<script setup>
import { t } from '@fluenti/vue'
const count = 3
</script>

<template>
  <h1 v-t>Hello, world!</h1>
  <p>{{ t`You have ${count} items` }}</p>
</template>

React

import { t } from '@fluenti/react'

function App() {
  const count = 3
  return (
    <>
      <h1>{t`Hello, world!`}</h1>
      <p>{t`You have ${count} items`}</p>
    </>
  )
}

Solid

import { t } from '@fluenti/solid'

function App() {
  const count = 3
  return (
    <>
      <h1>{t`Hello, world!`}</h1>
      <p>{t`You have ${count} items`}</p>
    </>
  )
}

Same API. Same message catalogs. Different frameworks.

Workflow

# 1. Extract messages from source files
fluenti extract --format po

# 2. Translate — edit locales/ja.po, locales/zh-CN.po

# 3. Compile catalogs to optimized JS modules
fluenti compile

The Vite plugin loads compiled catalogs automatically — no manual wiring needed.

Install

# Vue
pnpm add @fluenti/core @fluenti/vue @fluenti/vite-plugin

# React
pnpm add @fluenti/core @fluenti/react @fluenti/vite-plugin

# SolidJS
pnpm add @fluenti/core @fluenti/solid @fluenti/vite-plugin

# Next.js
pnpm add @fluenti/core @fluenti/react @fluenti/next

# Nuxt
pnpm add @fluenti/nuxt @fluenti/core @fluenti/vue

# CLI (message extraction & compilation)
pnpm add -D @fluenti/cli

# vue-i18n migration bridge (optional)
pnpm add @fluenti/vue-i18n-compat

Packages

Package	Description
@fluenti/core	Framework-agnostic core — ICU parser, compiler, interpolation, formatters. Extend to any framework.
@fluenti/vue	Vue 3 — v-t directive, <Trans>, useI18n() composable
@fluenti/react	React — I18nProvider, <Trans>, <Plural>, <Select>, useI18n() hook
@fluenti/solid	SolidJS — <Trans>, I18nProvider, useI18n()
@fluenti/next	Next.js — withFluenti(), RSC support, streaming SSR
@fluenti/nuxt	Nuxt — locale-prefixed routing, SEO helpers, auto locale detection
@fluenti/cli	Message extraction (Vue SFC, TSX), PO/JSON compilation, AI translation
@fluenti/vite-plugin	Vite build-time transforms, virtual modules, code splitting
@fluenti/vue-i18n-compat	Progressive migration bridge between vue-i18n and Fluenti

Documentation

Full documentation — guides, API reference, and examples — is available at fluenti.dev.

• Getting Started
• Vue Quick Start
• React Quick Start
• SolidJS Quick Start
• Next.js Quick Start
• Nuxt Quick Start
• Code Splitting
• SSR Guide
• Framework Comparison
• vue-i18n Migration

License

MIT - Fluenti Contributors