@intlayer/docs 6.1.6-canary.0 → 7.0.0-canary.0

package/docs/en-GB/intlayer_with_astro.md

@@ -0,0 +1,244 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-10-03
+title: How to translate your Astro app – i18n guide 2025
+description: Learn how to add internationalisation (i18n) to your Vite and React application using Intlayer. Follow this guide to make your app multilingual.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Vite
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - astro
+applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+history:
+  - version: 6.2.0
+    date: 2025-10-03
+    changes: Refresh for Astro integration, config, usage
+---
+
+# Getting Started Internationalising (i18n) with Intlayer and Astro
+
+See [Application Template](https://github.com/aymericzip/intlayer-astro-template) on GitHub.
+
+## What is Intlayer?
+
+**Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications.
+
+With Intlayer, you can:
+
+- **Easily manage translations** using declarative dictionaries at the component level.
+- **Dynamically localise metadata**, routes, and content.
+- **Ensure TypeScript support** with autogenerated types, improving autocompletion and error detection.
+- **Benefit from advanced features**, like dynamic locale detection and switching.
+
+---
+
+## Step-by-Step Guide to Set Up Intlayer in Astro
+
+### Step 1: Install Dependencies
+
+Install the necessary packages using your package manager:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+# Optional: add React island support
+npm install react react-dom react-intlayer @astrojs/react
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer astro-intlayer
+# Optional: add React island support
+pnpm add react react-dom react-intlayer @astrojs/react
+```
+
+```bash packageManager="yarn"
+yarn add intlayer astro-intlayer
+# Optional: add React island support
+yarn add react react-dom react-intlayer @astrojs/react
+```
+
+- **intlayer**
+  The core package that provides internationalisation tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/get_started.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md).
+
+- **astro-intlayer**
+  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+
+### Step 2: Configuration of your project
+
+Create a config file to configure the languages of your application:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Your other locales
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+> Through this configuration file, you can set up localised URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
+
+### Step 3: Integrate Intlayer in Your Astro Configuration
+
+Add the intlayer plugin into your configuration.
+
+```typescript fileName="astro.config.ts"
+// @ts-check
+
+import { intlayer } from "astro-intlayer";
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [intlayer()],
+});
+```
+
+> The `intlayer()` Astro integration plugin is used to integrate Intlayer with Astro. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Astro application. Additionally, it provides aliases to optimise performance.
+
+### Step 4: Declare Your Content
+
+Create and manage your content declarations to store translations:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+> Your content declarations can be defined anywhere in your application as soon as they are included in the `contentDir` directory (by default, `./src`). And match the content declaration file extension (by default, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
+
+> For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/get_started.md).
+
+### Step 5: Use your content in Astro
+
+You can consume dictionaries directly in `.astro` files using the core helpers exported by `intlayer`.
+
+```astro fileName="src/pages/index.astro"
+<!-- astro -->
+---
+import { getIntlayer } from "intlayer";
+import appContent from "../app.content";
+
+const { title } = getIntlayer('app');
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <h1>{title}</h1>
+  </body>
+</html>
+```
+
+### Step 6: Localised routing
+
+Create a dynamic route segment to serve localised pages, for example `src/pages/[locale]/index.astro`:
+
+```astro fileName="src/pages/[locale]/index.astro"
+<!-- astro -->
+---
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer('app');
+---
+
+<h1>{title}</h1>
+```
+
+The Astro integration adds a Vite middleware during development that helps with locale-aware routing and environment definitions. You can still link between locales using your own logic, or utility functions like `getLocalizedUrl` from `intlayer`.
+
+### Step 7: Continue using your favourite framework
+
+Continue using your favourite framework to build your application.
+
+- Intlayer + React: [Intlayer with React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+react.md)
+- Intlayer + Vue: [Intlayer with Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+vue.md)
+- Intlayer + Svelte: [Intlayer with Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+svelte.md)
+- Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+solid.md)
+- Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+preact.md)
+
+### Configure TypeScript
+
+Intlayer uses module augmentation to benefit from TypeScript and strengthen your codebase.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Ensure your TypeScript configuration includes the autogenerated types.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Your existing TypeScript configurations
+  "include": [
+    // ... Your existing TypeScript configurations
+    ".intlayer/**/*.ts", // Include the auto-generated types
+  ],
+}
+```
+
+### Git Configuration
+
+It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
+
+To do this, you can add the following instructions to your `.gitignore` file:
+
+```plaintext
+# Ignore the files generated by Intlayer
+.intlayer
+```
+
+### VS Code Extension
+
+To enhance your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
+
+[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+This extension provides:
+
+- **Autocompletion** for translation keys.
+- **Real-time error detection** for missing translations.
+- **Inline previews** of translated content.
+- **Quick actions** to easily create and update translations.
+
+For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
+
+---
+
+### Go Further
+
+To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) or externalise your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md).
+
+---

