Nuxt I18n Micro

✨ 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. Both modules were tested with a 10MB translation file on the same hardware.

⏱️ Build Time and Resource Consumption ​

🌐 Server Performance (10k Requests) ​

These results clearly demonstrate that Nuxt I18n Micro significantly outperforms the original module in every critical area.

🔑 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 is structured around just 5 components (1 module and 4 plugins), making it easy to understand, extend, and maintain.
• 📏 Efficient Routing: Generates only 2 routes regardless of the number of locales, thanks to dynamic regex-based routing, unlike other i18n modules that generate separate routes for each locale.
• 🗂 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:

npm install nuxt-i18n-micro

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

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.

🗂 Folder Structure ​

Translations are organized into global and page-specific files:

  /locales
  ├── /pages
  │   ├── /index
  │   │   ├── en.json
  │   │   ├── fr.json
  │   │   └── ar.json
  │   ├── /about
  │   │   ├── en.json
  │   │   ├── fr.json
  │   │   └── ar.json
  ├── en.json
  ├── fr.json
  └── ar.json