@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/fr/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-05-12
+updatedAt: 2026-06-17
 title: Configuration
 description: Apprenez à configurer Intlayer pour votre application. Comprenez les différents paramètres et options disponibles pour personnaliser Intlayer selon vos besoins.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.10.0
+    date: 2026-06-17
+    changes: "Ajout de l'option `format` à la configuration du dictionnaire"
   - version: 8.9.4
     date: 2026-05-12
     changes: "Ajout du support pour le fournisseur LM Studio"
@@ -135,6 +138,7 @@ Intlayer accepte les formats de fichiers de configuration JSON, JS, MJS et TS :
 ````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 import { z } from "zod";
 
 /**
@@ -585,10 +589,38 @@ const config: IntlayerConfig = {
     }),
   },
 
+  /**
+   * Configuration du dictionnaire.
+   */
+  dictionary: {
+    /**
+     * Contrôle la manière dont les dictionnaires sont importés.
+     * - "static": Importé statiquement à la compilation.
+     * - "dynamic": Importé dynamiquement avec Suspense.
+     * - "fetch": Récupéré dynamiquement via l'API de synchronisation en direct.
+     */
+    importMode: "static",
+
+    /**
+     * Le format de message par défaut pour tous les dictionnaires du projet.
+     * - 'intlayer': Format intlayer natif (par défaut).
+     * - 'icu': Format de message ICU.
+     * - 'i18next': Format i18next.
+     * - 'vue-i18n': Format Vue I18n.
+     * - 'po': Format GNU Gettext PO.
+     */
+    format: "icu",
+  },
+
   /**
    * Configuration des plugins.
    */
