프레임워크

단 하나의 대시보드, 어떤 프레임워크든 지원

Vue, React 및 Angular에 대한 기본 지원이 제공됩니다. 스캐너는 package.json에서 i18n 라이브러리를 자동으로 감지하므로 별도의 구성이 필요하지 않습니다.

탐지된 패턴

템플릿
```
<p>{{ $t('greeting') }}</p>
```

조합 가능

const { t } = useI18n()
const label = t('nav.home')

지침
```
<span v-t="'actions.save'" />
```
구성 요소
```
<i18n-t keypath="welcome.message" />
```

신속한 통합

import { createI18n } from 'vue-i18n'

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

탐지된 패턴

Hook (i18next)

const { t } = useTranslation()
<h1>{t('greeting')}</h1>

컴포넌트 (i18next)
```
<Trans i18nKey="terms.accept" />
```
구성 요소 (국제)
```
<FormattedMessage id="welcome" />
```

명령형 (국제)

intl.formatMessage({ id: 'errors.required' })

신속한 통합

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

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

탐지된 패턴

파이프
```
<h1>{{ 'greeting' | translate }}</h1>
```
지침
```
<span [translate]="'nav.home'"></span>
```

서비스

this.translate.instant('errors.required')

스트림

this.translate.stream('dashboard.title')

신속한 통합

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

단 하나의 대시보드, 어떤 프레임워크든 지원

vue-i18n

탐지된 패턴

신속한 통합

react-i18next 및 react-intl

탐지된 패턴

신속한 통합

ngx-translate

탐지된 패턴

신속한 통합