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.

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.

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" />

Intégration rapide

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: await fetch('/locale/en.json').then(r => r.json()),
  }
})
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.

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

Intégration rapide

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

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

ngx-translate

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

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

Intégration rapide

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