-  plugins: [],
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./messages/${locale}.json`,
+    }),
+  ],
 };
 
 export default config;
@@ -857,20 +889,21 @@ Paramètres relatifs au traitement du contenu dans l'application (noms de réper
 
 Paramètres contrôlant les opérations de dictionnaire, y compris le comportement de remplissage automatique et la génération de contenu.
 
-| Champ                       | Description                                                                                                                                                      | Type                                                                                                            | Par défaut  | Exemple                                                                                     | Note                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fill`                      | Contrôle la manière dont les fichiers de sortie de remplissage automatique (traduction par IA) sont générés.                                                     | `boolean` &#124; <br/> `FilePathPattern` &#124; <br/> `Partial<Record<Locale, boolean &#124; FilePathPattern>>` | `true`      | `{ en: '/locales/en/{{key}}.json', fr: ({ key }) => '/locales/fr/${key}.json', es: false }` | • `true`: chemin par défaut (même fichier que la source).<br/>• `false`: désactiver.<br/>• Le modèle string/fonction génère des fichiers par locale.<br/>• Objet par locale : chaque locale correspond à son propre modèle ; `false` ignore cette locale.<br/>• L'inclusion de `{{locale}}` déclenche la génération par locale.<br/>• Le `fill` au niveau du dictionnaire a toujours la priorité sur cette configuration globale.                                                               |
-| `description`               | Aide à comprendre l'objectif du dictionnaire dans l'éditeur et le CMS. Également utilisé comme contexte pour la génération de traductions par IA.                | `string`                                                                                                        | `undefined` | `'User profile section'`                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `locale`                    | Transforme le dictionnaire en un format par locale. Chaque champ déclaré devient un nœud de traduction. Si absent, le dictionnaire est traité comme multilingue. | `LocalesValues`                                                                                                 | `undefined` | `'en'`                                                                                      | Utilisez ceci lorsque le dictionnaire est spécifique à une seule locale plutôt que de contenir des traductions pour plusieurs locales.                                                                                                                                                                                                                                                                                                                                                          |
-| `contentAutoTransformation` | Transforme automatiquement les chaînes de contenu en nœuds typés (markdown, HTML ou insertion).                                                                  | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`     | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')`.<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')`.<br/>• Insertion : `Hello {{name}}` → `insert('Hello {{name}}')`.                                                                                                                                                                                                                                                                                                                    |
-| `location`                  | Indique où les fichiers de dictionnaire sont stockés et leur mode de synchronisation avec le CMS.                                                                | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`   | `'hybrid'`                                                                                  | • `'local'` : géré localement uniquement.<br/>• `'remote'` : géré à distance uniquement (CMS).<br/>• `'hybrid'` : géré à la fois localement et à distance.<br/>• `'plugin'` ou chaîne personnalisée : géré par un plugin ou une source personnalisée.                                                                                                                                                                                                                                           |
-| `importMode`                | Contrôle la manière dont les dictionnaires sont importés.                                                                                                        | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`  | `'dynamic'`                                                                                 | • `'static'`: importé statiquement (remplace `useIntlayer` par `useDictionary`).<br/>• `'dynamic'`: importé dynamiquement via Suspense (remplace par `useDictionaryDynamic`).<br/>• `'fetch'`: récupéré via l'API live sync ; retombe sur `'dynamic'` en cas d'échec.<br/>• Repose sur les plugins `@intlayer/babel` et `@intlayer/swc`.<br/>• Les clés doivent être déclarées statiquement.<br/>• Ignoré si `optimize` est désactivé.<br/>• N'affecte pas `getIntlayer`, `getDictionary`, etc. |
-| `priority`                  | Priorité du dictionnaire. Les valeurs les plus élevées l'emportent sur les plus basses lors de la résolution des conflits entre dictionnaires.                   | `number`                                                                                                        | `undefined` | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `live`                      | Déprécié - utilisez plutôt `importMode: 'fetch'`. Indiquait si le contenu du dictionnaire était récupéré dynamiquement via l'API live sync.                      | `boolean`                                                                                                       | `undefined` |                                                                                             | Renommé en `importMode: 'fetch'` dans la v8.0.0.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `schema`                    | Généré automatiquement par Intlayer pour la validation du schéma JSON.                                                                                           | `'https://intlayer.org/schema.json'`                                                                            | auto-généré |                                                                                             | Ne pas modifier manuellement.                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `title`                     | Aide à identifier le dictionnaire dans l'éditeur et le CMS.                                                                                                      | `string`                                                                                                        | `undefined` | `'User Profile'`                                                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `tags`                      | Catégorise les dictionnaires et fournit du contexte ou des instructions pour l'éditeur et l'IA.                                                                  | `string[]`                                                                                                      | `undefined` | `['user', 'profile']`                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `version`                   | Version du dictionnaire distant ; aide à suivre la version actuellement utilisée.                                                                                | `string`                                                                                                        | `undefined` | `'1.0.0'`                                                                                   | • Gérable sur le CMS.<br/>• Ne pas modifier localement.                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| Champ                       | Description                                                                                                                                                      | Type                                                                                                            | Par défaut   | Exemple                                                                                     | Note                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fill`                      | Contrôle la manière dont les fichiers de sortie de remplissage automatique (traduction par IA) sont générés.                                                     | `boolean` &#124; <br/> `FilePathPattern` &#124; <br/> `Partial<Record<Locale, boolean &#124; FilePathPattern>>` | `true`       | `{ en: '/locales/en/{{key}}.json', fr: ({ key }) => '/locales/fr/${key}.json', es: false }` | • `true`: chemin par défaut (même fichier que la source).<br/>• `false`: désactiver.<br/>• Le modèle string/fonction génère des fichiers par locale.<br/>• Objet par locale : chaque locale correspond à son propre modèle ; `false` ignore cette locale.<br/>• L'inclusion de `{{locale}}` déclenche la génération par locale.<br/>• Le `fill` au niveau du dictionnaire a toujours la priorité sur cette configuration globale.                                                               |
+| `description`               | Aide à comprendre l'objectif du dictionnaire dans l'éditeur et le CMS. Également utilisé comme contexte pour la génération de traductions par IA.                | `string`                                                                                                        | `undefined`  | `'User profile section'`                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `locale`                    | Transforme le dictionnaire en un format par locale. Chaque champ déclaré devient un nœud de traduction. Si absent, le dictionnaire est traité comme multilingue. | `LocalesValues`                                                                                                 | `undefined`  | `'en'`                                                                                      | Utilisez ceci lorsque le dictionnaire est spécifique à une seule locale plutôt que de contenir des traductions pour plusieurs locales.                                                                                                                                                                                                                                                                                                                                                          |
+| `contentAutoTransformation` | Transforme automatiquement les chaînes de contenu en nœuds typés (markdown, HTML ou insertion).                                                                  | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`      | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')`.<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')`.<br/>• Insertion : `Hello {{name}}` → `insert('Hello {{name}}')`.                                                                                                                                                                                                                                                                                                                    |
+| `location`                  | Indique où les fichiers de dictionnaire sont stockés et leur mode de synchronisation avec le CMS.                                                                | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`    | `'hybrid'`                                                                                  | • `'local'` : géré localement uniquement.<br/>• `'remote'` : géré à distance uniquement (CMS).<br/>• `'hybrid'` : géré à la fois localement et à distance.<br/>• `'plugin'` ou chaîne personnalisée : géré par un plugin ou une source personnalisée.                                                                                                                                                                                                                                           |
+| `importMode`                | Contrôle la manière dont les dictionnaires sont importés.                                                                                                        | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`   | `'dynamic'`                                                                                 | • `'static'`: importé statiquement (remplace `useIntlayer` par `useDictionary`).<br/>• `'dynamic'`: importé dynamiquement via Suspense (remplace par `useDictionaryDynamic`).<br/>• `'fetch'`: récupéré via l'API live sync ; retombe sur `'dynamic'` en cas d'échec.<br/>• Repose sur les plugins `@intlayer/babel` et `@intlayer/swc`.<br/>• Les clés doivent être déclarées statiquement.<br/>• Ignoré si `optimize` est désactivé.<br/>• N'affecte pas `getIntlayer`, `getDictionary`, etc. |
+| `format`                    | Le format de message par défaut pour tous les dictionnaires du projet.                                                                                           | `'intlayer'` &#124; <br/> `'icu'` &#124; <br/> `'i18next'` &#124; <br/> `'vue-i18n'` &#124; <br/> `'po'`        | `'intlayer'` | `'icu'`                                                                                     | • `'intlayer'`: Format intlayer natif.<br/>• `'icu'`: Format de message ICU.<br/>• `'i18next'`: Format i18next.<br/>• `'vue-i18n'`: Format Vue I18n.<br/>• `'po'`: Format GNU Gettext PO.                                                                                                                                                                                                                                                                                                       |
+| `priority`                  | Priorité du dictionnaire. Les valeurs les plus élevées l'emportent sur les plus basses lors de la résolution des conflits entre dictionnaires.                   | `number`                                                                                                        | `undefined`  | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `live`                      | Déprécié - utilisez plutôt `importMode: 'fetch'`. Indiquait si le contenu du dictionnaire était récupéré dynamiquement via l'API live sync.                      | `boolean`                                                                                                       | `undefined`  |                                                                                             | Renommé en `importMode: 'fetch'` dans la v8.0.0.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `schema`                    | Généré automatiquement par Intlayer pour la validation du schéma JSON.                                                                                           | `'https://intlayer.org/schema.json'`                                                                            | auto-généré  |                                                                                             | Ne pas modifier manuellement.                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `title`                     | Aide à identifier le dictionnaire dans l'éditeur et le CMS.                                                                                                      | `string`                                                                                                        | `undefined`  | `'User Profile'`                                                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `tags`                      | Catégorise les dictionnaires et fournit du contexte ou des instructions pour l'éditeur et l'IA.                                                                  | `string[]`                                                                                                      | `undefined`  | `['user', 'profile']`                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `version`                   | Version du dictionnaire distant ; aide à suivre la version actuellement utilisée.                                                                                | `string`                                                                                                        | `undefined`  | `'1.0.0'`                                                                                   | • Gérable sur le CMS.<br/>• Ne pas modifier localement.                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
 **Exemple de `fill`** :
 

