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>Come usare il generatore di codice i18n
- 1
Seleziona il tuo framework
Scegli tra Vue/Nuxt, React/Next.js, Angular, Svelte/SvelteKit, Flutter o React Native. Ogni opzione genera codice specifico per il framework con la libreria i18n consigliata.
- 2
Configura le opzioni
Attiva il supporto TypeScript, seleziona il gestore di pacchetti preferito (npm, yarn, pnpm) e scegli le lingue che vuoi supportare nel tuo progetto.
- 3
Copia il codice generato
Copia il codice di configurazione, i comandi di installazione e i file di localizzazione d'esempio nel tuo progetto. Il codice generato segue le best practice e le convenzioni ufficiali di ogni framework.
Domande frequenti
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.