Vite-i18n zonder de ontwikkeling te vertragen
Gebruik Better I18N in Vite-projecten om hot reload snel te houden, vertaalsleutels getypeerd te houden en taalcontent eenvoudig uit te leveren in zowel de app als de marketingpagina's.
Get started in 3 steps
De React-vriendelijke SDK installeren
Begin bij de meeste Vite-projecten met @better-i18n/use-intl en use-intl, zodat vertalingen werken in gewone componentbomen.
npm install @better-i18n/use-intl use-intlWrap your app once
Plaats BetterI18nProvider in het entry-bestand van Vite, zodat de taalgegevens beschikbaar zijn vóór de eerste render.
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>
);Vertalen binnen componenten
Gebruik getypeerde hooks voor sleutels en interpolatie en houd de hot reload van Vite snel terwijl u aan content werkt.
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Waarom Better I18N gebruiken met Vite?
Typical Vite setup
Een minimale provider-gebaseerde opzet voor Vite-apps die getypeerde vertalingen en snelle iteratie nodig hebben.
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
Lever gelokaliseerde Vite-apps sneller op
Behoud uw ontwikkelsnelheid, breng vertalingen naar een echte workflow en publiceer updates zonder taalbestanden met de hand te bewerken.