package/docs/fr/dictionary/condition.md

@@ -23,8 +23,209 @@ author: aymericzip
 
 ## Comment Fonctionne la Condition
 
-Dans Intlayer, le contenu conditionnel est réalisé via la fonction `cond`, qui associe des conditions spécifiques (généralement des valeurs booléennes) à leur contenu correspondant. Cette approche vous permet de sélectionner dynamiquement le contenu en fonction d'une condition donnée. Lorsqu'il est intégré à React Intlayer ou Next Intlayer, le contenu approprié est automatiquement choisi en fonction de la condition fournie au moment de l'exécution.
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
+To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Output: my content when it's true */
+          myCondition(true)
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content when it's false */
+          myCondition(false)
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content when the condition fails */
+          myCondition("")
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content when the condition fails */
+          myCondition(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize conditional content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize conditional content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myCondition } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myCondition(true) }}</p>
+    <p>{{ myCondition(false) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myCondition(true)}</p>
+  <p>{$content.myCondition(false)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const ConditionalComponent: Component = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-conditional",
+  template: `
+    <div>
+      <p>{{ content().myCondition(true) }}</p>
+      <p>{{ content().myCondition(false) }}</p>
+    </div>
+  `,
+})
+export class ConditionalComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("true-content")!.textContent =
+    newContent.myCondition(true);
+  document.getElementById("false-content")!.textContent =
+    newContent.myCondition(false);
+});
+
+// Initial render
+document.getElementById("true-content")!.textContent =
+  content.myCondition(true);
+document.getElementById("false-content")!.textContent =
+  content.myCondition(false);
+```
+
+  </Tab>
+</Tabs>
 ## Configuration du Contenu Conditionnel
 
 Pour configurer le contenu conditionnel dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions conditionnelles. Voici des exemples dans différents formats.
@@ -67,7 +268,10 @@ export default myConditionalContent;
 
 ## Utilisation du Contenu Conditionnel avec React Intlayer
 
-Pour utiliser le contenu conditionnel dans un composant React, importez et utilisez le hook `useIntlayer` du package `react-intlayer`. Ce hook récupère le contenu pour la clé spécifiée et vous permet de passer une condition pour sélectionner la sortie appropriée.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -80,25 +284,25 @@ const ConditionalComponent: FC = () => {
     <div>
       <p>
         {
-          /* Sortie : mon contenu lorsque c'est vrai */
+          /* Output: my content when it's true */
           myCondition(true)
         }
       </p>
       <p>
         {
-          /* Sortie : mon contenu lorsque c'est faux */
+          /* Output: my content when it's false */
           myCondition(false)
         }
       </p>
       <p>
         {
-          /* Sortie : mon contenu lorsque la condition échoue */
+          /* Output: my content when the condition fails */
           myCondition("")
         }
       </p>
       <p>
         {
-          /* Sortie : mon contenu lorsque la condition échoue */
+          /* Output: my content when the condition fails */
           myCondition(undefined)
         }
       </p>
@@ -109,6 +313,165 @@ const ConditionalComponent: FC = () => {
 export default ConditionalComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize conditional content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize conditional content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myCondition } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myCondition(true) }}</p>
+    <p>{{ myCondition(false) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myCondition(true)}</p>
+  <p>{$content.myCondition(false)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const ConditionalComponent: Component = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-conditional",
+  template: `
+    <div>
+      <p>{{ content().myCondition(true) }}</p>
+      <p>{{ content().myCondition(false) }}</p>
+    </div>
+  `,
+})
+export class ConditionalComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("true-content")!.textContent =
+    newContent.myCondition(true);
+  document.getElementById("false-content")!.textContent =
+    newContent.myCondition(false);
+});
+
+// Initial render
+document.getElementById("true-content")!.textContent =
+  content.myCondition(true);
+document.getElementById("false-content")!.textContent =
+  content.myCondition(false);
+```
+
+  </Tab>
+</Tabs>
+
 ## Ressources Supplémentaires
 
 Pour plus d'informations détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :