@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/en-GB/migration_from_vue-i18n_to_intlayer.md

@@ -0,0 +1,359 @@
+---
+createdAt: 2026-06-05
+updatedAt: 2026-06-05
+title: "Migrate from vue-i18n to Intlayer | Internationalization (i18n)"
+description: "Learn how to migrate your Vue or Nuxt app from vue-i18n to Intlayer — step by step, without breaking your existing code. Use the @intlayer/vue-i18n compat adapter for a zero-disruption transition."
+keywords:
+  - vue-i18n
+  - intlayer
+  - migration
+  - internationalization
+  - i18n
+  - Nuxt
+  - Vue
+  - JavaScript
+slugs:
+  - doc
+  - migration
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-05
+    changes: "Init history"
+author: aymericzip
+---
+
+# Migrating from vue-i18n to Intlayer
+
+## Why migrate from vue-i18n to Intlayer?
+
+<AccordionGroup>
+
+<Accordion header="Bundle size">
+
+Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
+
+</Accordion>
+
+<Accordion header="Maintainability">
+
+Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
+
+Intlayer is also the solution with the **most active development** in the i18n ecosystem — issues are fixed fast, new framework adapters land regularly, and the core API is continuously refined based on real-world production feedback.
+
+</Accordion>
+
+<Accordion header="AI Agent">
+
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+
+</Accordion>
+
+<Accordion header="Automation">
+
+Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md) to help **translate in the background**.
+
+</Accordion>
+
+<Accordion header="Performance">
+
+Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimises your content loading at build time.
+
+</Accordion>
+
+<Accordion header="Scaling with non-dev">
+
+More than just an i18n solution, Intlayer provides a **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
+
+</Accordion>
+
+</AccordionGroup>
+
+---
+
+## Migration strategies
+
+There are two complementary strategies for migrating from `vue-i18n` to Intlayer:
+
+1. **Compat adapter (recommended for existing apps)** — Install `@intlayer/vue-i18n` (for Vue components). This package exposes the **exact same API** as `vue-i18n` but delegates all translation work to Intlayer under the hood. You keep your existing `$t`, `useI18n()`, and `<i18n-t>` calls — the only change is the import path and initialisation.
+
+2. **Full migration** — Gradually replace `vue-i18n` APIs with native Intlayer hooks (`useIntlayer`) and co-locate content in `.content.ts` files alongside your components.
+
+This guide covers **Strategy 1** first (drop-in compat adapter), then walks through the optional full migration.
+
+---
+
+## Table of Contents
+
+<TOC/>
+
+---
+
+## Quick migration
+
+The following steps are the minimum required to get your existing `vue-i18n` app running on Intlayer with zero code changes in your components.
+
+<Steps>
+
+<Step number={1} title="Install Dependencies">
+
+Install the Intlayer core packages and the compat adapter:
+
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> the `--interactive` flag is optional. Use `intlayer-cli init` if you're an AI agent.
+
+> This command will detect your environment and install the required packages. For example:
+
+```bash packageManager="npm"
+npm install intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+> You can keep `vue-i18n` installed — the compat adapter uses it as a `devDependency` / `peerDependency` for TypeScript types.
+
+</Step>
+
+<Step number={2} title="Configure Intlayer">
+
+The `intlayer init` command creates a starter `intlayer.config.ts`. Update it to match your existing locales and point the `syncJSON` plugin at your message files:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Add all your existing locales here
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      // matches vue-i18n placeholder syntax: {name}
+      format: "icu",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+};
+
+export default config;
+```
+
+> **`source`** maps a locale to its JSON file path. **`location`** tells the Intlayer watcher which folder to monitor for changes. The `format: 'icu'` option ensures that placeholders are parsed correctly for `vue-i18n`.
+
+</Step>
+
+<Step number={3} title="Add the Intlayer Plugin to your Bundler">
+
+Wrap your existing bundler config with the compat plugin. It composes the core Intlayer plugin, wires up content watching, and — critically — **injects a module alias** so that your existing `import … from 'vue-i18n'` calls are transparently redirected to `@intlayer/vue-i18n` at build time. No source file changes are needed.
+
+**For Vite:**
+
+```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+> `vueI18nVitePlugin()` wraps `vite-intlayer`'s `intlayer()` plugin and adds the `vue-i18n` alias. Using the plain `intlayer()` plugin from `vite-intlayer` compiles dictionaries but does **not** add the alias — you would then rename imports to `@intlayer/vue-i18n` manually (see Step 4).
+
+**For Nuxt:**
+
+If you are using `@nuxtjs/i18n` (Nuxt integration), install `nuxt-intlayer` and add it to your `nuxt.config.ts`:
+
+```bash packageManager="npm"
+npm install nuxt-intlayer
+```
+
+```typescript fileName="nuxt.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+export default defineNuxtConfig({
+  modules: ["nuxt-intlayer"],
+  // You can safely remove @nuxtjs/i18n from your modules
+});
+```
+
+> **You no longer need `createI18n()` or manual provider bootstrapping.** Intlayer compiles all dictionaries at **build time**, so there is no runtime loading step. The aliased provider handles initialisation for you.
+
+</Step>
+
+</Steps>
+
+That's it for the quick migration. Your app now runs on Intlayer while keeping every `vue-i18n` import and API intact.
+
+> **Typed translation keys — automatic.** Once Intlayer compiles your dictionaries, `useI18n` is typed against your actual content when you pass a `namespace` option. Keys are autocompleted in your IDE and invalid paths cause TypeScript errors at build time — no extra setup required.
+>
+> ```ts
+> // 'about' is a registered dictionary key
+> const { t } = useI18n({ namespace: "about" });
+> t("counter.label"); // ✓ autocompleted
+> t("does.not.exist"); // ✗ TypeScript error
+> ```
+
+---
+
+## Complete migration
+
+The steps below are optional and can be done incrementally. They unlock the full Intlayer feature set: visual editor, CMS, typed content files, AI-powered translation, and more.
+
+<Steps>
+
+<Step number={4} title="Explicit import renaming (optional)" isOptional={true}>
+
+The Intlayer plugins already handle aliasing at the bundler level. If you prefer to make the dependency explicit in your source files, you can rename imports manually:
+
+| Before                                  | After                                             |
+| --------------------------------------- | ------------------------------------------------- |
+| `import { useI18n } from 'vue-i18n'`    | `import { useI18n } from '@intlayer/vue-i18n'`    |
+| `import { createI18n } from 'vue-i18n'` | `import { createI18n } from '@intlayer/vue-i18n'` |
+
+These are **drop-in replacements** — no changes to call signatures, arguments, or return types are required.
+
+</Step>
+
+<Step number={5} title="Enable AI-Powered Translation Automation" isOptional={true}>
+
+Once Intlayer is wired up, use its CLI to fill missing translations automatically:
+
+```bash packageManager="npm"
+# Test for missing translations (add to CI)
+npx intlayer test
+
+# Fill missing translations with AI
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer test
+pnpm intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn intlayer test
+yarn intlayer fill
+```
+
+```bash packageManager="bun"
+bun x intlayer test
+bun x intlayer fill
+```
+
+Add the AI configuration to `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+    // provider: "openai",     // default
+    // model: "gpt-4o-mini",   // default
+  },
+};
+
+export default config;
+```
+
+> See [Intlayer CLI documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/index.md) for all available options.
+
+</Step>
+
+</Steps>
+
+---
+
+## What you can delete after migration
+
+Once the compat adapters are in place, the following `vue-i18n` boilerplate can be removed:
+
+| File / pattern                            | Why it's no longer needed                                                                                                                    |
+| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `createI18n()` calls                      | Intlayer's provider initialises everything automatically; there is no runtime loading step.                                                  |
+| Vue plugin registration (`app.use(i18n)`) | The Intlayer plugin handles injection and bootstrapping under the hood.                                                                      |
+| JSON language bundles (`locales/*.json`)  | JSON bundles are only needed if you still use the `syncJSON` plugin. Once you migrate to `.content.ts` files you can delete the JSON folder. |
+
+When you are ready to go further, Intlayer **automatically discovers all `.content.ts` and `.content.json` files anywhere in your codebase** (by default, anywhere inside `./src`). You can place a `my-component.content.ts` file right next to your `MyComponent.vue` and Intlayer will pick it up at build time with no additional configuration — no imports, no registration, no centralised index file needed. This makes co-locating translations with pages and components completely frictionless.
+
+---
+
+## Configure TypeScript
+
+Intlayer uses module augmentation to provide full TypeScript intellisense for your translation keys. Make sure your `tsconfig.json` includes the auto-generated types:
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Your existing TypeScript configurations
+  "include": [
+    // ... Your existing TypeScript configurations
+    ".intlayer/**/*.ts", // Include the auto-generated types
+  ],
+}
+```
+
+---
+
+## Git Configuration
+
+Add Intlayer's generated directory to your `.gitignore`:
+
+```plaintext fileName=".gitignore"
+# Ignore the files generated by Intlayer
+.intlayer
+```
+
+---
+
+## Go Further
+
+- **Visual Editor** — Manage translations visually in your browser: [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)
+- **CMS** — Externalise and manage content remotely: [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)
+- **VS Code Extension** — Get autocompletion and real-time translation error detection: [Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/vs_code_extension.md)
+- **CLI Reference** — Full list of CLI commands: [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/index.md)
+- **Intlayer with Vue** — Full setup guide for Vue: [intlayer_with_vite+vue.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+vue.md)
+- **Intlayer with Nuxt** — Full setup guide for Nuxt: [intlayer_with_nuxt.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nuxt.md)

package/docs/en-GB/packages/intlayer/getLocalizedUrl.md

@@ -31,6 +31,38 @@ author: aymericzip
 
 The `getLocalizedUrl` function generates a localised URL by prefixing the given URL with the specified locale. It handles both absolute and relative URLs, ensuring that the correct locale prefix is applied based on the configuration.
 
+**Key Features:**
+
+- Only 2 parameters are required: `url` and `currentLocale`
+- Optional `options` object with `locales`, `defaultLocale`, and `mode`
+- Uses your project's internationalisation configuration as defaults
+- Can be used with minimal parameters for simple cases or fully customised for complex scenarios
+- Supports multiple routing modes: `prefix-no-default`, `prefix-all`, `no-prefix`, and `search-params`
+
+---
+
+## Function Signature
+
+```typescript
+getLocalizedUrl(
+  url: string,                   // Required
+  currentLocale: Locales,        // Required
+  options?: {                    // Optional
+    locales?: Locales[];
+    defaultLocale?: Locales;
+    mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params';
+  }
+): string
+```
+
+---
+
+## Parameters
+
+## Description
+
+The `getLocalizedUrl` function generates a localised URL by prefixing the given URL with the specified locale. It handles both absolute and relative URLs, ensuring that the correct locale prefix is applied based on the configuration.
+
 ---
 
 ## Parameters
@@ -67,6 +99,25 @@ The `getLocalizedUrl` function generates a localised URL by prefixing the given
 
 ## Example Usage
 
+### Basic Usage (Only Required Parameters)
+
+When you have configured your project with internationalisation settings, you can use the function with just the required parameters:
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getLocalizedUrl, Locales } from "intlayer";
+
+// Uses your project's configuration for locales, defaultLocale, and mode
+getLocalizedUrl("/about", Locales.FRENCH);
+// Output: "/fr/about" (assuming French is supported and mode is 'prefix-no-default')
+
+getLocalizedUrl("/about", Locales.ENGLISH);
+// Output: "/about" or "/en/about" (depending on your mode setting)
+```
+
+### Advanced Usage (With Optional Parameters)
+
+You can override the default configuration by providing the optional `options` parameter:
+
 ### Relative URLs
 
 ```typescript codeFormat={["typescript", "esm"]}
@@ -114,6 +165,30 @@ getLocalizedUrl(
 // Output: "/about" for the default (English) locale
 ```
 
+### Partial Configuration Override
+
+You can also provide only some of the optional parameters. The function will use your project configuration for any parameters you don't specify:
+
+```typescript codeFormat="typescript"
+import { getLocalizedUrl, Locales } from "intlayer";
+
+// Only override the locales, use project config for defaultLocale and mode
+getLocalizedUrl("/about", Locales.SPANISH, {
+  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+});
+
+// Only override mode, use project config for locales and defaultLocale
+getLocalizedUrl("/about", Locales.ENGLISH, {
+  mode: "prefix-all", // Force prefix for all locales including default
+});
+
+// Override multiple options
+getLocalizedUrl("/about", Locales.FRENCH, {
+  defaultLocale: Locales.ENGLISH,
+  mode: "search-params", // Use query parameters: /about?locale=fr
+});
+```
+
 ### Absolute URLs
 
 ```typescript

package/docs/en-GB/packages/intlayer/getMultilingualUrls.md

@@ -33,6 +33,23 @@ The `getMultilingualUrls` function generates a mapping of multilingual URLs by p
 
 ---
 
+## Function Signature
+
+```typescript
+getMultilingualUrls(
+  url: string,                   // Required
+  options?: {                    // Optional
+    locales?: Locales[];
+    defaultLocale?: Locales;
+    mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params';
+  }
+): StrictModeLocaleMap<string>
+```
+
+---
+
+## Parameters
+
 ## Parameters
 
 - `url: string`
@@ -54,6 +71,33 @@ The `getMultilingualUrls` function generates a mapping of multilingual URLs by p
   - **Type**: `boolean`
   - **Default**: `prefixDefaultDefault`
 
+### Optional Parameters
+
+- `options?: object`
+  - **Description**: Configuration object for URL localisation behaviour.
+  - **Type**: `object`
+  - **Required**: No (Optional)
+
+  - `options.locales?: Locales[]`
+    - **Description**: Array of supported locales. If not provided, uses the configured locales from your project configuration.
+    - **Type**: `Locales[]`
+    - **Default**: [`Project Configuration`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md#middleware)
+
+  - `options.defaultLocale?: Locales`
+    - **Description**: The default locale for the application. If not provided, uses the configured default locale from your project configuration.
+    - **Type**: `Locales`
+    - **Default**: [`Project Configuration`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md#middleware)
+
+  - `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
+    - **Description**: The URL routing mode for locale handling. If not provided, uses the configured mode from your project configuration.
+    - **Type**: `'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
+    - **Default**: [`Project Configuration`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md#middleware)
+    - **Modes**:
+      - `prefix-no-default`: No prefix for default locale, prefix for all others
+      - `prefix-all`: Prefix for all locales including default
+      - `no-prefix`: No locale prefix in URL
+      - `search-params`: Use query parameters for locale (e.g., `?locale=fr`)
+
 ### Returns
 
 - **Type**: `IConfigLocales<string>`

package/docs/en-GB/packages/intlayer/getTranslation.md

@@ -85,22 +85,6 @@ console.log(content); // Output: "Hello" (default locale content)
 
 ### Using Custom Content Types:
 
-```typescript codeFormat={["typescript", "esm"]}
-import { getTranslationContent, Locales } from "intlayer";
-
-const customContent = getTranslationContent<Record<string, string>>(
-  {
-    en: { greeting: "Hello" },
-    fr: { greeting: "Bonjour" },
-  },
-  Locales.FRENCH
-);
-
-console.log(customContent.greeting); // Output: "Bonjour"
-```
-
-### Using Custom Content Types:
-
 ```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslationContent, Locales } from "intlayer";
 

package/docs/en-GB/packages/react-intlayer/useDictionary.md

@@ -28,100 +28,6 @@ author: aymericzip
 
 This section provides detailed guidance on using the `useDictionary` hook within React applications, enabling efficient handling of localised content without a visual editor.
 
-## Importing `useDictionary` in React
-
-The `useDictionary` hook can be integrated into React applications by importing it based on the context:
-
-- **Client Component:**
-
-  ```typescript codeFormat="typescript"
-  import { useDictionary } from "react-intlayer"; // Used in client-side React components
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useDictionary } from "react-intlayer"; // Used in client-side React components
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useDictionary } = require("react-intlayer"); // Used in client-side React components
-  ```
-
-- **Server Component:**
-
-  ```typescript codeFormat="typescript"
-  import { useDictionary } from "react-intlayer/server"; // Used in server-side React components
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useDictionary } from "react-intlayer/server"; // Used in server-side React components
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useDictionary } = require("react-intlayer/server"); // Used in server-side React components
-  ```
-
-## Parameters
-
-The hook accepts two parameters:
-
-1. **`dictionary`**: A declared dictionary object containing localised content for specific keys.
-2. **`locale`** (optional): The desired locale. Defaults to the current context's locale if not specified.
-
-## Dictionary
-
-All dictionary objects should be declared in structured content files to ensure type safety and prevent runtime errors. You can find the [setup instructions here](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md). Here's an example of content declaration:
-
-```typescript fileName="./component.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "component-example",
-  content: {
-    title: t({
-      "en-GB": "Client Component Example",
-      en: "Client Component Example",
-      fr: "Exemple de composant client",
-      es: "Ejemplo de componente cliente",
-    }),
-    content: t({
-      "en-GB": "This is the content of a client component example",
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      es: "Este es el contenido de un ejemplo de componente cliente",
-    }),
-  },
-} satisfies Dictionary;
-
-export default componentContent;
-```
-
-```json fileName="./component.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "component-example",
-  "content": {
-    "title": {
-      "nodeType": "translation",
-      "translation": {
-        "en-GB": "Client Component Example",
-        "en": "Client Component Example",
-        "fr": "Exemple de composant client",
-        "es": "Ejemplo de componente cliente"
-      }
-    },
-    "content": {
-      "nodeType": "translation",
-      "translation": {
-        "en-GB": "This is the content of a client component example",
-        "en": "This is the content of a client component example",
-        "fr": "Ceci est le contenu d'un exemple de composant client",
-        "es": "Este es el contenido de un ejemplo de componente cliente"
-      }
-    }
-  }
-}
-```
-
 ## Example Usage in React
 
 Below is an example of how to use the `useDictionary` hook in a React component:
@@ -143,35 +49,6 @@ const ComponentExample: FC = () => {
 };
 ```
 
-## Server Integration
-
-If you are using the `useDictionary` hook outside the `IntlayerProvider`, the locale must be explicitly provided as a parameter when rendering the component:
-
-```tsx fileName="./ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useDictionary } from "react-intlayer/server";
-import clientComponentExampleContent from "./component.content";
-
-const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
-  const { content } = useDictionary(clientComponentExampleContent, locale);
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.content}</p>
-    </div>
-  );
-};
-```
-
-## Notes on Attributes
-
-Unlike integrations using visual editors, attributes such as `buttonTitle.value` do not apply here. Instead, directly access the localised strings as declared in your content.
-
-```jsx
-<button title={content.title}>{content.content}</button>
-```
-
 ## Additional Tips
 
 - **Type Safety**: Always use `Dictionary` to define your dictionaries to ensure type safety.