package/docs/en-GB/intlayer_with_create_react_app.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-08-11
 updatedAt: 2025-06-29
-title: Translate your Create React App (CRA) website (i18n)
+title: How to translate your React Create App – i18n guide 2025
 description: Discover how to make your Create React App (CRA) website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
@@ -16,9 +16,13 @@ slugs:
   - environment
   - create-react-app
 applicationTemplate: https://github.com/aymericzip/intlayer-react-cra-template
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
-# Getting Started Internationalizing (i18n) with Intlayer and React Create App
+# Translate your Create React App website using Intlayer | Internationalization (i18n)
 
 See [Application Template](https://github.com/aymericzip/intlayer-react-cra-template) on GitHub.
 
@@ -1307,9 +1311,10 @@ By applying these changes, your application will:
 
 Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
 module.exports = App;
 
 By applying these changes, your application will:
@@ -1322,9 +1327,9 @@ By applying these changes, your application will:
 
 Intlayer uses module augmentation to get the benefits of TypeScript and make your codebase stronger.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure your TypeScript configuration includes the autogenerated types.
 
@@ -1366,7 +1371,3 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 ### Go Further
 
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) or externalise your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md).
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/intlayer_with_express.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-08-11
 updatedAt: 2025-06-29
-title: Translate your Express backend (i18n)
+title: How to translate your Express backend – i18n guide 2025
 description: Discover how to make your vite backend multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
@@ -14,9 +14,13 @@ slugs:
   - doc
   - environment
   - express
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
-# Getting Started internationalizing (i18n) with Intlayer and Express
+# Translate your Express backend using Intlayer | Internationalization (i18n)
 
 `express-intlayer` is a powerful internationalization (i18n) middleware for Express applications, designed to make your backend services globally accessible by providing localized responses based on the client's preferences.
 
@@ -369,9 +373,9 @@ By default, `express-intlayer` will interpret the `Accept-Language` header to de
 
 `express-intlayer` leverages the robust capabilities of TypeScript to enhance the internationalisation process. TypeScript's static typing ensures that every translation key is accounted for, reducing the risk of missing translations and improving maintainability.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure the autogenerated types (by default at ./types/intlayer.d.ts) are included in your tsconfig.json file.
 
@@ -429,7 +433,3 @@ To do this, you can add the following instructions to your `.gitignore` file:
 # Ignore the files generated by Intlayer
 .intlayer
 ```
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/intlayer_with_lynx+react.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-03-09
 updatedAt: 2025-06-29
-title: Translate your Lynx and React mobile app (i18n)
+title: How to translate your Lynx mobile app – i18n guide 2025
 description: Discover how to make your Lynx and React mobile app multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
   - Internationalisation
@@ -16,6 +16,10 @@ slugs:
   - environment
   - lynx-and-react
 applicationTemplate: https://github.com/aymericzip/intlayer-lynx-template
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
 # Getting Started Internationalising (i18n) with Intlayer and Lynx and React
@@ -546,7 +550,3 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 - **CLI Commands**: Explore the [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md) for tasks like **extracting translations** or **checking missing keys**.
 
 ---
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/intlayer_with_nestjs.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-09-09
 updatedAt: 2025-09-09
-title: Translate your Nest backend (i18n)
+title: How to translate your Nest backend – i18n guide 2025
 description: Discover how to make your vite backend multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
   - Internationalisation
@@ -16,6 +16,10 @@ slugs:
   - nest
 applicationTemplate: https://github.com/AydinTheFirst/nestjs-intlayer
 author: AydinTheFirst
+history:
+  - version: 5.8.0
+    date: 2025-09-09
+    changes: Initial doc
 ---
 
 # Getting Started internationalising (i18n) with Intlayer and NestJS
@@ -219,9 +223,9 @@ By default, `express-intlayer` will interpret the `Accept-Language` header to de
 
 `express-intlayer` leverages the robust capabilities of TypeScript to enhance the internationalisation process. TypeScript's static typing ensures that every translation key is accounted for, reducing the risk of missing translations and improving maintainability.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure the autogenerated types (by default at ./types/intlayer.d.ts) are included in your tsconfig.json file.
 
@@ -260,9 +264,3 @@ To do this, you can add the following instructions to your `.gitignore` file:
 # Ignore the files generated by Intlayer
 .intlayer
 ```
