i18n ve Vite bez zpomalení vývoje
Používejte Better I18N v projektech Vite, aby hot reload zůstal rychlý, klíče překladů typované a jazykový obsah snadno publikovatelný jak v aplikaci, tak na marketingových stránkách.
Get started in 3 steps
Nainstalujte SDK pro React
U většiny projektů Vite začněte s @better-i18n/use-intl a use-intl, aby překlady fungovaly v běžných stromech komponent.
npm install @better-i18n/use-intl use-intlWrap your app once
Připojte BetterI18nProvider ve vstupním souboru Vite, aby jazyková data byla dostupná před prvním renderem.
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>
);Překládejte uvnitř komponent
Používejte typované hooky pro klíče a interpolaci a udržte hot reload Vite rychlý i při práci na obsahu.
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Proč používat Better I18N s Vite?
Typical Vite setup
Minimální nastavení založené na provideru pro aplikace Vite, které potřebují typované překlady a rychlou iteraci.
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
Nasazujte lokalizované aplikace Vite rychleji
Zachovejte rychlost vývoje, přeneste překlady do skutečného procesu a publikujte aktualizace bez ručních úprav jazykových souborů.