i18n Code Generator
Generate internationalization setup code for your framework — free, instant, no sign-up
Package Manager
Install Command
npm install @nuxtjs/i18n
nuxt.config.ts
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",
},
}); i18n/locales/en.json
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"
} app.vue
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>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.