@intlayer/docs 5.8.0-canary.0 → 5.8.0

package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-06-29
-title: react-i18n vs react-intl vs Intlayer
+title: react-i18next vs react-intl vs Intlayer
 description: Integrate react-i18next with next-intl and Intlayer for the internationalization (i18n) of a React app
 keywords:
   - next-intl
@@ -17,178 +17,140 @@ slugs:
   - react-i18next-vs-react-intl-vs-intlayer
 ---
 
-# React-Intl VS React-i18next VS Intlayer | React Internationalization (i18n)
+# react-Intl VS react-i18next VS intlayer | React Internationalization (i18n)
 
-Below is a concise comparison of three popular i18n (internationalization) libraries for React: **React-Intl**, **React-i18next**, and **Intlayer**. Each library offers unique features and workflows for integrating multilingual support in your React application. After reading this, you should be able to decide which solution best meets your needs.
+This guide compares three established i18n options for **React**: **react-intl** (FormatJS), **react-i18next** (i18next), and **Intlayer**.
+We focus on **plain React** applications (e.g., Vite, CRA, SPA). If you’re using Next.js, see our dedicated Next.js comparison.
 
----
-
-## 1. Introduction
-
-Internationalization (i18n) in React applications can be achieved in multiple ways. The three libraries presented here have different design philosophies, sets of features, and community support:
+We evaluate:
 
-1. **React-Intl**
-2. **React-i18next**
-3. **Intlayer**
+- Architecture & content organization
+- TypeScript & safety
+- Missing translation handling
+- Rich content & formatting capabilities
+- Performance & loading behavior
+- Developer experience (DX), tooling & maintenance
+- SEO/routing (framework-dependent)
 
-Below, you’ll find an overview of each solution, followed by a feature comparison, pros & cons, and example use cases.
+> **tl;dr**: All three can localize a React app. If you want **component-scoped content**, **strict TypeScript types**, **build-time missing-key checks**, **tree-shaken dictionaries**, and built-in editorial tooling (Visual Editor/CMS + optional AI translation), **Intlayer** is the most complete choice for modular React codebases.
 
 ---
 
-## 2. React-Intl
+## High-level positioning
 
-### Overview
+- **react-intl** - ICU-first, standards-aligned formatting (dates/numbers/plurals) with a mature API. Catalogs are typically centralized; key safety and build-time validation are largely on you.
+- **react-i18next** - Extremely popular and flexible; namespaces, detectors, and many plugins (ICU, backends). Powerful, but configuration can sprawl as projects scale.
+- **Intlayer** - Component-centric content model for React, **strict TS typing**, **build-time checks**, **tree-shaking**, plus **Visual Editor/CMS** and **AI-assisted translations**. Works with React Router, Vite, CRA, etc.
 
