Translating Content

Fluenti offers three ways to translate content, all processed at compile time for zero runtime parsing overhead.

v-t Directive

The v-t directive is the primary API for translating Vue template content. It’s a compile-time nodeTransform, not a runtime directive.

Plain Text

<h1 v-t>Welcome to Fluenti</h1>

Transformed at build time into:

<h1>{{ $t('Welcome to Fluenti') }}</h1>

Variable Interpolation

Vue template expressions inside v-t elements are extracted as ICU variables:

<p v-t>Hello {{ name }}, welcome back!</p>
<p v-t>{{ greeting }} {{ name }}, you have {{ count }} items</p>

Explicit IDs

Use the argument syntax to set a custom message ID:

<p v-t:nav.home>Home</p>
<p v-t:app.checkout.title>Checkout</p>

Output: <p>{{ $t('nav.home') }}</p>

Pluralization

Use the .plural modifier with pipe-separated forms:

<p v-t.plural="count">no items | one item | {{ count }} items</p>

This extracts an ICU plural message: {count, plural, one {one item} other {{count} items}}

Rich Text

Child HTML elements are preserved:

<p v-t>Read the <a href="/terms">terms</a> and <strong>conditions</strong></p>

Attribute Translation

Use modifiers to translate element attributes:

<img v-t.alt src="/hero.jpg" alt="Welcome banner image" />
<input v-t.placeholder placeholder="Search products..." />
<a v-t v-t.title href="/terms" title="Read our terms">Terms of Service</a>

How It Works

The v-t directive is processed at compile time by the Vite plugin’s nodeTransform. It never reaches the browser — it’s converted to $t() calls during the build. See How It Works for the full compilation pipeline.

t() Function

The t() function is a compile-time macro for use in <script setup> and template expressions.

Basic Usage

<script setup>
import { useI18n } from '@fluenti/vue'
const { t } = useI18n()
</script>

<template>
  <p>{{ t('Welcome to Fluenti') }}</p>
  <p>{{ t('Hello, {name}!', { name: userName }) }}</p>
</template>

In SolidJS:

const { t } = useI18n()
return <p>{t('Welcome to Fluenti')}</p>

Compile-Time Transform

The Vite plugin transforms t() calls at build time:

// Input
const greeting = t('Hello, {name}!', { name })

// Output (Vue)
const greeting = __i18n.t('_hash123', { name: unref(name) })

// Output (Solid)
const greeting = __i18n.t('_hash123', { name: name() })

When to Use t() vs v-t

Feature	t()	v-t
Where	Script + template expressions	Template elements only
Interpolation	Via values object	Via {{ variable }}
Rich text	Via <Trans :message="t(...)">	Automatic child extraction
Explicit ID	t('id') (source text = key)	v-t:explicit.id

Tagged Templates

The t tagged template is a compiler macro for reactive translations in <script setup>. You never import it — the Vite plugin injects the necessary imports automatically.

Basic Usage

<script setup>
const pageTitle = t`Welcome to Fluenti`
const greeting = t`Hello ${name}, you have ${count} items`
</script>

<template>
  <h1>{{ pageTitle }}</h1>
  <p>{{ greeting }}</p>
</template>

Compile-Time Transform

// Input
const greeting = t`Hello ${name}`

// Output (Vue)
const greeting = computed(() => __i18n.t('Hello {name}', { name: unref(name) }))

// Output (Solid)
const greeting = createMemo(() => __i18n.t('Hello {name}', { name: name() }))

Variable Naming

Expression	ICU Placeholder	Value
${name}	{name}	unref(name)
${user.name}	{name}	unref(user.name)
${user.profile.displayName}	{displayName}	unref(user.profile.displayName)
${getName()}	{0}	getName()
${a + b}	{0}	a + b

Rules: Simple identifier uses the name as placeholder. Property access uses the last segment. Everything else gets positional {0}, {1}, etc.

Reactivity

• Vue: Returns a ComputedRef — automatically updates when any referenced reactive value changes.
• Solid: Returns a createMemo — similarly reactive.