Vite i18n
Vite i18n without slowing down development
Use Better i18n with Vite projects to keep hot reload fast, translation keys typed, and locale content easy to ship across app and marketing surfaces.
Get started in 3 steps
1
Install the React-friendly SDK
For most Vite projects, start with @better-i18n/use-intl and use-intl so translations work in standard component trees.
terminal
npm install @better-i18n/use-intl use-intl
2
Wrap your app once
Mount BetterI18nProvider in your Vite entry file so locale data is available before the first render.
src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BetterI18nProvider } from '@better-i18n/use-intl';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<BetterI18nProvider project="your-org/your-project" locale="en">
<App />
</BetterI18nProvider>
);3
Translate inside components
Use typed hooks for keys and interpolation while keeping Vite hot reload fast during content iteration.
src/components/Hero.tsx
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Why use Better i18n with Vite?
Fast local iteration with Vite HMR while translation keys stay typed
Works well for React, Vue, and other Vite-powered frontends
CDN-delivered messages keep builds lighter and updates faster
Good fit for marketing sites, dashboards, and hybrid app shells
Easy onboarding for teams moving from hand-rolled JSON files
Keeps framework-specific complexity out of your translation workflow
Typical Vite setup
A minimal provider-based setup for Vite apps that need typed translations and fast iteration.
import { BetterI18nProvider, useTranslations } from '@better-i18n/use-intl';
function LandingHero() {
const t = useTranslations('landing');
return (
<section>
<h1>{t('headline')}</h1>
<p>{t('subheadline')}</p>
</section>
);
}
export default function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<LandingHero />
</BetterI18nProvider>
);
}Ship localized Vite apps faster
Keep your development speed, move translations to a real workflow, and publish updates without hand-editing locale files.