-[**React-Intl**](https://formatjs.io/docs/react-intl/) is part of the [FormatJS](https://formatjs.io/) suite. It provides a powerful set of **APIs and components** to handle message formatting, pluralization, date/time, and number formatting. React-Intl is widely used in enterprise applications, mainly because it is part of an ecosystem that standardizes message syntax and formatting.
-
-### Key Features
-
-- **ICU Message Syntax**: Offers a comprehensive syntax for message interpolation, pluralization, and more.
-- **Localized Formatting**: Built-in utilities to format dates, times, numbers, and relative times based on locale.
-- **Declarative Components**: Exposes `<FormattedMessage>`, `<FormattedNumber>`, `<FormattedDate>`, etc., for seamless usage in JSX.
-- **Rich Ecosystem**: Integrates well with the FormatJS tooling (e.g., [babel-plugin-react-intl](https://formatjs.io/docs/tooling/babel-plugin/)) for extracting, managing, and compiling messages.
+---
 
-### Typical Workflow
+## Feature matrix (React focus)
+
+| Feature                                       | `react-intlayer` (Intlayer)                                                                                                         | `react-i18next` (i18next)                                                                                | `react-intl` (FormatJS)                                                                     |
+| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| **Translations Near Components**              | ✅ Yes, content collocated with each component                                                                                      | ❌ No                                                                                                    | ❌ No                                                                                       |
+| **TypeScript Integration**                    | ✅ Advanced, auto-generated strict types                                                                                            | ⚠️ Basic; extra config for safety                                                                        | ✅ Good, but less strict                                                                    |
+| **Missing Translation Detection**             | ✅ TypeScript error hightlight and build-time error/warning                                                                         | ⚠️ Mostly fallback strings at runtime                                                                    | ⚠️ Fallback strings                                                                         |
+| **Rich Content (JSX/Markdown/components)**    | ✅ Direct support                                                                                                                   | ⚠️ Limited / interpolation only                                                                          | ⚠️ ICU syntax, not real JSX                                                                 |
+| **AI-powered Translation**                    | ✅ Yes, supports multiple AI providers. Usable using your own API keys. Considers the context of your application and content scope | ❌ No                                                                                                    | ❌ No                                                                                       |
+| **Visual Editor**                             | ✅ Yes, local Visual Editor + optional CMS; can externalize codebase content; embeddable                                            | ❌ No / available via external localization platforms                                                    | ❌ No / available via external localization platforms                                       |
+| **Localized Routing**                         | ✅ Yes, supports localized paths out of the box (works with Next.js & Vite)                                                         | ⚠️ No built-in, requires plugins (e.g. `next-i18next`) or custom router config                           | ❌ No, only message formatting, routing must be manual                                      |
+| **Dynamic Route Generation**                  | ✅ Yes                                                                                                                              | ⚠️ Plugin/ecosystem or manual setup                                                                      | ❌ Not provided                                                                             |
+| **Pluralization**                             | ✅ Enumeration-based patterns                                                                                                       | ✅ Configurable (plugins like i18next-icu)                                                               | ✅ (ICU)                                                                                    |
+| **Formatting (dates, numbers, currencies)**   | ✅ Optimized formatters (Intl under the hood)                                                                                       | ⚠️ Via plugins or custom Intl usage                                                                      | ✅ ICU formatters                                                                           |
+| **Content Format**                            | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                    | ⚠️ .json                                                                                                 | ✅ .json, .js                                                                               |
+| **ICU support**                               | ⚠️ WIP                                                                                                                              | ⚠️ Via plugin (i18next-icu)                                                                              | ✅ Yes                                                                                      |
+| **SEO Helpers (hreflang, sitemap)**           | ✅ Built-in tools: helpers for sitemap, robots.txt, metadata                                                                        | ⚠️ Community plugins/manual                                                                              | ❌ Not core                                                                                 |
+| **Ecosystem / Community**                     | ⚠️ Smaller but growing fast and reactive                                                                                            | ✅ Largest and mature                                                                                    | ✅ Large                                                                                    |
+| **Server-side Rendering & Server Components** | ✅ Yes, streamlined for SSR / React Server Components                                                                               | ⚠️ Supported at page level but need to pass t-functions on component tree for children server components | ❌ Not supported, need to pass t-functions on component tree for children server components |
+| **Tree-shaking (load only used content)**     | ✅ Yes, per-component at build time via Babel/SWC plugins                                                                           | ⚠️ Usually loads all (can be improved with namespaces/code-splitting)                                    | ⚠️ Usually loads all                                                                        |
+| **Lazy loading**                              | ✅ Yes, per-locale / per-dictionary                                                                                                 | ✅ Yes (e.g., backends/namespaces on demand)                                                             | ✅ Yes (split locale bundles)                                                               |
+| **Purge unused content**                      | ✅ Yes, per-dictionary at build time                                                                                                | ❌ No, only via manual namespace segmentation                                                            | ❌ No, all declared messages are bundled                                                    |
+| **Management of Large Projects**              | ✅ Encourages modular, suited for design-system                                                                                     | ⚠️ Needs good file discipline                                                                            | ⚠️ Central catalogs can get large                                                           |
 
-1. **Define message catalogs** (usually JSON files per locale).
-2. **Wrap your app** in `<IntlProvider locale="en" messages={messages}>`.
-3. **Use** `<FormattedMessage id="myMessage" defaultMessage="Hello world" />` or the `useIntl()` hook to access translation strings.
+---
 
-### Pros
+## Deep-dive comparison
 
-- Well-established and used in many production environments.
-- Advanced message formatting, including pluralization, gender, time zones, and more.
-- Strong tooling support for message extraction and compilation.
+### 1) Architecture & scalability
 
-### Cons
+- **react-intl / react-i18next**: Most setups maintain **centralized locale folders** per language, sometimes split by **namespaces** (i18next). Works well early on but becomes a shared surface area as apps grow.
+- **Intlayer**: Promotes **per-component (or per-feature) dictionaries** **co-located** with the UI they serve. This keeps ownership clear, eases duplication/migration of components, and reduces cross-team key churn. Unused content is easier to identify and remove.
 
-- Requires familiarity with the **ICU message format**, which can be verbose.
-- Not as straightforward to handle dynamic or complex translations that are more than just string-based.
+**Why it matters:** Modular content mirrors modular UI. Large React codebases stay cleaner when translations live with the components they belong to.
 
 ---
 
-## 3. React-i18next
-
-### Overview
-
-[**React-i18next**](https://react.i18next.com/) is a React extension of [i18next](https://www.i18next.com/), one of the most popular JavaScript i18n frameworks. It offers **extensive features** for runtime translations, lazy loading, and detection of language, making it extremely flexible for a wide variety of use cases.
-
-### Key Features
-
-- **Flexible Translation Structure**: Not tied to a single format like ICU. You can store translations in JSON, use interpolation, pluralization, etc.
-- **Dynamic Language Switching**: Built-in language detector plugins and runtime updates.
-- **Nested & Structured Translations**: You can nest translations easily within JSON.
-- **Extensive Plugin Ecosystem**: For detection (browser, path, subdomain, etc.), resource loading, caching, and more.
+### 2) TypeScript & safety
 
-### Typical Workflow
+- **react-intl**: Solid typings, but **no automatic key typing**; you enforce safety patterns yourself.
+- **react-i18next**: Strong typings for hooks; **strict key typing** typically requires extra configuration or generators.
+- **Intlayer**: **Auto-generates strict types** from your content. IDE autocomplete and **compile-time errors** catch typos and missing keys before runtime.
 
-1. **Install `i18next` & `react-i18next`.**
-2. **Configure i18n** to load translations (JSON) and set up language detection or fallback.
-3. **Wrap your app** in `I18nextProvider`.
-4. **Use the `useTranslation()` hook** or `<Trans>` component to display translations.
+**Why it matters:** Shifting failures **left** (to build/CI) reduces production issues and speeds developer feedback loops.
 
-### Pros
+---
 
-- Highly **flexible** and feature-rich.
-- Very active community and large ecosystem of plugins.
-- Ease of **dynamic loading** of translations (e.g., from a server, on demand).
+### 3) Missing translation handling
 
-### Cons
+- **react-intl / react-i18next**: Default to **runtime fallbacks** (key echo or default locale). You can add linting/plugins, but it’s not guaranteed at build.
+- **Intlayer**: **Build-time detection** with warnings or errors when required locales/keys are missing.
 
-- **Configuration can be verbose**, especially if you have more advanced needs.
-- If you prefer strongly typed translations, you may need additional TypeScript setups.
+**Why it matters:** CI failing on missing strings prevents “mystery English” leaking into non-English UIs.
 
 ---
 
-## 4. Intlayer
+### 4) Rich content & formatting
 
-### Overview
+- **react-intl**: Excellent **ICU** support for plurals, selects, dates/numbers, and message composition. JSX can be used, but the mental model stays message-centric.
+- **react-i18next**: Flexible interpolation and **`<Trans>`** for embedding elements/components; ICU available via plugin.
+- **Intlayer**: Content files can include **rich nodes** (JSX/Markdown/components) and **metadata**. Formatting uses Intl under the hood; plural patterns are ergonomic.
 
-[**Intlayer**](https://github.com/aymericzip/intlayer) is a newer, open-source i18n library focused on **component-level content declarations**, type safety, and **dynamic routing**. It is designed for modern React workflows, supporting both **Create React App** and **Vite** setups. It also includes advanced features like **locale-based routing** and **auto-generated TypeScript types** for translations.
+**Why it matters:** Complex UI texts (links, bold pieces, inline components) are easier when the library embraces React nodes cleanly.
 
-### Key Features
+---
 
-- **Declarative Content Files**: Each component or module can declare its translations in dedicated `.content.tsx` or `.content.json` files, keeping content close to where it’s used.
-- **Built-in Routing & Middleware**: Optional modules for localized routing (e.g., `/en/about`, `/fr/about`) and server middleware for detecting user locale.
-- **Auto-generated TypeScript Types**: Ensures type safety with features like autocompletion and compile-time error detection.
-- **Dynamic & Rich Translations**: Can include JSX/TSX in translations for more complex use cases (e.g., links, bold text, icons in translations).
+### 5) Performance & loading behavior
 
-### Typical Workflow
+- **react-intl / react-i18next**: You typically manage **catalog splitting** and **lazy loading** manually (namespaces/dynamic imports). Effective but requires discipline.
+- **Intlayer**: **Tree-shakes** unused dictionaries and supports **per-dictionary/per-locale lazy loading** out-of-the-box.
 
-1. **Install `intlayer` and `react-intlayer`.**
-2. **Create `intlayer.config.ts`** to define available locales and default locale.
-3. **Use the Intlayer CLI** or plugin to **transpile** content declarations.
-4. **Wrap your app** in `<IntlayerProvider>` and retrieve content with `useIntlayer("keyName")`.
+**Why it matters:** Smaller bundles and fewer unused strings improve startup and navigation performance.
 
-### Pros
+---
 
-- **TypeScript-friendly** with built-in type generation and error-checking.
-- **Rich content** possible (e.g., passing React nodes as translations).
-- **Localized Routing** out-of-the-box.
-- Integrated with popular build tools (CRA, Vite) for easy setup.
+### 6) DX, tooling & maintenance
 
-### Cons
+- **react-intl / react-i18next**: Broad community ecosystem; for editorial workflows you usually adopt external localization platforms.
+- **Intlayer**: Ships a **free Visual Editor** and **optional CMS** (keep content in Git or externalize it). Also offers a **VSCode extension** for content authoring and **AI-assisted translation** using your own provider keys.
 
-- Still **relatively new** compared to React-Intl or React-i18next.
-- Heavier focus on a “component-level content declaration” approach may be a shift from typical .json catalogs.
-- Smaller ecosystem and community compared to the more established libraries.
+**Why it matters:** Built-in tooling shortens the loop between developers and content authors - less glue code, fewer vendor dependencies.
 
 ---
 
-## 5. Feature Comparison
+## When to choose which?
 
-| **Feature**                    | **React-Intl**                                                        | **React-i18next**                                                                                   | **Intlayer**                                                                                                               |
-| ------------------------------ | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| **Primary Use Case**           | String-based translations, date/number formatting, ICU message syntax | Full-featured i18n with easy dynamic switching, nesting, plugin ecosystem                           | Type-safe translations with focus on declarative content, localized routing, & optional server middleware                  |
-| **Approach**                   | Utilize `<IntlProvider>` & FormatJS message components                | Utilize `I18nextProvider` & `useTranslation()` hook                                                 | Utilize `<IntlayerProvider>` & `useIntlayer()` hook with content declarations                                              |
-| **Localization Format**        | ICU-based strings (JSON or JavaScript catalogs)                       | JSON resource files (or custom loaders). ICU format optional via i18next plugin                     | `.content.[ts/js/tsx]` or JSON declarations; can contain strings or React components                                       |
-| **Routing**                    | Handled externally (no built-in localized routing)                    | Handled externally with i18next plugins (path, subdomain detection, etc.)                           | Built-in localized routing support (e.g., `/en/about`, `/fr/about`), plus optional server middleware (for SSR/Vite)        |
-| **TypeScript Support**         | Good (typings for official packages)                                  | Good but extra config for typed translations if you want strict checking                            | Excellent (auto-generated type definitions for content keys and translations)                                              |
-| **Pluralization & Formatting** | Advanced: Built-in date/time/number formatting, plural/gender support | Configurable pluralization. Date/time formatting typically done via external libs or i18next plugin | Can rely on standard JavaScript Intl or embed logic in content. Not as specialized as FormatJS, but handles typical cases. |
-| **Community & Ecosystem**      | Large, part of FormatJS ecosystem                                     | Very large, highly active, lots of plugins (detection, caching, frameworks)                         | Smaller but growing; open-source, modern approach                                                                          |
-| **Learning Curve**             | Moderate (learning ICU message syntax, FormatJS conventions)          | Low to moderate (straightforward usage, but advanced config can get verbose)                        | Moderate (concept of content declarations and specialized build steps)                                                     |
+- **Choose react-intl** if you want **ICU-first** message formatting with a straightforward, standards-aligned API and your team is comfortable maintaining catalogs and safety checks manually.
+- **Choose react-i18next** if you need the **breadth of i18next’s ecosystem** (detectors, backends, ICU plugin, integrations) and accept more configuration to gain flexibility.
+- **Choose Intlayer** if you value **component-scoped content**, **strict TypeScript**, **build-time guarantees**, **tree-shaking**, and **batteries-included** editorial tooling - especially for **large, modular** React apps, design-systems, etc.
 
 ---
 
-## 6. When to Choose Each
-
-1. **React-Intl**
-
-   - You need **powerful formatting** for dates/times/numbers and strong **ICU message syntax**.
-   - You prefer a more “**standards-based**” approach to translations.
-   - You don’t require localized routing or strongly typed translation keys.
+## Interoperability with `react-intl` and `react-i18next`
 
-2. **React-i18next**
+`intlayer` can also help to manage your `react-intl` and `react-i18next` namespaces.
 
-   - You need a **flexible, established** solution with **dynamic** and **on-demand** translation loading.
-   - You want **plugin-based** language detection (e.g., from URL, cookies, local storage) or advanced caching.
-   - You need the largest ecosystem, with many existing integrations for various frameworks (Next.js, React Native, etc.).
+Using `intlayer`, you can declare your content in the format of your favorite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
 
-3. **Intlayer**
-   - You want **strong TypeScript** integration with _autogenerated types_, ensuring you rarely miss a translation key.
-   - You prefer **declarative content** close to the component, possibly including React nodes or advanced logic in translations.
-   - You require **built-in localized routing** or want to easily incorporate it into your SSR or Vite setup.
-   - You desire a modern approach or simply want a single library that covers both **content management** (i18n) and **routing** in a type-safe way.
+Refer to [`dictionaryOutput` and `i18nextResourcesDir` options](https://intlayer.org/doc/concept/configuration#content-configuration) for more details.
 
 ---
 
-## 7. Conclusion
-
-Each library offers a robust solution for internationalizing a React application:
-
-- **React-Intl** excels at message formatting and is a popular choice for enterprise solutions focusing on ICU message syntax.
-- **React-i18next** provides a highly flexible, plugin-driven environment for advanced or dynamic i18n needs.
-- **Intlayer** offers a **modern, strongly typed** approach that merges content declarations, advanced localized routing, and plugin-based (CRA, Vite) integrations.
-
-Your choice largely depends on project requirements, desired developer experience (DX), and how important typed translations or advanced routing are. If you value built-in localized routing and TypeScript integration, **Intlayer** may be most appealing. If you want a battle-tested, ecosystem-rich solution, **React-i18next** is a great choice. For straightforward ICU-based formatting needs, **React-Intl** is a reliable option.
-
----
+## Conclusion
 
-### Further Reading
+All three libraries localize React effectively. The differentiator is how much **infrastructure** you must build to reach a **safe, scalable** setup:
 
-- [react-intl Documentation](https://formatjs.io/docs/react-intl/)
-- [react-i18next Documentation](https://react.i18next.com/)
-- [Intlayer + CRA Getting Started Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md)
-- [Intlayer + Vite & React Getting Started Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite%2Breact.md)
+- With **Intlayer**, **modular content**, **strict TS typing**, **build-time safety**, **tree-shaken bundles**, and **editorial tooling** are defaults - not chores.
+- If your team prizes **maintainability and speed** in multi-locale, component-driven React apps, Intlayer offers the **most complete** developer and content workflow today.
 
-Feel free to mix and match approaches to suit your requirements there is no “one-size-fits-all” solution, and each library continues to evolve to address new use cases in the React ecosystem.
+Refer to ['Why Intlayer?' doc](https://intlayer.org/doc/why) for more details.

package/blog/en/vue-i18n_vs_intlayer.md

@@ -0,0 +1,268 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-08-23
+title: vue-i18n vs Intlayer
+description: Compare vue-i18n with Intlayer for internationalization (i18n) in Vue/Nuxt apps
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internationalization
+  - i18n
+  - Blog
+  - Vue
+  - Nuxt
+  - JavaScript
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer
+---
+
+# vue-i18n VS Intlayer | Vue Internationalization (i18n)
+
+This guide compares two popular i18n options for **Vue 3** (and **Nuxt**): **vue-i18n** and **Intlayer**.
+We focus on modern Vue tooling (Vite, Composition API) and evaluate:
+
+1. **Architecture & content organization**
+2. **TypeScript & safety**
+3. **Missing translation handling**
+4. **Routing & URL strategy**
+5. **Performance & loading behavior**
+6. **Developer experience (DX), tooling & maintenance**
+7. **SEO & large-project scalability**
+
+> **tl;dr**: Both can localize Vue apps. If you want **component-scoped content**, **strict TypeScript types**, **build-time missing-key checks**, **tree-shaken dictionaries**, and **batteries-included router/SEO helpers** plus **Visual Editor & AI translations**, **Intlayer** is the more complete, modern choice.
+
+---
+
+## High-level positioning
+
+- **vue-i18n** - The de-facto i18n library for Vue. Flexible message formatting (ICU-style), SFC `<i18n>` blocks for local messages, and a big ecosystem. Safety and large-scale maintenance are mostly on you.
+- **Intlayer** - Component-centric content model for Vue/Vite/Nuxt with **strict TS typing**, **build-time checks**, **tree-shaking**, **router & SEO helpers**, optional **Visual Editor/CMS**, and **AI-assisted translations**.
+
+---
+
+## Side-by-Side Feature Comparison (Vue-focused)
+
+| Feature                                     | **Intlayer**                                                                     | **vue-i18n**                                                                 |
+| ------------------------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| **Translations near components**            | ✅ Yes, content collocated per component (e.g., `MyComp.content.ts`)             | ✅ Yes, via SFC `<i18n>` blocks (optional)                                   |
+| **TypeScript integration**                  | ✅ Advanced, auto-generated **strict** types & key autocompletion                | ✅ Good typings; **strict key safety requires additional setup/disciplines** |
+| **Missing translation detection**           | ✅ **Build-time** warnings/errors and TS surfacing                               | ⚠️ Runtime fallbacks/warnings                                                |
+| **Rich content (components/Markdown)**      | ✅ Direct support for rich nodes and Markdown content files                      | ⚠️ Limited (components via `<i18n-t>`, Markdown via external plugins)        |
+| **AI-powered translation**                  | ✅ Built-in workflows using your own AI provider keys                            | ❌ Not built-in                                                              |
+| **Visual Editor / CMS**                     | ✅ Free Visual Editor & optional CMS                                             | ❌ Not built-in (use external platforms)                                     |
+| **Localized routing**                       | ✅ Helpers for Vue Router/Nuxt to generate localized paths, URLs, and `hreflang` | ⚠️ Not core (use Nuxt i18n or custom Vue Router setup)                       |
+| **Dynamic route generation**                | ✅ Yes                                                                           | ❌ Not provided (Nuxt i18n provides)                                         |
+| **Pluralization & formatting**              | ✅ Enumeration patterns; Intl-based formatters                                   | ✅ ICU-style messages; Intl formatters                                       |
+| **Content formats**                         | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML WIP)                               | ✅ `.json`, `.js` (plus SFC `<i18n>` blocks)                                 |
+| **ICU support**                             | ⚠️ WIP                                                                           | ✅ Yes                                                                       |
+| **SEO helpers (sitemap, robots, metadata)** | ✅ Built-in helpers (framework-agnostic)                                         | ❌ Not core (Nuxt i18n/community)                                            |
+| **SSR/SSG**                                 | ✅ Works with Vue SSR and Nuxt; does not block static rendering                  | ✅ Works with Vue SSR/Nuxt                                                   |
+| **Tree-shaking (ship only used content)**   | ✅ Per-component at build time                                                   | ⚠️ Partial; requires manual code-splitting/async messages                    |
+| **Lazy loading**                            | ✅ Per-locale / per-dictionary                                                   | ✅ Async locale messages supported                                           |
+| **Purge unused content**                    | ✅ Yes (build-time)                                                              | ❌ Not built-in                                                              |
+| **Large-project maintainability**           | ✅ Encourages modular, design-system-friendly structure                          | ✅ Possible, but needs strong file/namespace discipline                      |
+| **Ecosystem / community**                   | ⚠️ Smaller but growing fast                                                      | ✅ Large and mature in the Vue ecosystem                                     |
+
+---
+
+## Deep-dive comparison
+
+### 1) Architecture & scalability
+
+- **vue-i18n**: Common setups use **centralized catalogs** per locale (optionally split into files/namespaces). SFC `<i18n>` blocks allow local messages but teams often revert to shared catalogs as projects grow.
+- **Intlayer**: Promotes **per-component dictionaries** stored next to the component they serve. This reduces cross-team conflicts, keeps content discoverable, and naturally limits drift/unused keys.
+
+**Why it matters:** In large Vue apps or design systems, **modular content** scales better than monolithic catalogs.
+
+---
+
+### 2) TypeScript & safety
+
+- **vue-i18n**: Good TS support; **strict key typing** typically needs custom schemas/generics and careful conventions.
+- **Intlayer**: **Generates strict types** from your content, giving **IDE autocompletion** and **compile-time errors** for typos/missing keys.
+
+**Why it matters:** Strong typing catches issues **before** runtime.
+
+---
+
+### 3) Missing translation handling
+
+- **vue-i18n**: **Runtime** warnings/fallbacks (e.g., fall back locale or key).
+- **Intlayer**: **Build-time** detection with warnings/errors across locales and keys.
+
+**Why it matters:** Build-time enforcement keeps production UI clean and consistent.
+
+---
+
+### 4) Routing & URL strategy (Vue Router/Nuxt)
+
+- **Both** can work with localized routes.
+- **Intlayer** provides helpers to **generate localized paths**, **manage locale prefixes**, and emit **`<link rel="alternate" hreflang>`** for SEO. With Nuxt, it complements the framework’s routing.
+
+**Why it matters:** Fewer custom glue layers and **cleaner SEO** across locales.
+
+---
+
+### 5) Performance & loading behavior
+
+- **vue-i18n**: Supports async locale messages; avoiding over-bundling is on you (split catalogs carefully).
+- **Intlayer**: **Tree-shakes** at build and **lazy-loads per dictionary/locale**. Unused content doesn’t ship.
+
+**Why it matters:** Smaller bundles and faster startup for multi-locale Vue apps.
+
+---
+
+### 6) Developer experience & tooling
+
+- **vue-i18n**: Mature docs and community; you’ll typically rely on **external localization platforms** for editorial workflows.
+- **Intlayer**: Ships a **free Visual Editor**, optional **CMS** (Git-friendly or externalized), a **VSCode extension**, **CLI/CI** utilities, and **AI-assisted translations** using your own provider keys.
+
+**Why it matters:** Lower ops cost and a shorter dev–content loop.
+
+---
+
+### 7) SEO, SSR & SSG
+
+- **Both** work with Vue SSR and Nuxt.
+- **Intlayer**: Adds **SEO helpers** (sitemaps/metadata/`hreflang`) that are framework-agnostic and play nicely with Vue/Nuxt builds.
+
+**Why it matters:** International SEO without bespoke wiring.
+
+---
+
+## Why Intlayer? (Problem & approach)
+
+Most i18n stacks (including **vue-i18n**) start from **centralized catalogs**:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Or with per-locale folders:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+This often slows development as apps grow:
+
+1. **For a new component** you create/edit remote catalogs, wire namespaces, and translate (often via manual copy/paste from AI tools).
+2. **When changing components** you hunt down shared keys, translate, keep locales in sync, remove dead keys, and align JSON structures.
+
+**Intlayer** scopes content **per-component** and keeps it **next to the code**, like we already do with CSS, stories, tests, and docs:
+
+```bash
+.
+└── components
+    └── MyComponent
+        ├── MyComponent.content.ts
+        └── MyComponent.vue
+```
+
+**Content declaration** (per component):
+
+```ts fileName="./components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    greeting: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+**Usage in Vue** (Composition API):
+
+```vue fileName="./components/MyComponent/MyComponent.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+const { greeting } = useIntlayer("component-example");
+</script>
+
+<template>
+  <span>{{ greeting }}</span>
+</template>
+```
+
+This approach:
+
+- **Speeds development** (declare once; IDE/AI autocompletes).
+- **Cleans the codebase** (1 component = 1 dictionary).
+- **Eases duplication/migration** (copy a component and its content together).
+- **Avoids dead keys** (unused components don’t import content).
+- **Optimizes loading** (lazy-loaded components bring their content with them).
+
+---
+
+## Additional features of Intlayer (Vue-relevant)
+
+- **Cross-framework support**: Works with Vue, Nuxt, Vite, React, Express, and more.
+- **JavaScript-powered content management**: Declare in code with full flexibility.
+- **Per-locale declaration file**: Seed all locales and let tooling generate the rest.
+- **Type-safe environment**: Strong TS config with autocompletion.
+- **Simplified content retrieval**: A single hook/composable to fetch all content for a dictionary.
+- **Organized codebase**: 1 component = 1 dictionary in the same folder.
+- **Enhanced routing**: Helpers for **Vue Router/Nuxt** localized paths and metadata.
+- **Markdown support**: Import remote/local Markdown per locale; expose frontmatter to code.
+- **Free Visual Editor & optional CMS**: Authoring without a paid localization platform; Git-friendly sync.
+- **Tree-shakable content**: Ships only what’s used; supports lazy loading.
+- **Static rendering friendly**: Does not block SSG.
+- **AI-powered translations**: Translate to 231 languages using your own AI provider/API key.
+- **MCP server & VSCode extension**: Automate i18n workflows and authoring inside your IDE.
+- **Interoperability**: Bridges with **vue-i18n**, **react-i18next**, and **react-intl** when needed.
+
+---
+
+## When to choose which?
+
+- **Choose vue-i18n** if you want the **standard Vue approach**, you’re comfortable managing catalogs/namespaces yourself, and your app is **small to mid-size** (or you already rely on Nuxt i18n).
+- **Choose Intlayer** if you value **component-scoped content**, **strict TypeScript**, **build-time guarantees**, **tree-shaking**, and **batteries-included** routing/SEO/editor tooling-especially for **large, modular Vue/Nuxt codebases**, design-systems, etc.
+
+---
+
+## Interoperability with vue-i18n
+
+`intlayer` can also help to manage your `vue-i18n` namespaces.
+
+Using `intlayer`, you can declare your content in the format of your favorite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
+
+Refer to [`dictionaryOutput` and `i18nextResourcesDir` options](https://intlayer.org/doc/concept/configuration#content-configuration) for more details.
+
+---
+
+## Conclusion
+
+Both **vue-i18n** and **Intlayer** localize Vue apps well. The difference is **how much you must build yourself** to achieve a robust, scalable setup:
+
+- With **Intlayer**, **modular content**, **strict TS**, **build-time safety**, **tree-shaken bundles**, and **router/SEO/editor tooling** come **out of the box**.
+- If your team prioritizes **maintainability and speed** in a multi-locale, component-driven Vue/Nuxt app, Intlayer offers the **most complete** experience today.
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/doc/why) for more details.

package/blog/en-GB/intlayer_with_next-i18next.md

@@ -1,6 +1,6 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: Intlayer and next-i18next
 description: Integrate Intlayer with next-i18next for a Next.js app
 keywords: