Zum Inhalt springen
Vite i18n

Vite-i18n, ohne die Entwicklung zu bremsen

Nutzen Sie Better I18N in Vite-Projekten, damit Hot Reload schnell bleibt, Übersetzungsschlüssel typisiert sind und Sprachinhalte in App- und Marketing-Oberflächen leicht ausgeliefert werden.

Setup

Get started in 3 steps

React-freundliches SDK installieren

Beginnen Sie bei den meisten Vite-Projekten mit @better-i18n/use-intl und use-intl, damit Übersetzungen in gewöhnlichen Komponentenbäumen funktionieren.

terminal
npm install @better-i18n/use-intl use-intl

Wrap your app once

Binden Sie BetterI18nProvider in Ihrer Vite-Entry-Datei ein, damit die Sprachdaten vor dem ersten Render verfügbar sind.

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>
);

In Komponenten übersetzen

Verwenden Sie typisierte Hooks für Schlüssel und Interpolation und halten Sie den Vite Hot Reload beim Iterieren von Inhalten schnell.

src/components/Hero.tsx
import { useTranslations } from '@better-i18n/use-intl';

export function Hero() {
  const t = useTranslations('landing');

  return <h1>{t('headline')}</h1>;
}
Capabilities

Warum Better I18N mit Vite einsetzen?

Schnelle lokale Iteration mit Vite HMR, während Übersetzungsschlüssel typisiert bleiben
Passt gut zu React, Vue und anderen Vite-basierten Frontends
Über CDN ausgelieferte Messages halten Builds leichter und Updates schneller
Gut geeignet für Marketing-Websites, Dashboards und hybride App-Shells
Einfacher Einstieg für Teams, die von handgepflegten JSON-Dateien kommen
Hält Framework-spezifische Komplexität aus Ihrem Übersetzungs-Workflow heraus
Example

Typical Vite setup

Ein minimales Provider-basiertes Setup für Vite-Apps, die typisierte Übersetzungen und schnelle Iteration brauchen.

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>
  );
}

Other frameworks

Get started

Lokalisierte Vite-Apps schneller ausliefern

Behalten Sie Ihr Entwicklungstempo, überführen Sie Übersetzungen in einen echten Workflow und veröffentlichen Sie Updates, ohne Sprachdateien von Hand zu bearbeiten.