i18n Code Generator
Generate internationalization setup code for your framework — free, instant, no sign-up
npm install @nuxtjs/i18n
Configuration file — register the i18n plugin and set default locale
// 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",
},
});Sample locale file — add your translation keys here
{
"hello": "Hello",
"welcome": "Welcome to {name}",
"nav": {
"home": "Home",
"about": "About",
"contact": "Contact"
},
"items": "no items | one item | {count} items"
}Usage example — how to use translations in your component
<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>How to Use the i18n Code Generator
- 1
Select your framework
Choose from Vue/Nuxt, React/Next.js, Angular, Svelte/SvelteKit, Flutter, or React Native. Each option generates framework-specific code with the recommended i18n library.
- 2
Configure options
Toggle TypeScript support, select your preferred package manager (npm, yarn, pnpm), and choose the languages you want to support in your project.
- 3
Copy the generated code
Copy the setup code, install commands, and sample locale files into your project. The generated code follows each framework's official best practices and conventions.
Frequently Asked Questions
What frameworks are supported?
Vue/Nuxt, React/Next.js, Angular, Svelte/SvelteKit, Flutter, and React Native. Each generates framework-specific setup code with the recommended i18n library.
Do I need to install anything to use this tool?
No. This is a free online tool. Just select your framework, copy the generated code, and paste it into your project.
Can I switch between TypeScript and JavaScript?
Yes. Toggle the TypeScript option to generate code with or without type annotations and .ts/.js file extensions.