Skip to content

Nuxt I18n MicroFast, Simple, and Lightweight Internationalization for Nuxt

Optimize your Nuxt app with a powerful and efficient i18n solution.

Nuxt I18n Micro logo

✨ Introduction ​

Nuxt I18n Micro is a fast, simple, and lightweight internationalization (i18n) module for Nuxt. Despite its compact size, it's designed with large projects in mind, offering significant performance improvements over traditional i18n solutions like nuxt-i18n. The module was built from the ground up to be highly efficient, focusing on minimizing build times, reducing server load, and shrinking bundle sizes.

πŸ“ Why Nuxt I18n Micro? ​

The Nuxt I18n Micro module was created to address critical performance issues found in the original nuxt-i18n module, particularly in high-traffic environments and projects with large translation files. Key issues with nuxt-i18n include:

  • 🚨 High Memory Consumption: Consumes significant memory during both build and runtime, leading to performance bottlenecks.
  • 🐒 Slow Performance: Especially with large translation files, it causes noticeable slowdowns in build times and server response.
  • πŸ’Ό Large Bundle Size: Generates a large bundle, negatively impacting application performance.
  • πŸ› Memory Leaks and Bugs: Known for memory leaks and unpredictable behavior under heavy load.

🏁 Performance Comparison ​

To showcase the efficiency of Nuxt I18n Micro, we conducted tests under identical conditions with pnpm test:performance. See the full benchmark report for methodology, charts, and raw numbers.

⏱️ Build Time and Resource Consumption ​

Note: The plain-nuxt baseline is a minimal implementation created solely for benchmarking purposes. It loads data directly from JSON files without any i18n logic. Numbers below are means of 3 consecutive runs (default CLI profile).

plain-nuxt (baseline)
  • Build Time: 5.32 seconds
  • Max Memory Usage: 810 MB
  • Code Bundle: 1.53 MB
@nuxtjs/i18n v10.6
  • Build Time: 8.34 seconds
  • Max Memory Usage: 1,821 MB
  • Code Bundle: 2.16 MB

Nuxt I18n Micro

  • Build Time: 5.34 seconds β€” ~36% faster than @nuxtjs/i18n v10.6
  • Max Memory Usage: 1,065 MB β€” ~41% less memory than @nuxtjs/i18n v10.6
  • Code Bundle: 1.74 MB

🌐 Server Performance (Stress Test) ​

plain-nuxt (baseline)
  • Requests per Second: 109 RPS (Artillery) / 65 RPS (Autocannon)
  • Average Response Time: 1,194 ms (Artillery)
@nuxtjs/i18n v10.6
  • Requests per Second: 143 RPS (Artillery) / 72 RPS (Autocannon)
  • Average Response Time: 956 ms (Artillery)

Nuxt I18n Micro

  • Requests per Second: 275 RPS (Artillery) β€” ~93% more than @nuxtjs/i18n v10.6
  • Average Response Time: 483 ms β€” ~49% faster than @nuxtjs/i18n v10.6
  • Autocannon: 162 RPS / 62 ms avg latency

Numbers are from the latest fixture run against @nuxtjs/i18n@10.6.0 (fair code/translations split). Micro stays ahead on build time, build RSS, and especially Artillery/Autocannon throughput; see the full report for methodology.

πŸ”‘ Key Features ​

  • 🌐 Compact Yet Powerful: Despite its small size, Nuxt I18n Micro is designed for large-scale projects, focusing on performance and efficiency.
  • ⚑ Optimized Build and Runtime: Reduces build times, memory usage, and server load, making it ideal for high-traffic applications.
  • πŸ› οΈ Minimalist Design: The module core is a single Nuxt module plus a small set of runtime plugins, making it easy to understand, extend, and maintain.
  • πŸ“ Strategy-Based Routing: Uses @i18n-micro/route-strategy (build-time) and @i18n-micro/path-strategy (runtime) to extend Nuxt pages with localized routes according to the chosen strategy (prefix, no_prefix, etc.), so each page gets the correct locale variants without manual route duplication.
  • πŸ—‚ Streamlined Translation Loading: Only JSON files are supported, with translations split between a global file for common texts (e.g., menus) and page-specific files, which are auto-generated in the dev mode if not present.

βš™οΈ Quick Setup ​

Install the module in your Nuxt application with:

bash
npm install nuxt-i18n-micro

Then, add it to your nuxt.config.ts:

typescript
export default defineNuxtConfig({
  modules: ['nuxt-i18n-micro'],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', dir: 'ltr' },
      { code: 'fr', iso: 'fr-FR', dir: 'ltr' },
      { code: 'ar', iso: 'ar-SA', dir: 'rtl' },
    ],
    defaultLocale: 'en',
    translationDir: 'locales',
    meta: true,
  },
})

That's it! You're now ready to use Nuxt I18n Micro in your Nuxt app.

🌍 Ecosystem Packages ​

Starting from v2.14+/v3.0.0, the i18n-micro ecosystem includes standalone packages for other frameworks and tools:

PackageDescription
@i18n-micro/vueVue 3 integration (standalone, without Nuxt)
@i18n-micro/reactReact integration
@i18n-micro/solidSolidJS integration
@i18n-micro/preactPreact integration
@i18n-micro/astroAstro integration
@i18n-micro/nodeNode.js server-side loader
@i18n-micro/coreCore utilities (shared by all packages)
@i18n-micro/typesTypeScript type definitions
@i18n-micro/types-generatorAuto-generate TypeScript types from translation files
@i18n-micro/test-utilsTesting utilities

πŸ—‚ Folder Structure ​

Translations are organized into global and page-specific files:

        • JSONen.json
        • JSONfr.json
        • JSONar.json
        • JSONen.json
        • JSONfr.json
        • JSONar.json
    • JSONen.json
    • JSONfr.json
    • JSONar.json

Released under the MIT License.