@intlayer/vue-i18n: vue-i18n 호환 어댑터

Vue 애플리케이션이 현재 vue-i18n을 사용하고 있다면 컴포넌트나 translation hooks를 다시 작성하지 않고 Intlayer로 마이그레이션할 수 있습니다. Intlayer는 내부적으로 Intlayer의 강력한 기능을 활용하면서 vue-i18n의 API를 완벽하게 반영하는 compat adapter를 제공합니다.

해야 할 일

시작하려면 프로젝트에서 initialization 명령을 실행하세요:

npx intlayer init --interactive

Initialization 중에 Intlayer는 설정 파일 (intlayer.config.ts)을 설정하고 마이그레이션을 위해 프로젝트를 준비합니다. vue-i18n imports를 자동으로 alias하기 위해 Vite 설정에 Intlayer plugin을 추가하기만 하면 됩니다.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";

export default defineConfig({
  plugins: [vue(), vueI18nVitePlugin()],
});

내부적으로 어떻게 작동하는지

vueI18nVitePlugin은 bundler에 module alias를 주입합니다. 코드베이스의 vue-i18n import는 투명하게 @intlayer/vue-i18n으로 리다이렉트됩니다.

내부적으로 adapter는 복잡한 vue-i18n 구문을 네이티브로 처리합니다:

• Interpolation & Plurals: {name}과 list {0} interpolations을 resolve합니다. Pipe plurals ("car | cars")은 위치 의미론에 따라 Intlayer enumeration/plural nodes로 변환됩니다.
• Formats: d()와 n() 같은 함수는 내부적으로 Intl을 래핑하여 options에 정의된 datetimeFormats와 numberFormats를 지원합니다.
• Global & Local State: global.locale은 Intlayer client에서 지원되는 WritableComputedRef로 매핑되므로 reactivity는 정확히 예상대로 작동합니다 (예: locale.value = 'fr').
• Directives: v-t directive는 등록되고 정상적으로 작동합니다.

애플리케이션은 이전과 정확히 동일하게 계속 렌더링되지만 콘텐츠는 Intlayer dictionaries로 제공되어 type safety, 더 나은 bundle optimization, seamless CMS integration을 제공합니다.

이러한 라이브러리가 어디에서 왔는지 이해하려면 JavaScript i18n의 역사를 읽어보세요.