i18n en Vite sin ralentizar el desarrollo
Utilice Better I18N en proyectos Vite para mantener el hot reload rápido, las claves de traducción tipadas y el contenido por idioma fácil de publicar tanto en la app como en las páginas de marketing.
Get started in 3 steps
Instale el SDK compatible con React
Para la mayoría de proyectos Vite, empiece con @better-i18n/use-intl y use-intl para que las traducciones funcionen en árboles de componentes estándar.
npm install @better-i18n/use-intl use-intlWrap your app once
Monte BetterI18nProvider en el archivo de entrada de Vite para que los datos de idioma estén disponibles antes del primer 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>
);Traduzca dentro de los componentes
Utilice hooks tipados para las claves y la interpolación manteniendo rápido el hot reload de Vite mientras itera el contenido.
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}¿Por qué usar Better I18N con Vite?
Typical Vite setup
Una configuración mínima basada en proveedor para apps de Vite que necesitan traducciones tipadas e iteración rápida.
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
Publique apps de Vite localizadas más rápido
Mantenga su velocidad de desarrollo, lleve las traducciones a un flujo de trabajo real y publique actualizaciones sin editar a mano los archivos de idioma.