@intlayer/docs 7.0.4 → 7.0.6

package/blog/en/intlayer_with_i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-10-29
+updatedAt: 2025-11-01
 title: How to automate your i18next JSON translations using Intlayer
 description: Automate your JSON translations with Intlayer and i18next for enhanced internationalization in JavaScript applications.
 keywords:
@@ -20,6 +20,9 @@ slugs:
   - blog
   - intlayer-with-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
   - version: 7.0.0
     date: 2025-10-29
     changes: Change to syncJSON plugin
@@ -40,6 +43,7 @@ While Intlayer provides an excellent standalone i18n solution (see our [Next.js
 1. **Existing codebase**: You have an established i18next implementation and want to gradually migrate to Intlayer's improved developer experience.
 2. **Legacy requirements**: Your project requires compatibility with existing i18next plugins or workflows.
 3. **Team familiarity**: Your team is comfortable with i18next but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
 
 **For that, Intlayer can be implemented as an adapter for i18next to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
 
@@ -67,6 +71,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Package descriptions:**
 
 - **intlayer**: Core library for internationalization management, content declaration, and building
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -108,6 +116,49 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronize both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) for more details. But if you prefer, using a Intlayer plugin, you can also implement per-component management of JSON localized anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
+---
+
 ## Git Configuration
 
 It's recommended to ignore auto-generated Intlayer files:

package/blog/en/intlayer_with_next-i18next.md

@@ -16,6 +16,9 @@ slugs:
   - blog
   - intlayer-with-next-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
   - version: 7.0.0
     date: 2025-10-29
     changes: Change to syncJSON plugin and comprehensive rewrite
@@ -27,17 +30,6 @@ history:
 
 <TOC/>
 
-## What is next-i18next?
-
-**next-i18next** is one of the most popular internationalization (i18n) frameworks for Next.js applications. Built on top of the powerful **i18next** ecosystem, it provides a comprehensive solution for managing translations, localization, and language switching in Next.js projects.
-
-However, next-i18next comes with some challenges:
-
-- **Complex configuration**: Setting up next-i18next requires multiple configuration files and careful setup of server-side and client-side i18n instances.
-- **Scattered translations**: Translation files are typically stored in separate directories from components, making it harder to maintain consistency.
-- **Manual namespace management**: Developers need to manually manage namespaces and ensure proper loading of translation resources.
-- **Limited type safety**: TypeScript support requires additional configuration and doesn't provide automatic type generation for translations.
-
 ## What is Intlayer?
 
 **Intlayer** is an innovative, open-source internationalization library designed to address the shortcomings of traditional i18n solutions. It offers a modern approach to content management in Next.js applications.
@@ -51,6 +43,7 @@ While Intlayer provides an excellent standalone i18n solution (see our [Next.js
 1. **Existing codebase**: You have an established next-i18next implementation and want to gradually migrate to Intlayer's improved developer experience.
 2. **Legacy requirements**: Your project requires compatibility with existing i18next plugins or workflows.
 3. **Team familiarity**: Your team is comfortable with next-i18next but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
 
 **For that, Intlayer can be implemented as an adapter for next-i18next to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
 
@@ -76,13 +69,13 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Package explanations:**
 
 - **intlayer**: Core library for content declaration and management
-- **next-intlayer**: Next.js integration layer with build plugins
-- **i18next**: Core i18n framework
-- **next-i18next**: Next.js wrapper for i18next
-- **i18next-resources-to-backend**: Dynamic resource loading for i18next
 - **@intlayer/sync-json-plugin**: Plugin to sync Intlayer content declarations to i18next JSON format
 
 ### Step 2: Implement the Intlayer plugin to wrap the JSON
@@ -102,7 +95,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -123,6 +116,49 @@ To see more details about the `syncJSON` plugin, please refer to the [syncJSON p
 
 ---
 
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronize both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) for more details. But if you prefer, using a Intlayer plugin, you can also implement per-component management of JSON localized anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./public/locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
+---
+
 ## Git Configuration
 
 Exclude generated files from version control:

package/blog/en/intlayer_with_next-intl.md

@@ -7,6 +7,9 @@ slugs:
   - blog
   - intlayer-with-next-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
   - version: 7.0.0
     date: 2025-10-29
     changes: Change to syncJSON plugin
@@ -27,6 +30,7 @@ While Intlayer provides an excellent standalone i18n solution (see our [Next.js
 1. **Existing codebase**: You have an established next-intl implementation and want to gradually migrate to Intlayer's improved developer experience.
 2. **Legacy requirements**: Your project requires compatibility with existing next-intl plugins or workflows.
 3. **Team familiarity**: Your team is comfortable with next-intl but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
 
 **For that, Intlayer can be implemented as an adapter for next-intl to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
 
@@ -54,6 +58,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Package descriptions:**
 
 - **intlayer**: Core library for internationalization management, content declaration, and building
@@ -95,6 +103,47 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronize both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) for more details. But if you prefer, using a Intlayer plugin, you can also implement per-component management of JSON localized anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
 ## Git Configuration
 
 It's recommended to ignore auto-generated Intlayer files:

package/blog/en/intlayer_with_react-i18next.md

@@ -18,6 +18,9 @@ slugs:
   - blog
   - intlayer-with-react-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
   - version: 7.0.0
     date: 2025-10-29
     changes: Change to syncJSON plugin
@@ -38,6 +41,7 @@ While Intlayer provides an excellent standalone i18n solution (see our [React in
 1. **Existing codebase**: You have an established react-i18next implementation and want to gradually migrate to Intlayer's improved developer experience.
 2. **Legacy requirements**: Your project requires compatibility with existing react-i18next plugins or workflows.
 3. **Team familiarity**: Your team is comfortable with react-i18next but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
 
 **For that, Intlayer can be implemented as an adapter for react-i18next to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
 
@@ -65,6 +69,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Package descriptions:**
 
 - **intlayer**: Core library for internationalization management, content declaration, and building
@@ -87,7 +95,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -106,6 +114,47 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronize both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) for more details. But if you prefer, using a Intlayer plugin, you can also implement per-component management of JSON localized anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
 ## Git Configuration
 
 It's recommended to ignore auto-generated Intlayer files:

package/blog/en/intlayer_with_react-intl.md

@@ -16,6 +16,9 @@ slugs:
   - blog
   - intlayer-with-react-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
   - version: 7.0.0
     date: 2025-10-29
     changes: Change to syncJSON plugin
@@ -23,6 +26,10 @@ history:
 
 # How to automate your react-intl JSON translations using Intlayer
 
+## Table of Contents
+
+<TOC/>
+
 ## What is Intlayer?
 
 **Intlayer** is an innovative, open-source internationalization library designed to address the shortcomings of traditional i18n solutions. It offers a modern approach to content management in React applications.
@@ -36,6 +43,7 @@ While Intlayer provides an excellent standalone i18n solution (see our [React in
 1. **Existing codebase**: You have an established react-intl implementation and want to gradually migrate to Intlayer's improved developer experience.
 2. **Legacy requirements**: Your project requires compatibility with existing react-intl plugins or workflows.
 3. **Team familiarity**: Your team is comfortable with react-intl but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
 
 **For that, Intlayer can be implemented as an adapter for react-intl to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
 
@@ -63,6 +71,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Package descriptions:**
 
 - **intlayer**: Core library for internationalization management, content declaration, and building
@@ -104,6 +116,47 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronize both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) for more details. But if you prefer, using a Intlayer plugin, you can also implement per-component management of JSON localized anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
 ## Git Configuration
 
 It's recommended to ignore auto-generated Intlayer files:

package/blog/en/intlayer_with_vue-i18n.md

@@ -0,0 +1,178 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-10-29
+title: Intlayer and vue-i18n
+description: Integrate Intlayer with vue-i18n for a comprehensive Vue.js internationalization solution
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internationalization
+  - Blog
+  - Vue.js
+  - Nuxt
+  - JavaScript
+  - Vue
+slugs:
+  - blog
+  - intlayer-with-vue-i18n
+history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Change to syncJSON plugin and comprehensive rewrite
+---
+
+# Vue.js Internationalization (i18n) with vue-i18n and Intlayer
+
+## Table of Contents
+
+<TOC/>
+
+## What is Intlayer?
+
+**Intlayer** is an innovative, open-source internationalization library designed to address the shortcomings of traditional i18n solutions. It offers a modern approach to content management in Vue.js and Nuxt applications.
+
+See a concrete comparison with vue-i18n in our [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/vue-i18n_vs_intlayer.md) blog post.
+
+## Why Combine Intlayer with vue-i18n?
+
+While Intlayer provides an excellent standalone i18n solution (see our [Vue.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+vue.md)), you might want to combine it with vue-i18n for several reasons:
+
+1. **Existing codebase**: You have an established vue-i18n implementation and want to gradually migrate to Intlayer's improved developer experience.
+2. **Legacy requirements**: Your project requires compatibility with existing vue-i18n plugins or workflows.
+3. **Team familiarity**: Your team is comfortable with vue-i18n but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
+
+**For that, Intlayer can be implemented as an adapter for vue-i18n to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
+
+This guide shows you how to leverage Intlayer's superior content declaration system while maintaining compatibility with vue-i18n.
+
+---
+
+## Step-by-Step Guide to Set Up Intlayer with vue-i18n
+
+### Step 1: Install Dependencies
+
+Install the necessary packages using your preferred package manager:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**Package explanations:**
+
+- **intlayer**: Core library for content declaration and management
+- **@intlayer/sync-json-plugin**: Plugin to sync Intlayer content declarations to vue-i18n JSON format
+
+### Step 2: Implement the Intlayer plugin to wrap the JSON
+
+Create an Intlayer configuration file to define your supported locales:
+
+**If you want to also export JSON dictionaries for vue-i18n**, add the `syncJSON` plugin:
+
+```typescript fileName="intlayer.config.ts"
+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({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+The `syncJSON` plugin will automatically wrap the JSON. It will read and write the JSON files without changing the content architecture.
+
+If you want to make coexist that JSON with intlayer content declaration files (`.content` files), Intlayer will proceed this way:
+
+    1. load both JSON and content declaration files and transform them into a intlayer dictionary.
+    2. if there is conflicts between the JSON and the content declaration files, Intlayer will process to the merge of that all dictionaries. Depending of the priority of the plugins, and the one of the content declaration file (all are configurable).
+
+If changes are made using the CLI to translate the JSON, or using the CMS, Intlayer will update the JSON file with the new translations.
+
+To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
+
+---
+
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronize both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) for more details. But if you prefer, using a Intlayer plugin, you can also implement per-component management of JSON localized anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
+---
+
+## Git Configuration
+
+Exclude generated files from version control:
+
+```plaintext fileName=".gitignore"
+# Ignore files generated by Intlayer
+.intlayer
+intl
+```
+
+These files are automatically regenerated during the build process and don't need to be committed to your repository.
+
+### VS Code Extension
+
+For improved developer experience, install the official **Intlayer VS Code Extension**:
+
+[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)