@intlayer/docs 5.5.8 → 5.5.10

package/de/intlayer_with_react_native+expo.md

@@ -20,15 +20,18 @@ Mit Intlayer können Sie:
 Installieren Sie die folgenden Pakete aus Ihrem React Native-Projekt:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer react-native-intlayer
+npm install intlayer react-intlayer
+npm install --save-dev react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer react-native-intlayer
+pnpm add intlayer react-intlayer
+pnpm add --save-dev react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer react-native-intlayer
+yarn add intlayer react-intlayer
+yarn add --save-dev react-native-intlayer
 ```
 
 ### Pakete

package/de/intlayer_with_vite+preact.md

@@ -24,15 +24,18 @@ Mit Intlayer können Sie:
 Installieren Sie die erforderlichen Pakete mit npm:
 
 ```bash packageManager="npm"
-npm install intlayer preact-intlayer vite-intlayer
+npm install intlayer preact-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer preact-intlayer vite-intlayer
+pnpm add intlayer preact-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer preact-intlayer vite-intlayer
+yarn add intlayer preact-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -531,13 +534,7 @@ module.exports = App;
 > Wenn Sie Ihren Inhalt in einem `string`-Attribut wie `alt`, `title`, `href`, `aria-label` usw. verwenden möchten, müssen Sie den Wert der Funktion aufrufen, wie:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Hinweis: In Preact wird `className` typischerweise als `class` geschrieben.
