Getting Started

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.

Use the @better-i18n/vite plugin for production apps. It works like Next.js SSR — translations are embedded in the HTML, so the first render always has real content.

Integrating with AI? Run npx skills add better-i18n/skills first — your agent (Cursor, Claude Code, or Windsurf) will already know the SDK patterns, CDN behavior, and key conventions. Then just ask it to set up the integration for you. Learn more →

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)

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({ project: 'your-org/your-project' }), 
    react(),
  ],
})

src/App.tsx

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

function App() {
  return (
    <BetterI18nProvider> // [!code ++]
      <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
      project="your-org/your-project"
      locale="en"
    > // [!code ++]
      <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.