Quick Start (SolidJS)

1. Install packages

   pnpm add @fluenti/core @fluenti/solid
   pnpm add -D @fluenti/cli @fluenti/vite-plugin

2. Configure Vite

   vite.config.ts

   import { defineConfig } from 'vite'
   import solidPlugin from 'vite-plugin-solid'
   import fluenti from '@fluenti/vite-plugin'
   
   export default defineConfig({
     plugins: [
       solidPlugin(),
       fluenti({ framework: 'solid' }),
     ],
   })

3. Create fluenti.config.ts

   fluenti.config.ts

   import { defineConfig } from '@fluenti/cli'
   
   export default defineConfig({
     sourceLocale: 'en',
     locales: ['en', 'zh-CN'],
     catalogDir: './locales',
     format: 'po',
     include: ['./src/**/*.{tsx,ts}'],
     compileOutDir: './src/locales/compiled',
   })

4. Write your component — just use t “ and <Trans>

   src/Home.tsx

   import { useI18n } from '@fluenti/solid'
   import { createSignal } from 'solid-js'
   
   export function Home() {
     const { setLocale } = useI18n()
     const [name] = createSignal('World')
     const [count] = createSignal(3)
   
     // t`` tagged template — compiler macro, no import needed
     // Returns a createMemo — naturally reactive with signals
     const greeting = t`Hello, ${name}!`
   
     return (
       <div>
         <h1>{t`Welcome to my app`}</h1>
         <p>{greeting()}</p>
   
         {/* Rich text with real HTML */}
         <Trans>Read the <a href="/docs">documentation</a> to learn more.</Trans>
   
         {/* Locale-aware plurals */}
         <Plural value={count()} one="# item in cart" other="# items in cart" />
   
         <button onClick={() => setLocale('en')}>English</button>
         <button onClick={() => setLocale('zh-CN')}>中文</button>
       </div>
     )
   }

   No manual keys. No JSON files. The Vite plugin injects t`...` automatically — just use it.

5. Extract messages

   npx fluenti extract

   This scans your source files and generates catalog files in ./locales/.

6. Add translations

   Open locales/zh-CN.po and fill in msgstr fields:

   msgid "Welcome to my app"
   msgstr "欢迎使用我的应用"
   
   msgid "Hello, {name}!"
   msgstr "你好，{name}！"

7. Compile messages

   npx fluenti compile

8. Initialize from compiled output

   src/App.tsx

   import { I18nProvider } from '@fluenti/solid'
   import { Home } from './Home'
   import en from './locales/compiled/en'
   import zhCN from './locales/compiled/zh-CN'
   
   export function App() {
     return (
       <I18nProvider
         locale="en"
         fallbackLocale="en"
         messages={{ en, 'zh-CN': zhCN }}
       >
         <Home />
       </I18nProvider>
     )
   }

Key differences from Vue

• Uses <I18nProvider> instead of a plugin
• Signals (name()) instead of refs (name.value)
• JSX instead of templates — use t() directly in JSX expressions
• Naturally reactive — t() reads the locale() signal, so JSX auto-tracks it

Rich text with <Trans>

<Trans>Click <a href="/next">here</a> to continue.</Trans>
<Trans>This is <strong>important</strong> information.</Trans>

Plurals with <Plural>

<Plural value={count()} zero="No items" one="# item" other="# items" />

Next steps

• SolidJS SPA guide — deeper patterns for Solid SPAs
• SolidStart — SSR with SolidStart
• Translating Content — all translation APIs