Vite — Better I18N

On this page

Overview
Features
Quick Start
With Vite Plugin (Recommended)
Without Plugin (CSR)
Guide
Comparison
AI Tooling

Overview #

Better i18n for Vite works in two modes:

With @better-i18n/vite plugin (recommended) — Translations are fetched server-side and injected into HTML before React mounts. Zero FOUC, no client-side CDN requests, SEO-friendly.
Without plugin (CSR fallback) — Translations are fetched on the client after mount. Quick to set up, but shows a brief loading state on first render.

Features #

Zero Config — Point to your project and go - translations load automatically from the CDN.
React Suspense — Native Suspense support for elegant loading states.
Type Safety — Full TypeScript support with autocomplete for translation keys.
Locale Storage — Built-in localStorage persistence for user locale preference.

Quick Start #

With Vite Plugin (Recommended) #

Bash

bun add @better-i18n/use-intl @better-i18n/vite use-intl

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { betterI18n } from '@better-i18n/vite'

export default defineConfig({
  plugins: [
    betterI18n({ projectId: 'your-org/your-project' }),
    react(),
  ],
})

src/App.tsx

import { BetterI18nProvider, LocaleDropdown } from '@better-i18n/use-intl'

function App() {
  return (
    <BetterI18nProvider>
      <LocaleDropdown />
      <YourApp />
    </BetterI18nProvider>
  )
}

No project, locale, or messages props needed — the plugin handles everything.

Without Plugin (CSR) #

src/App.tsx

import { BetterI18nProvider } from '@better-i18n/use-intl'

function App() {
  return (
    <BetterI18nProvider
      projectId="your-org/your-project"
      locale="en"
    >
      <YourApp />
    </BetterI18nProvider>
  )
}

src/components/Hello.tsx

import { useTranslations } from '@better-i18n/use-intl'

export function Hello() {
  const t = useTranslations('home')

  return <h1>{t('title')}</h1>
}

Guide #

Setup — Installation, provider configuration, and loading states.
React Router — URL-based locale routing with React Router.
TypeScript — Type-safe translation keys and autocomplete.

Comparison #

Feature	Vite	Vite + Plugin	TanStack Start	Next.js
Rendering	CSR	SSR injection	CSR + SSR	CSR + SSR
FOUC	Yes	No	No	No
URL routing	Optional	Optional	Built-in	Built-in
SEO	Limited	Embedded	Full	Full
Client CDN requests	Yes	No (initial)	No	No

The @better-i18n/vite plugin brings SSR-like benefits to Vite apps without requiring a full SSR setup.

AI Tooling #

Now that you've integrated the SDK, your AI agent can check coverage, translate keys, and publish — all without leaving your editor.

MCP Server — Translate keys, check coverage, and publish — all from your editor via Cursor, Claude Code, or Windsurf.
Agent Skill — Permanent better-i18n knowledge for your AI agent — SDK patterns, CDN behavior, key conventions. No prompts needed each session.