L'i18n avec Vite sans ralentir le développement
Utilisez Better I18N dans vos projets Vite pour garder un hot reload rapide, des clés de traduction typées et un contenu par langue facile à publier, aussi bien dans l'application que sur les pages marketing.
Get started in 3 steps
Installer le SDK compatible avec React
Pour la plupart des projets Vite, commencez par @better-i18n/use-intl et use-intl, pour que les traductions fonctionnent dans des arbres de composants standard.
npm install @better-i18n/use-intl use-intlWrap your app once
Montez BetterI18nProvider dans le fichier d'entrée de Vite, pour que les données de langue soient disponibles avant le premier rendu.
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>
);Traduire dans les composants
Utilisez des hooks typés pour les clés et l'interpolation, tout en gardant le hot reload de Vite rapide pendant que vous travaillez le contenu.
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Pourquoi utiliser Better I18N avec Vite ?
Typical Vite setup
Une configuration minimale basée sur un provider, pour les applications Vite qui ont besoin de traductions typées et d'itérations rapides.
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>
);
}Related guides
Other frameworks
Get started
Livrez plus vite des applications Vite localisées
Gardez votre vitesse de développement, faites passer les traductions dans un vrai workflow et publiez des mises à jour sans modifier les fichiers de langue à la main.