-
-## Doc History
-
-| Version | Date       | Changes     |
-| ------- | ---------- | ----------- |
-| 5.8.0   | 2025-09-09 | Initial doc |

package/docs/en-GB/intlayer_with_nextjs_14.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-12-06
 updatedAt: 2025-06-29
-title: Translate your Next.js 14 and App Router website (i18n)
+title: How to translate your Next.js 14 app – i18n guide 2025
 description: Discover how to make your Next.js 14 App Router website multilingual. Follow the documentation to internationalize (i18n) and translate it.
 keywords:
   - Internationalization
@@ -16,9 +16,13 @@ slugs:
   - nextjs
   - 14
 applicationTemplate: https://github.com/aymericzip/intlayer-next-14-template
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
-# Getting Started internationalizing (i18n) with Intlayer and Next.js 14 with App Router
+# Translate your Next.js 14 and App Router website using Intlayer | Internationalization (i18n)
 
 See [Application Template](https://github.com/aymericzip/intlayer-next-14-template) on GitHub.
 
@@ -58,7 +62,7 @@ yarn add intlayer next-intlayer
 
 - **intlayer**
 
-  The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/get_started.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_cli.md).
+  The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_cli.md).
 
 - **next-intlayer**
 
@@ -397,7 +401,7 @@ module.exports = pageContent;
 
 > Your content declarations can be defined anywhere in your application as soon they are included into the `contentDir` directory (by default, `./src`). And match the content declaration file extension (by default, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
-> For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/get_started.md).
+> For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
 ### Step 7: Utilize Content in Your Code
 
@@ -1407,9 +1411,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure your TypeScript configuration includes the autogenerated types.
 
@@ -1452,7 +1456,3 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 ### Go Further
 
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/intlayer_with_nextjs_15.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-12-06
 updatedAt: 2025-06-29
-title: Translate your Next.js 15 website (i18n)
+title: How to translate your 15 app – i18n guide 2025
 description: Discover how to make your Next.js 15 website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
   - Internationalisation
@@ -14,8 +14,13 @@ slugs:
   - doc
   - environment
   - nextjs
+  - 15
 applicationTemplate: https://github.com/aymericzip/intlayer-next-15-template
 youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
 # Getting Started internationalising (i18n) with Intlayer and Next.js 15 App Router
@@ -1482,9 +1487,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayer uses module augmentation to benefit from TypeScript and make your codebase stronger.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure your TypeScript configuration includes the autogenerated types.
 
@@ -1527,7 +1532,3 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 ### Go Further
 
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) or externalise your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md).
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/intlayer_with_nextjs_page_router.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-12-07
 updatedAt: 2025-06-29
-title: Translate your Next.js and Page Router website (i18n)
+title: How to translate your Next.js (Page Router) app – i18n guide 2025
 description: Discover how to make your Next.js using Page Router website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
   - Internationalisation
@@ -16,6 +16,10 @@ slugs:
   - environment
   - nextjs
   - next-with-page-router
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
 # Getting Started Internationalising (i18n) with Intlayer and Next.js using Page Router
@@ -1434,9 +1438,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayer uses module augmentation to leverage the benefits of TypeScript and strengthen your codebase.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure your TypeScript configuration includes the autogenerated types.
 
@@ -1487,7 +1491,3 @@ By following this guide, you can effectively integrate Intlayer into your Next.j
 ### Go Further
 
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/{{locale}}/intlayer_visual_editor.md) or externalise your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/{{locale}}/intlayer_CMS.md).
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/intlayer_with_nuxt.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-06-18
 updatedAt: 2025-06-29
-title: Translate your Nuxt and Vue website (i18n)
+title: How to translate your Nuxt app – i18n guide 2025
 description: Discover how to make your Nuxt and Vue website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
   - Internationalisation
@@ -15,6 +15,10 @@ slugs:
   - environment
   - nuxt-and-vue
 applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-template
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Init history
 ---
 
 # Getting Started Internationalising (i18n) with Intlayer and Nuxt
@@ -753,9 +757,9 @@ module.exports = aboutMetaContent;
 
 Intlayer uses module augmentation to gain the benefits of TypeScript and strengthen your codebase.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Ensure your TypeScript configuration includes the autogenerated types.
 
@@ -802,7 +806,3 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) or externalise your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md).
 
 ---
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history