Aller au contenu
Frameworks

Un seul dashboard, tous les frameworks

Prise en charge native de Vue, React et Angular. Le scanner détecte automatiquement votre bibliothèque i18n depuis le package.json — aucune configuration requise.

Frameworks supportés
3
Bibliothèques i18n
4
Motifs détectés
12
  1. package.json
  2. Bibliothèque détectée
  3. Motifs détectés
vue-i18n · react-i18next · react-intl · ngx-translate

Vue

vue-i18n

Prise en charge complète de vue-i18n 9+. Analyse la syntaxe des templates, les appels aux composables et les blocs <i18n> des SFC.

Intégration rapide

main.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: await fetch('/locale/en.json').then(r => r.json()),
  }
})

Motifs détectés

Template
<p>{{ $t('greeting') }}</p>
Composable
const { t } = useI18n() const label = t('nav.home')
Directive
<span v-t="'actions.save'" />
Composant
<i18n-t keypath="welcome.message" />

React

react-i18next & react-intl

Les deux bibliothèques i18n les plus utilisées avec React sont prises en charge. Choisissez l'une ou l'autre, le scanner s'adapte automatiquement.

Intégration rapide

i18n.ts
import i18n from 'i18next'
import HttpBackend from 'i18next-http-backend'

i18n.use(HttpBackend).init({
  fallbackLng: 'en',
  backend: { loadPath: '/locale/{{lng}}.json' },
})

Motifs détectés

Hook (i18next)
const { t } = useTranslation() <h1>{t('greeting')}</h1>
Composant (i18next)
<Trans i18nKey="terms.accept" />
Composant (intl)
<FormattedMessage id="welcome" />
Impératif (intl)
intl.formatMessage({ id: 'errors.required' })

Angular

ngx-translate

Compatible avec @ngx-translate/core. Analyse les templates, pipes, directives et appels de service.

Intégration rapide

app.module.ts
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (http) => new TranslateHttpLoader(http, '/locale/', '.json'),
    deps: [HttpClient]
  }
})

Motifs détectés

Pipe
<h1>{{ 'greeting' | translate }}</h1>
Directive
<span [translate]="'nav.home'"></span>
Service
this.translate.instant('errors.required')
Flux
this.translate.stream('dashboard.title')
Commençons

Traduire votre app en quatre étapes.

  1. Créez votre compte

    Gratuit pour commencer : 30 jours de n'importe quel plan, sans carte. Reste gratuit pour 1 projet.

  2. Installez-la

    Comment voulez-vous l'installer ?

    Sur votre propre serveur. Puis ouvrez localhost:6001.

    docker compose pull && docker compose up -d

    Guide d'auto-hébergement

    macOS, Windows ou Linux. Elle lance son propre serveur local.

    Télécharger l'app
  3. Connectez votre projet

    Pointez-la vers un dossier ou un dépôt Git. Elle détecte votre framework et vos fichiers de langue.

  4. Traduisez

    Choisissez l'un des 8 moteurs et traduisez une langue entière d'un coup. Google Translate fonctionne sans clé.