i18n 코드 생성기
프레임워크 국제화 코드 생성 — 무료, 즉시, 가입 불필요
패키지 매니저
설치 명령어
npm install @nuxtjs/i18n
nuxt.config.ts
설정 파일 — i18n 플러그인 등록
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["@nuxtjs/i18n"],
i18n: {
locales: [
{ code: "en", file: "en.json", name: "English" },
{ code: "ja", file: "ja.json", name: "日本語" },
],
defaultLocale: "en",
lazy: true,
langDir: "locales/",
strategy: "prefix_except_default",
},
}); i18n/locales/en.json
샘플 로케일 파일
{
"hello": "Hello",
"welcome": "Welcome to {name}",
"nav": {
"home": "Home",
"about": "About",
"contact": "Contact"
},
"items": "no items | one item | {count} items"
} app.vue
사용 예제
<script setup>
const { t } = useI18n();
const localePath = useLocalePath();
</script>
<template>
<div>
<h1>{{ $t("hello") }}</h1>
<p>{{ $t("welcome", { name: "Glot" }) }}</p>
<nav>
<NuxtLink :to="localePath('/')">{{ $t("nav.home") }}</NuxtLink>
<NuxtLink :to="localePath('/about')">{{ $t("nav.about") }}</NuxtLink>
</nav>
</div>
</template>i18n 코드 생성기 사용법
- 1
프레임워크 선택
Vue/Nuxt, React/Next.js, Angular, Svelte/SvelteKit, Flutter, React Native 중에서 선택하세요. 각 옵션은 해당 프레임워크에 맞는 코드와 권장 i18n 라이브러리를 생성합니다.
- 2
옵션 설정
TypeScript 지원 활성화/비활성화, 선호하는 패키지 매니저(npm, yarn, pnpm) 선택, 프로젝트에서 지원할 언어를 설정하세요.
- 3
생성된 코드 복사
설정 코드, 설치 명령어, 샘플 로케일 파일을 프로젝트에 복사하세요. 생성된 코드는 각 프레임워크의 공식 모범 사례를 따릅니다.
자주 묻는 질문
지원 프레임워크는?
Vue/Nuxt, React/Next.js, Angular, Svelte/SvelteKit, Flutter, React Native 지원.
설치가 필요한가요?
아닙니다. 무료 온라인 도구입니다.
TypeScript/JavaScript 전환 가능?
네, 가능합니다.