@@ -1274,23 +1271,15 @@ module.exports = LocaleSwitcher;
 ```
 
 > Dokumentationsreferenzen:
-
+>
 > - [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/react-intlayer/useLocale.md) (API ist ähnlich für `preact-intlayer`)
-
 > - [`getLocaleName` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hreflang` Attribut](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [`lang` Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` Attribut](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-
 > - [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
 
 Unten ist der aktualisierte **Schritt 9** mit zusätzlichen Erklärungen und verfeinerten Codebeispielen:

package/de/intlayer_with_vite+react.md

@@ -24,15 +24,18 @@ Mit Intlayer können Sie:
 Installieren Sie die erforderlichen Pakete mit npm:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer vite-intlayer
+npm install intlayer react-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer vite-intlayer
+pnpm add intlayer react-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer vite-intlayer
+yarn add intlayer react-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -529,13 +532,7 @@ module.exports = App;
 > Wenn Sie Ihren Inhalt in einem `string`-Attribut wie `alt`, `title`, `href`, `aria-label` usw. verwenden möchten, müssen Sie den Wert der Funktion aufrufen, wie:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Um mehr über den `useIntlayer`-Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/react-intlayer/useIntlayer.md).
@@ -1214,21 +1211,14 @@ const LocaleSwitcher = () => {
 ```
 
 > Dokumentationsreferenzen:
-
+>
 > - [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/react-intlayer/useLocale.md)
-
 > - [`getLocaleName` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` Attribut](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [`lang` Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` Attribut](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ---

package/de/intlayer_with_vite+vue.md

@@ -24,15 +24,18 @@ Mit Intlayer können Sie:
 Installieren Sie die notwendigen Pakete mit npm:
 
 ```bash packageManager="npm"
-npm install intlayer vue-intlayer vite-intlayer
+npm install intlayer vue-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer vue-intlayer vite-intlayer
+pnpm add intlayer vue-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer vue-intlayer vite-intlayer
+yarn add intlayer vue-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -259,52 +262,60 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
----
-
+```javascript fileName="src/helloWorld.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
 
-/\*_ @type {import('intlayer').Dictionary} _/
+/** @type {import('intlayer').Dictionary} */
 const appContent = {
-key: "helloworld",
-content: {
-count: t({ de: "Anzahl ist ", en: "count is ", fr: "le compte est ", es: "el recuento es " }),
-edit: t({
-de: "Bearbeiten Sie <code>components/HelloWorld.vue</code> und speichern Sie, um HMR zu testen",
-en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-}),
-checkOut: t({ de: "Schauen Sie sich ", en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
-officialStarter: t({
-de: "den offiziellen Vue + Vite Starter",
-en: "the official Vue + Vite starter",
-fr: "le starter officiel Vue + Vite",
-es: "el starter oficial Vue + Vite",
-}),
-learnMore: t({
-de: "Erfahren Sie mehr über die IDE-Unterstützung für Vue im ",
-en: "Learn more about IDE Support for Vue in the ",
-fr: "En savoir plus sur le support IDE pour Vue dans le ",
-es: "Aprenda más sobre el soporte IDE para Vue en el ",
-}),
-vueDocs: t({
-de: "Vue-Dokumentation Skalierungsleitfaden",
-en: "Vue Docs Scaling up Guide",
-fr: "Vue Docs Scaling up Guide",
-es: "Vue Docs Scaling up Guide",
-}),
-readTheDocs: t({
-de: "Klicken Sie auf die Vite- und Vue-Logos, um mehr zu erfahren",
-en: "Click on the Vite and Vue logos to learn more",
-fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
-es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
-}),
-},
+  key: "helloworld",
+  content: {
+    count: t({
+      de: "Anzahl ist ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t({
+      de: "Bearbeiten Sie <code>components/HelloWorld.vue</code> und speichern Sie, um HMR zu testen",
+      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
+      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
+      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
+    }),
+    checkOut: t({
+      de: "Schauen Sie sich ",
+      en: "Check out ",
+      fr: "Vérifiez ",
+      es: "Compruebe ",
+    }),
+    officialStarter: t({
+      de: "den offiziellen Vue + Vite Starter",
+      en: "the official Vue + Vite starter",
+      fr: "le starter officiel Vue + Vite",
+      es: "el starter oficial Vue + Vite",
+    }),
+    learnMore: t({
+      de: "Erfahren Sie mehr über die IDE-Unterstützung für Vue im ",
+      en: "Learn more about IDE Support for Vue in the ",
+      fr: "En savoir plus sur le support IDE pour Vue dans le ",
+      es: "Aprenda más sobre el soporte IDE para Vue en el ",
+    }),
+    vueDocs: t({
+      de: "Vue-Dokumentation Skalierungsleitfaden",
+      en: "Vue Docs Scaling up Guide",
+      fr: "Vue Docs Scaling up Guide",
+      es: "Vue Docs Scaling up Guide",
+    }),
+    readTheDocs: t({
+      de: "Klicken Sie auf die Vite- und Vue-Logos, um mehr zu erfahren",
+      en: "Click on the Vite and Vue logos to learn more",
+      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
+      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
+    }),
+  },
 };
 
 module.exports = appContent;
-
-````
+```
 
 ```json fileName="src/helloWorld.content.json" contentDeclarationFormat="json"
 {
@@ -376,7 +387,7 @@ module.exports = appContent;
     }
   }
 }
-````
+```
 
 > Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im Verzeichnis `contentDir` enthalten sind (standardmäßig `./src`). Und sie müssen mit der Dateierweiterung der Inhaltsdeklaration übereinstimmen (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
@@ -444,23 +455,35 @@ const count = ref(0);
 </template>
 ```
 
-> Wenn Sie Ihren Inhalt in einem Attribut wie `alt`, `title`, `href`, `aria-label` usw. verwenden möchten, müssen Sie den Wert der Funktion mit `.value` aufrufen, wie:
-
-> ```html
->
-> ```
-
-> <img src="./logo.svg" :alt="content.image.value" />
-
-> ```
->
-> ```
-
-### (Optional) Schritt 6: Ändern Sie die Sprache Ihres Inhalts
-
-Um die Sprache Ihres Inhalts zu ändern, können Sie die Funktion `setLocale` verwenden, die vom `useLocale`-Composable bereitgestellt wird. Diese Funktion ermöglicht es Ihnen, die Sprache der Anwendung festzulegen und den Inhalt entsprechend zu aktualisieren.
-
-Erstellen Sie eine Komponente, um zwischen Sprachen zu wechseln:
+#### Zugriff auf Inhalte in Intlayer Intlayer bietet verschiedene APIs für
+
+den Zugriff auf Ihre Inhalte: - **Komponentenbasierte Syntax** (empfohlen):
+Verwenden Sie die Syntax `<meinInhalt />` oder `<Component :is="meinInhalt" />`, um Inhalte als Intlayer-Knoten zu rendern. Dies lässt sich nahtlos in den
+[Visuellen
+Editor](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_visual_editor.md)
+und das
+[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_CMS.md)
+integrieren. - **Zeichenkettenbasierte Syntax**: Verwenden Sie `{{
+  meinInhalt
+}}`, um den Inhalt als reinen Text ohne Unterstützung des Visuellen Editors zu
+rendern. - **Rohe HTML-Syntax**: Verwenden Sie `
+
+<div v-html="meinInhalt" />
+`, um den Inhalt als rohes HTML ohne Unterstützung des Visuellen Editors zu
+rendern. - **Destrukturierungssyntax**: Das `useIntlayer`-Composable gibt einen
+Proxy mit dem Inhalt zurück. Dieser Proxy kann destrukturiert werden, um auf den
+Inhalt zuzugreifen und dabei die Reaktivität beizubehalten. - Verwenden Sie
+`const content = useIntlayer("meinInhalt");` und `{{ content.meinInhalt }}` / `
+<content.meinInhalt />
+`. - Oder verwenden Sie `const { meinInhalt } = useIntlayer("meinInhalt");` und
+`{{ meinInhalt }}` / `
+<meinInhalt />
+`, um den Inhalt zu destrukturieren. ### (Optional) Schritt 6: Ändern Sie die
+Sprache Ihres Inhalts Um die Sprache Ihres Inhalts zu ändern, können Sie die
+`setLocale`-Funktion verwenden, die vom `useLocale`-Composable bereitgestellt
+wird. Mit dieser Funktion können Sie die Locale der Anwendung festlegen und den
+Inhalt entsprechend aktualisieren. Erstellen Sie eine Komponente, um zwischen
+Sprachen zu wechseln:
 
 ```vue fileName="src/components/LocaleSwitcher.vue"
 <template>
@@ -531,7 +554,6 @@ Beispiel:
 
 ```plaintext
 - https://example.com/about
-
 - https://example.com/de/about
 - https://example.com/fr/about
 ```

package/de/packages/nuxt-intlayer/index.md

@@ -0,0 +1,29 @@
+**Intlayer** ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurde. Es ist kompatibel mit Frameworks wie Vue, Vue und Express.js.
+
+**Das `nuxt-intlayer`-Paket** ermöglicht es Ihnen, Ihre Vue-Anwendung zu internationalisieren. Es bietet Kontextanbieter und Hooks für die Internationalisierung in Vue.
+
+## Warum Ihre Vue-Anwendung internationalisieren?
+
+Die Internationalisierung Ihrer Vue-Anwendung ist entscheidend, um ein globales Publikum effektiv zu bedienen. Sie ermöglicht es Ihrer Anwendung, Inhalte und Nachrichten in der bevorzugten Sprache jedes Benutzers bereitzustellen. Diese Fähigkeit verbessert die Benutzererfahrung und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen sprachlichen Hintergründen zugänglicher und relevanter wird.
+
+## Warum Intlayer integrieren?
+
+- **JavaScript-gesteuertes Content-Management**: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
+- **Typensicheres Umfeld**: Verwenden Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
+- **Integrierte Inhaltsdateien**: Halten Sie Ihre Übersetzungen nah an ihren jeweiligen Komponenten, um die Wartbarkeit und Klarheit zu verbessern.
+
+## Installation
+
+Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:
+
+```bash packageManager="npm"
+npm install nuxt-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add nuxt-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add nuxt-intlayer
+```

package/de/roadmap.md

@@ -14,7 +14,7 @@ Intlayer ist eine Lösung für Content-Management und Internationalisierung, die
 - **Verteilt**: Alternativ können Sie Ihre Inhalte in separate Dateien auf Komponenten- oder Funktionsebene aufteilen, um die Wartbarkeit zu verbessern. Dadurch bleiben Ihre Inhalte in der Nähe des relevanten Codes (Komponenten, Tests, Storybook usw.). Das Entfernen einer Komponente stellt sicher, dass alle zugehörigen Inhalte ebenfalls entfernt werden, wodurch verhindert wird, dass verbleibende Daten Ihren Code verunreinigen.
 
 > Ressourcen:
-
+>
 > - [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/de/dictionary/get_started.md)
 
 ### 2. Internationalisierung
@@ -23,7 +23,7 @@ Intlayer ist eine Lösung für Content-Management und Internationalisierung, die
 - Verwalten Sie Übersetzungen für all diese Regionen einfach an einem Ort.
 
 > Ressourcen:
-
+>
 > - [Internationalisierung](https://github.com/aymericzip/intlayer/blob/main/docs/de/dictionary/translation.md)
 
 ### 3. Markdown-Unterstützung
@@ -32,7 +32,7 @@ Intlayer ist eine Lösung für Content-Management und Internationalisierung, die
 - Ideal für Blogbeiträge, Artikel, Dokumentationsseiten oder jede Situation, in der eine reichhaltige Textformatierung erforderlich ist.
 
 > Ressourcen:
-
+>
 > - [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/de/dictionary/markdown.md)
 
 ### 4. Bedingte Darstellung
@@ -41,7 +41,7 @@ Intlayer ist eine Lösung für Content-Management und Internationalisierung, die
 - Hilft, personalisierte Erlebnisse zu schaffen, ohne Inhalte über mehrere Dateien zu duplizieren.
 
 > Ressourcen:
-
+>
 > - [Bedingte Darstellung](https://github.com/aymericzip/intlayer/blob/main/docs/de/dictionary/condition.md)
 
 ### 5. Formate für Inhaltsdeklaration
@@ -86,7 +86,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Vollständig kompatibel mit dem neuen Next.js Turbopack sowie dem traditionellen Webpack.
 
 > Ressourcen:
-
+>
 > - [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_nextjs_15.md)
 
 ### 2. Vite
@@ -94,7 +94,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Ähnlich wie bei Next.js können Sie Intlayer mit Vite integrieren und eine **Middleware** verwenden, um Benutzer basierend auf ihrer bevorzugten Sprache weiterzuleiten.
 
 > Ressourcen:
-
+>
 > - [Vite](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_vite+react.md)
 
 ### 3. Express
@@ -103,7 +103,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Personalisieren Sie E-Mails, Fehlermeldungen, Push-Benachrichtigungen und mehr mit lokalisierten Texten.
 
 > Ressourcen:
-
+>
 > - [Express](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_express.md)
 
 ---
@@ -120,7 +120,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Kann lokal gehostet oder auf einem Remote-Server bereitgestellt werden.
 
 > Ressourcen:
-
+>
 > - [Visueller Editor](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_visual_editor.md)
 
 ### 2. Intlayer CMS (Remote)
@@ -130,7 +130,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Interagieren Sie mit Ihren Inhalten über Ihre Live-Anwendungsschnittstelle.
 
 > Ressourcen:
-
+>
 > - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_CMS.md)
 
 ---
@@ -142,7 +142,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Nützlich für **CI/CD-Pipelines**, um sicherzustellen, dass Ihre Inhalte immer mit Ihrem Code synchronisiert sind.
 
 > Ressourcen:
-
+>
 > - [CLI](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_cli.md)
 
 ---
@@ -159,7 +159,7 @@ Intlayer unterstützt **TypeScript** (auch JavaScript) und **JSON** für die Dek
 - Bei Verwendung von Remote-Wörterbüchern und dem Intlayer CMS können Sie die Inhalte Ihrer Anwendung **sofort aktualisieren**, ohne eine erneute Bereitstellung vornehmen zu müssen.
 
 > Ressourcen:
-
+>
 > - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_CMS.md)
 
 ---

package/en/autoFill.md

@@ -67,9 +67,8 @@ src/components/example/example.filled.content.ts
 ```
 
 > The generation of `.js`, `.ts`, and similar files works as follows:
-
+>
 > - If the file already exists, Intlayer will parse it using the AST (Abstract Syntax Tree) to locate each field and insert any missing translations.
-
 > - If the file does not exist, Intlayer will generate it using the default content declaration file template.
 
 ## Absolute Paths

package/en/how_works_intlayer.md

@@ -67,7 +67,7 @@ Intlayer allows you to declare content locally, and then export them to the CMS
 
 So you will be able to push and pull content from the CMS to your application, in a similar way to what you do with Git for your code.
 
-If configured on your project, Intlayer will automatically manage for you the fetch of the content from the CMS when the application starts (dev) / builds (prod).
+For externalized dictionaries using the CMS, Intlayer performs a basic fetch operation to retrieve distant dictionaries and merges them with your local ones. If configured on your project, Intlayer will automatically manage the fetching of the content from the CMS when the application starts (dev) / builds (prod).
 
 ## Visual editor
 
@@ -75,13 +75,19 @@ Intlayer also provides a visual editor to allow you to edit your content in a vi
 
 ![visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
 
+- The server is a simple Express application that listens to requests from the client and retreives the content of your application, such as the `dictionaries` and the configuration to make it accessible on the client side.
+- On the other hand, the client is a React application that is used to interact with your content using a visual interface.
+
+When you call your content using `useIntlayer` and the editor is enabled, it automatically wraps your strings with an Proxy object named `IntlayerNode`. This node uses `window.sendMessage` to communicate with a wrapped iframe containing the visual editor interface.
+On the editor side, the editor listens to these messages and simulates real interaction with your content, allowing you to edit text directly in your application's context.
+
 ## App build optimization
 
 To optimize the bundle size of your application, Intlayer provides two plugins to optimize the build of your application: `@intlayer/babel` and `@intlayer/swc` plugins.
 
-In development mode, Intlayer uses a centralized static import for dictionaries to simplify the development experience.
+The Babel and SWC plugins work by analyzing your application's Abstract Syntax Tree (AST) to replace calls of Intlayer functions with optimized code. This process makes your final bundle lighter in production by ensuring that only the dictionaries that are actually used are imported, optimizing chunking and reducing bundle size.
 
-By optimizing the build, Intlayer will replace all calls of dictionaries to optimize chunking. That way the final bundle will import only the dictionaries that are used.
+In development mode, Intlayer uses a centralized static import for dictionaries to simplify the development experience.
 
 By activating the option `activateDynamicImport` in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md), Intlayer will use the dynamic import to load the dictionaries. This option is disabled by default to avoid async processing when rendering the application.
 
@@ -113,6 +119,10 @@ The `next-intlayer` package is used as a layer on top of `react-intlayer` to mak
 
 The `vue-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Vue applications.
 
+### nuxt-intlayer
+
+The `nuxt-intlayer` package is as Nuxt module to make Intlayer dictionaries usable in Nuxt applications. It integrates essential features to make Intlayer work in a Nuxt environment, such as translation middleware, routing, or the `nuxt.config.js` file configuration.
+
 ### svelte-intlayer (WIP)
 
 The `svelte-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Svelte applications.
@@ -178,6 +188,10 @@ The `@intlayer/webpack` package is used to provide a Webpack configuration to ma
 
 The `@intlayer/cli` package is an NPM package that is used to declare the scripts related to the Intlayer command line interfaces. It ensures the uniformity of all Intlayer CLI commands. This package is notably consumed by the [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/en/packages/intlayer-cli/index.md), and the [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/en/packages/intlayer/index.md) packages.
 
+### @intlayer/mcp
+
+The `@intlayer/mcp` package provides an MCP (Model Context Protocol) server that delivers AI-powered IDE assistance tailored for the Intlayer ecosystem. It automatically loads documentation and integrates with the Intlayer CLI.
+
 ### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
 
 The `@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` and `@intlayer/dynamic-dictionaries-entry` packages return the entry path of the Intlayer dictionaries. Since searching the filesystem from the browser is impossible, using bundlers like Webpack or Rollup to retrieve the entry path of the dictionaries is not possible. These packages are designed to be aliased, allowing for bundling optimization across various bundlers such as Vite, Webpack, and Turbopack.