@intlayer/docs 9.5.6 → 9.5.8

package/blog/ar/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n مقابل @intlayer/vue-i18n: نفس الواجهة البرمجية، حزمة مختلفة"
 description: ما الذي يتغير عندما تحتفظ تطبيقات Vue 3 باستدعاءات vue-i18n الخاصة بها لكنها تخدمها من خلال محول التوافق @intlayer/vue-i18n. JavaScript لكل صفحة، حجم وقت التشغيل، حجم المكون والتسرب المقاس على نفس كود Vite + Vue، بالإضافة إلى ما يحتفظ به المحول وما يتجاهله وما لا يمكنه استبداله.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n مقابل @intlayer/vue-i18n | نفس الواجهة البرمجية، حزمة مختلفة
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` هو محول توافقي: يعرّض واجهة برمجية (API) من `vue-i18n` (`createI18n`، `useI18n`، `t()`، `d()`، `n()`، `$t`، `v-t`، `i18n.global.locale`...) ويقدمها من القواميس المترجمة بواسطة Intlayer. ملفات `.vue` الخاصة بك لا تتغير. ما يرتبط به `t("footer.github")` هو ما يتغير.
 
 تقيس هذه المقالة هذا التبديل على نفس تطبيق Vite + Vue 3، تم بناؤه مرة واحدة باستخدام `vue-i18n` ومرة أخرى باستخدام المحول. تأتي الأرقام من [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). لمقارنة `vue-i18n` و Intlayer كمكتبات، اقرأ [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) و[vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). هذا يتعلق بما يغيره المحول عندما تحتفظ بمكوناتك كما هي.
@@ -105,6 +107,10 @@ const { t } = useI18n(_dicHash_footer);
 
 ### النتائج على Vite + Vue 3
 
+اختر المقاييس والمكتبات التي تهمك:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | الإعداد                  | الإستراتيجية | حجم المكتبة (gz) | حجم المكتبة (min) | متوسط صفحة JS (gz) | تسرب Locale | تسرب الصفحة | متوسط المكون (gz) | استجابة E2E | تحميل الصفحة |
 | ------------------------ | ------------ | ---------------: | ----------------: | -----------------: | ----------: | ----------: | ----------------: | ----------: | -----------: |
 | **base** (no i18n)       | -            |           0.0 KB |            0.0 KB |            41.3 KB |        0.0% |           - |            1.1 KB |      1.8 ms |      10.8 ms |
@@ -124,11 +130,24 @@ const { t } = useI18n(_dicHash_footer);
 - **التفاعلية وتحميل الصفحة.** تبديل Locale رخيص لكليهما (1.5-2.8 ms)؛ نظام التفاعلية في Vue يجعل الأمر كذلك بمجرد أن تكون الرسائل في الذاكرة. يذهب تحميل الصفحة من 13.6 ms إلى **9.3 ms**، متماشياً مع 88 KB أقل من JavaScript للتحليل.
 - **حول الصفوف الأصلية.** `vue-intlayer` في هذا التشغيل جمعت كل اللغة في وضع `static` وحققت 57.1 كيلوبايت مع وقت تشغيل 3.9 كيلوبايت؛ قاموس المحول المتزامن حمل سلاسل لغات أجنبية أقل، وبالتالي الرقم الأقل لكل صفحة. وقت التشغيل الأصلي يبقى الأخف من بين الثلاثة، وموديل `.content.ts` الخاص به هو حيث تجد كتل SFC `<i18n>` معادلتها.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> الجدول الكامل، كل مكتبة وكل استراتيجية، في [تقرير قياس أداء Vue](https://intlayer.org/ar/doc/benchmark/vue).
+
 ## لماذا تتحرك الأرقام
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 لم يتغير شيء في `src/components/`، لذا الفوائد تأتي من ما ترتبط به `useI18n`.
 
-**مع `vue-i18n`**, الربط هو المثيل العام. `createI18n({ messages: { en, fr, ... } })` هو استيراد واحد يحتوي على كل شيء؛ كل مكون يستدعي `useI18n()` يمكنه الوصول إلى كل شيء، لذلك لا يمكن للـ bundler أن ينقسم دون المثيل. التحسين يعني _أنت_ تقسم `en.json` حسب المسار، تستدعي `setLocaleMessage()` في حارس التوجيه، وتحافظ على خريطة المسار إلى الملف صحيحة عند تحرك المكونات.
+**مع `vue-i18n`**, الربط هو المثيل العام. `createI18n({ messages: { en, fr, ... } })` هو استيراد واحد يحتوي على كل شيء؛ كل مكون يستدعي `useI18n()` يمكنه الوصول إلى كل شيء، لذلك لا يمكن للـ bundler أن ينقسم دون المثيل. التحسين يعني _أنت_ تقسم `en.json` حسب المسار، تستدعي `setLocaleMessage()` في حارس التوجيه، وتحافظ على خريطة المسار إلى الملف صحيحة عند تحرك المكونات. يتزايد الهدر على محورين في آن واحد، الصفحات واللغات:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -214,6 +233,8 @@ export default config;
 ```
 
 يبقى `locales/{locale}.json` في مكانه. كل مفتاح على المستوى الأعلى (`footer`, `hero`...) يصبح قاموس.
+
+</Step>
 <Step number={3} title="أضف الـ plugin وحذف استيراد الرسائل">
 
 ```ts fileName="vite.config.ts"
@@ -256,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## الحدود التي يجب معرفتها قبل البدء
 
-- **كتل SFC `<i18n>` لا تُقرأ.** إذا كانت رسائلك موجودة داخل المكونات، فيجب نقلها إلى ملفات الإعدادات الإقليمية (أو إلى `.content.ts`، وهي نفس الفكرة مع الأنواع).
-- **تحميل الرسائل في وقت التشغيل قد اختفى.** `setLocaleMessage()` و `mergeLocaleMessage()` تحذر وتعود. الترجمات المجلوبة من نظام إدارة المحتوى في وقت التشغيل تحتاج إلى نظام إدارة محتوى Intlayer، أو أوامر `intlayer pull` / `push`.
-- **`messages` هو بديل، وليس مجاني.** الاحتفاظ باستيرادات JSON في `createI18n()` يحتفظ بـ 75 KB في الحزمة. احذفها بمجرد نجاح `intlayer test`.
-- **المحول ليس runtime الأصلي.** 7.9 KB مقابل 3.9 KB لـ `vue-intlayer`. بمجرد انتقال كل component إلى `useIntlayer`، يمكنك حذفه.
+<AccordionGroup>
+<Accordion header="لا تتم قراءة كتل SFC <i18n>">
+
+إذا كانت رسائلك موجودة داخل المكونات، فيجب نقلها إلى ملفات اللغات، أو إلى ملف `.content.ts`، وهو نفس المفهوم مع أنواع محددة مسبقًا.
+
+</Accordion>
+<Accordion header="تمت إزالة تحميل الرسائل في وقت التشغيل">
+
+`setLocaleMessage()` و `mergeLocaleMessage()` يقومان بإصدار تحذير والعودة. تتطلب الترجمات التي يتم جلبها من نظام إدارة المحتوى (CMS) في وقت التشغيل استخدام [Intlayer CMS](https://intlayer.org/ar/doc/concept/cms)، أو أوامر `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages هو خيار احتياطي، وليس مجانيًا">
+
+الحفاظ على استيراد JSON في `createI18n()` يبقي الـ 75 كيلوبايت في الحزمة. احذفها بمجرد اجتياز `intlayer test` بنجاح.
+
+</Accordion>
+<Accordion header="المحول ليس وقت التشغيل الأصلي">
+
+7.9 كيلوبايت مقابل 3.9 كيلوبايت لـ `vue-intlayer`. بمجرد انتقال كل مكون إلى `useIntlayer`، قم بإزالته.
+
+</Accordion>
+</AccordionGroup>
 
 ## متى تستخدم أي منها؟
 
-- **ابق على `vue-i18n`** إذا كان تطبيقك يعتمد على كتل SFC `<i18n>`، على تدفقات runtime `setLocaleMessage()`، أو إذا لم يكن 90 KB لكل صفحة مصدر قلق لجمهورك.
-- **استخدم `@intlayer/vue-i18n`** إذا كنت على `vue-i18n` وتريد توفير 88 KB، و23x أصغر components، 0% page leakage، typed keys وفحوصات CI دون تعديل ملف `.vue`. هذه هي نقطة الدخول لـ codebase `vue-i18n` موجود.
-- **اذهب للنسخة الأصلية (`vue-intlayer`)** للمشاريع الجديدة، أو بمجرد انتهاء المحول من عمله. لديها أخف runtime (3.9 KB) والنموذج `.content.ts` لكل component الذي يحل محل كتل `<i18n>` بمحتوى مكتوب (typed).
+<AccordionGroup>
+<Accordion header="البقاء على vue-i18n">
+
+يعتمد تطبيقك على كتل SFC `<i18n>`، أو تدفقات `setLocaleMessage()` في وقت التشغيل، أو أن حجم 90 كيلوبايت لكل صفحة لا يمثل مصدر قلق لجمهورك.
+
+</Accordion>
+<Accordion header="استخدام @intlayer/vue-i18n">
+
+أنت تستخدم `vue-i18n` وتريد توفير 88 كيلوبايت، ومكونات أصغر بـ 23 مرة، وتسرب صفحات بنسبة 0%، ومفاتيح مطبوعة وفحوصات CI دون تعديل أي ملف `.vue`. هذه هي نقطة الدخول لقاعدة كود `vue-i18n` الحالية.
+
+</Accordion>
+<Accordion header="الانتقال إلى الوضع الأصلي (vue-intlayer)">
+
+للمشاريع الجديدة، أو بمجرد أن يؤدي المحول وظيفته. يتميز بأخف وقت تشغيل (3.9 كيلوبايت) ونموذج `.content.ts` لكل مكون يحل محل كتل `<i18n>` بمحتوى ذي أنواع محددة. ابدأ مع [Intlayer مع Vue](https://intlayer.org/ar/doc/environment/vite-and-vue) أو [مع Nuxt](https://intlayer.org/ar/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## الأسئلة الشائعة
+
+<FAQ>
+
+<Question title="هل يتعين علي تعديل ملفات .vue الخاصة بي؟">
+
+لا. أدى بناء الاختبار القياسي إلى تعديل `vite.config.ts` و `intlayer.config.ts` وسطر واحد فقط في `src/i18n.ts` وهو استيراد `messages`. ظل كل موضع استدعاء لـ `useI18n()` و `$t` و `v-t` و Options API كما كان تمامًا.
+
+</Question>
+
+<Question title="لماذا حجم المكون أصغر بـ 23 مرة؟">
+
+لأن `useI18n()` يتوقف عن الوصول إلى النسخة العامة. يحتفظ `createI18n({ messages })` بجميع الرسائل لكل لغة، لذلك يسحب المكون المترجم بمفرده 196 كيلوبايت. مع المحول فإنه يصل فقط إلى قاموسه الخاص: 8.4 كيلوبايت.
+
+</Question>
+
+<Question title="ماذا عن تنسيق d() و n()؟">
+
+تم الحفاظ عليه. يتم احترام إعدادات `datetimeFormats` و `numberFormats` التي تم تمريرها إلى `createI18n()`، وهي مدعومة بواسطة واجهة `Intl` الأصلية. راجع [تنسيق التاريخ والوقت والأرقام](https://intlayer.org/ar/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="هل يعمل مع Nuxt؟">
+
+`@intlayer/vue-i18n` يستهدف Vite + Vue. بالنسبة لـ `@nuxtjs/i18n`، استخدم [محول التوافق Nuxt i18n](https://intlayer.org/ar/doc/compatibility/nuxtjs-i18n)، وراجع [Intlayer مع Nuxt](https://intlayer.org/ar/doc/environment/nuxt-and-vue) للإعداد الأصلي.
+
+</Question>
+
+<Question title="هل يمكنني الترحيل مكونًا تلو الآخر؟">
+
+نعم. يمكن لأي مكون التبديل من `useI18n()` إلى `useIntlayer("footer")` باستخدام ملف محتوى مجاور له. يتعايش قاموسا JSON و `.content.ts` ويتم دمجهما بسلاسة.
+
+</Question>
+
+</FAQ>
 
 ## المقارنات ذات الصلة
 
-- [vue-i18n مقابل Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (الميزات وتجربة المطور)
-- [معيار vue-i18n مقابل Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (المكتبات، نفس المعيار)
-- [next-intl مقابل @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (نفس سلسلة المحولات)
-- [i18next مقابل @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (نفس سلسلة المحولات)
-- [Lingui مقابل @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (نفس سلسلة المحولات)
-- [دليل الترحيل: من vue-i18n إلى Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [مرجع محول التوافق: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+نفس سلسلة المحولات:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/ar/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/ar/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/ar/blog/lingui-vs-intlayer-lingui)
+
+مقارنة المكتبات جنبًا إلى جنب:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/ar/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/ar/blog/how-to-pick-vue-i18n-library)
+
+وثائق مرجعية:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/ar/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/ar/doc/compatibility/nuxtjs-i18n)
+- [دليل الترحيل: من vue-i18n إلى Intlayer](https://intlayer.org/ar/doc/migration/vue-i18n)
+- [تقرير قياس أداء Vue](https://intlayer.org/ar/doc/benchmark/vue)
+- [تحسين الحزمة](https://intlayer.org/ar/doc/concept/bundle-optimization) و [مترجم Intlayer](https://intlayer.org/ar/doc/compiler)
+- [المحرر المرئي](https://intlayer.org/ar/doc/concept/editor)، [نظام إدارة المحتوى (CMS)](https://intlayer.org/ar/doc/concept/cms) و [الترجمة بالذكاء الاصطناعي](https://intlayer.org/ar/doc/concept/auto-fill)
 
 ## الخلاصة
 
@@ -283,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 جميع البيانات الأولية وتطبيقات الاختبار والسكريبتات موجودة في [مستودع Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). قم بتشغيلها بنفسك.
 
-راجع وثيقة ['Why Intlayer?'](https://intlayer.org/doc/why) للحصول على مزيد من التفاصيل.
+راجع وثيقة ['Why Intlayer?'](https://intlayer.org/ar/doc/why) للحصول على مزيد من التفاصيل.

package/blog/ar/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n مقابل Intlayer
 description: مقارنة بين vue-i18n و Intlayer للتدويل (i18n) في تطبيقات Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n مقابل Intlayer | التدويل في Vue (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 تُقارن هذه الدليل بين خيارين شائعين للتدويل (i18n) لـ **Vue 3** (و **Nuxt**): **vue-i18n** و **Intlayer**.
 نركز على أدوات Vue الحديثة (Vite، Composition API) ونقيّم:
 
@@ -31,6 +33,8 @@ author: aymericzip
 6. **تجربة المطور (DX)، الأدوات والصيانة**
 7. **تحسين محركات البحث (SEO) وقابلية التوسع في المشاريع الكبيرة**
 
+<TOC/>
+
 > **ملخص**: كلاهما يمكنه تعريب تطبيقات Vue. إذا كنت تريد **محتوى مخصص للمكونات**، **أنواع TypeScript صارمة**، **فحوصات مفاتيح مفقودة أثناء البناء**، **قواميس معزولة بشجرة الاهتزاز (tree-shaken)**، و**مساعدات مدمجة للتوجيه وSEO** بالإضافة إلى **محرر بصري وترجمات مدعومة بالذكاء الاصطناعي**، فإن **Intlayer** هو الخيار الأكثر تكاملاً وحداثة.
 
 ## التموقع على مستوى عالٍ
@@ -38,6 +42,30 @@ author: aymericzip
 - **vue-i18n** - مكتبة التدويل الافتراضية لـ Vue. تنسيق رسائل مرن (نمط ICU)، كتل `<i18n>` في ملفات المكونات المفردة (SFC) للرسائل المحلية، ونظام بيئي كبير. الأمان والصيانة على نطاق واسع تقع بشكل رئيسي على عاتقك.
 - **Intlayer** - نموذج محتوى يركز على المكونات لـ Vue/Vite/Nuxt مع **أنواع TypeScript صارمة**، **فحوصات أثناء وقت البناء**، **عزل القواميس بشجرة الاهتزاز (tree-shaking)**، **مساعدات التوجيه وSEO**، محرر بصري/نظام إدارة محتوى اختياري، وترجمات مدعومة بالذكاء الاصطناعي.
 
+## ما هي التكلفة أثناء وقت البناء
+
+قبل جداول الميزات، الجزء المقاس. يقوم [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) ببناء نفس تطبيق Vite + Vue 3 (10 صفحات، 10 لغات) مع كل مكتبة ويسجل ما يقوم المتصفح بتنزيله:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+يزن وقت تشغيل `vue-i18n` بمفرده **6 أضعاف** Intlayer، وتحمل كل صفحة **90% من سلاسل الصفحات الأخرى**، والمكون المترجم بمعزل يسحب **196 كيلوبايت** لأن `useI18n()` يربطه بشجرة الرسائل العامة بأكملها. التقرير الكامل مع توقيتات التفاعل وتحميل الصفحة موجود في [مقارنة vue-i18n مقابل Intlayer](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> الجدول الكامل في [تقرير قياس أداء Vue](https://intlayer.org/ar/doc/benchmark/vue).
+
 ## مقارنة الميزات جنبًا إلى جنب (مركزة على Vue)
 
 | الميزة                                                                   | **Intlayer**                                                              | **vue-i18n**                                                           |
@@ -63,59 +91,74 @@ author: aymericzip
 
 ## مقارنة متعمقة
 
-### 1) البنية القابلة للتوسع والمرونة
+<AccordionGroup>
+<Accordion header="1) البنية وقابلية التوسع">
 
-- **vue-i18n**: الإعدادات الشائعة تستخدم **كتالوجات مركزية** لكل لغة (يمكن تقسيمها اختياريًا إلى ملفات/مساحات أسماء). كتل `<i18n>` في ملفات المكونات المفردة (SFC) تسمح برسائل محلية، لكن الفرق غالبًا ما تعود إلى الكتالوجات المشتركة مع نمو المشاريع.
+- **vue-i18n**: الإعدادات الشائعة تستخدم **كتالوجات مركزية** لكل لغة (يمكن تقسيمها اختياريًا إلى ملفات/مساحات أسماء). كتل `<i18n>` في ملفات المكونات المفردة (SFC) تسمح برسائل محلية، لكن الفرق غالبًا ما تعود إلى الكتالوجات المشتركة مع نمو المشاريع. راجع [i18n لكل مكون مقابل المركزية](https://intlayer.org/ar/blog/per-component-vs-centralized-i18n).
 - **Intlayer**: يشجع على **قواميس لكل مكون** مخزنة بجانب المكون الذي تخدمه. هذا يقلل من النزاعات بين الفرق، ويحافظ على اكتشاف المحتوى، ويحد بشكل طبيعي من الانحراف/المفاتيح غير المستخدمة.
 
 **لماذا هذا مهم:** في تطبيقات Vue الكبيرة أو أنظمة التصميم، **المحتوى المعياري** يتوسع بشكل أفضل من الكتالوجات الأحادية.
 
-### 2) TypeScript والأمان
+</Accordion>
+<Accordion header="2) TypeScript والأمان البرمجي">
 
 - **vue-i18n**: دعم جيد لـ TS؛ **الكتابة الصارمة للمفاتيح** عادة ما تحتاج إلى مخططات/جنيريكس مخصصة واتفاقيات دقيقة.
 - **Intlayer**: **ينشئ أنواعًا صارمة** من محتواك، مما يوفر **الإكمال التلقائي في بيئة التطوير (IDE)** و**أخطاء وقت الترجمة** للأخطاء الإملائية/المفاتيح المفقودة.
 
 **لماذا هذا مهم:** الكتابة الصارمة تكتشف المشاكل **قبل** وقت التشغيل.
 
-### 3) التعامل مع الترجمات المفقودة
+</Accordion>
+<Accordion header="3) التعامل مع الترجمات المفقودة">
 
-- **vue-i18n**: تحذيرات/استرجاعات **وقت التشغيل** (مثل الرجوع إلى لغة أو مفتاح بديل).
-- **Intlayer**: كشف **وقت البناء** مع تحذيرات/أخطاء عبر اللغات والمفاتيح.
+- **vue-i18n**: تحذيرات/استرجاعات **وقت التشغيل** (مثل الرجوع إلى لغة أو مفتاح بديل). راجع [اكتشاف الترجمات المفقودة](https://intlayer.org/ar/blog/detecting-missing-translations).
+- **Intlayer**: كشف **وقت البناء** مع تحذيرات/أخطاء عبر اللغات والمفاتيح.، بالإضافة إلى `npx intlayer test` في CI.
 
 **لماذا هذا مهم:** فرض القواعد وقت البناء يحافظ على واجهة المستخدم في الإنتاج نظيفة ومتسقة.
 
-### 4) التوجيه واستراتيجية عناوين URL (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) استراتيجية التوجيه وعناوين URL (Vue Router/Nuxt)">
 
-- **كلاهما** يمكن أن يعمل مع مسارات محلية.
+- **كلاهما** يمكن أن يعمل مع مسارات محلية. راجع [دليل hreflang](https://intlayer.org/ar/blog/hreflang-guide-multilingual-seo).
 - **Intlayer** يوفر مساعدات لـ **إنشاء مسارات محلية**، و**إدارة بادئات اللغة**، وإصدار **`<link rel="alternate" hreflang>`** لتحسين محركات البحث (SEO). مع Nuxt، يكمل توجيه الإطار.
 
 **لماذا هذا مهم:** تقليل طبقات الربط المخصصة و**تحسين SEO أنظف** عبر اللغات.
 
-### 5) الأداء وسلوك التحميل
+</Accordion>
+<Accordion header="5) الأداء وسلوك التحميل">
 
-- **vue-i18n**: يدعم رسائل اللغة غير المتزامنة؛ تجنب التجميع الزائد مسؤوليتك (قسّم الكتالوجات بعناية).
+- **vue-i18n**: يدعم رسائل اللغة غير المتزامنة؛ تجنب التجميع الزائد مسؤوليتك (قسّم الكتالوجات بعناية). يوضح الاختبار القياسي أعلاه ذلك بالأرقام: 134.9 كيلوبايت مقابل 57.1 كيلوبايت لكل صفحة.
 - **Intlayer**: يقوم بـ **تحليل الشجرة** أثناء البناء و**التحميل الكسول لكل قاموس/لغة**. المحتوى غير المستخدم لا يتم شحنه.
 
 **لماذا هذا مهم:** حزم أصغر وتشغيل أسرع لتطبيقات Vue متعددة اللغات.
 
-### 6) تجربة المطور والأدوات
+</Accordion>
+<Accordion header="6) تجربة المطور والأدوات">
 
 - **vue-i18n**: وثائق ومجتمع ناضج؛ ستعتمد عادةً على **منصات الترجمة الخارجية** لسير العمل التحريري.
-- **Intlayer**: يوفر **محرر بصري مجاني**، و**نظام إدارة محتوى اختياري** (متوافق مع Git أو خارجي)، و**امتداد VSCode**، وأدوات **CLI/CI**، وترجمات **مدعومة بالذكاء الاصطناعي** باستخدام مفاتيح المزود الخاصة بك.
+- **Intlayer**: يوفر **محرر بصري مجاني**، و**نظام إدارة محتوى اختياري** (متوافق مع Git أو خارجي)، و**امتداد VSCode**، وأدوات **CLI/CI**، وترجمات **مدعومة بالذكاء الاصطناعي** باستخدام مفاتيح المزود الخاصة بك.، و**خادم MCP**
 
 **لماذا هذا مهم:** تقليل تكلفة العمليات ودورة تطوير-محتوى أقصر.
 
-### 7) تحسين محركات البحث (SEO)، العرض من جانب الخادم (SSR) والتوليد الثابت للموقع (SSG)
+</Accordion>
+<Accordion header="7) تحسين محركات البحث (SEO)، SSR و SSG">
 
-- **كلاهما** يعمل مع Vue SSR وNuxt.
+- **كلاهما** يعمل مع Vue SSR وNuxt. راجع [التدويل وتحسين محركات البحث (SEO)](https://intlayer.org/ar/blog/SEO-and-i18n).
 - **Intlayer**: يضيف **مساعدات SEO** (خرائط الموقع/البيانات الوصفية/`hreflang`) التي لا تعتمد على إطار عمل معين وتتوافق بشكل جيد مع بناء Vue/Nuxt.
 
 **لماذا هذا مهم:** تحسين SEO دولي بدون تعقيدات خاصة.
 
+</Accordion>
+</AccordionGroup>
+
 ## لماذا Intlayer؟ (المشكلة والمنهجية)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 تبدأ معظم حزم i18n (بما في ذلك **vue-i18n**) من **كتالوجات مركزية**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="ملف واحد لكل لغة" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -127,7 +170,8 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
-أو باستخدام مجلدات لكل لغة:
+</Tab>
+<Tab label="مجلد واحد لكل لغة" value="per-folder">
 
 ```bash
 .
@@ -146,6 +190,34 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+يستمر هذا المجلد في التضخم، مساحة اسم واحدة لكل ميزة في كل لغة:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 غالبًا ما يبطئ هذا التطوير مع نمو التطبيقات:
 
 1. **لمكون جديد** تقوم بإنشاء/تعديل الكتالوجات البعيدة، ربط مساحات الأسماء، والترجمة (غالبًا عبر النسخ/اللصق اليدوي من أدوات الذكاء الاصطناعي).
@@ -161,7 +233,33 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
-**إعلان المحتوى** (لكل مكون):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+يجب تعديل كل ملف لغة يدويًا، والمفتاح مجرد نص عادي: أي خطأ مطبعي يظهر كـ `componentExample.greting` في الإنتاج.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -171,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -180,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**الاستخدام في Vue** (واجهة التكوين Composition API):
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // تكامل Vue
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -193,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+توجد جميع اللغات في ملف واحد محدد الأنواع بجوار المكون.
+
+</Tab>
+</Tabs>
+
 تتضمن هذه الطريقة:
 
 - **تسريع التطوير** (الإعلان مرة واحدة؛ الإكمال التلقائي من IDE/AI).
@@ -220,22 +322,71 @@ const { greeting } = useIntlayer("component-example");
 
 ## متى تختار أيهما؟
 
-- **اختر vue-i18n** إذا كنت تريد **النهج القياسي لـ Vue**، وتشعر بالراحة في إدارة الكتالوجات/المساحات الاسمية بنفسك، وكان تطبيقك **صغير إلى متوسط الحجم** (أو تعتمد بالفعل على Nuxt i18n).
-- **اختر Intlayer** إذا كنت تقدر **المحتوى المخصص للمكونات**، و**TypeScript الصارم**، و**ضمانات وقت البناء**، و**الاقتصاص الشجري (tree-shaking)**، وأدوات التوجيه/SEO/المحرر المدمجة-خاصةً لـ **قواعد كود Vue/Nuxt الكبيرة والمودولارية**.
+<AccordionGroup>
+<Accordion header="اختيار vue-i18n">
+
+تريد **النهج القياسي لـ Vue**، وتشعر بالراحة في إدارة القواميس ومساحات الأسماء بنفسك، وتطبيقك **صغير إلى متوسط الحجم** (أو تعتمد بالفعل على Nuxt i18n). كتل SFC `<i18n>` و `setLocaleMessage()` في وقت التشغيل هي ميزات لا يحاكيها Intlayer عمدًا.
+
+</Accordion>
+<Accordion header="اختيار Intlayer">
+
+تقدر **المحتوى المحدد بنطاق المكون**، و**TypeScript الصارم**، و**ضمانات وقت البناء**، و**tree-shaking**، وأدوات التوجيه ومحركات البحث والمحرر المدمجة، خاصة **لقواعد كود Vue/Nuxt المعيارية الكبيرة** وأنظمة التصميم. ابدأ مع [Intlayer مع Vue](https://intlayer.org/ar/doc/environment/vite-and-vue) أو [مع Nuxt](https://intlayer.org/ar/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="اختيار @intlayer/vue-i18n">
+
+تستخدم `vue-i18n` اليوم وتريد توفير حجم الحزمة دون تعديل ملفات `.vue`. يحافظ [محول التوافق](https://intlayer.org/ar/doc/compatibility/vue-i18n) على `createI18n` و `useI18n` و `t()` و `d()` و `n()` و `$t` و `v-t`، ويخدمها من قواميس مجمعة. تمت المقارنة جنبًا إلى جنب في [vue-i18n مقابل @intlayer/vue-i18n](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## التوافقية مع vue-i18n
 
 يمكن لـ `intlayer` أيضًا أن يساعدك في إدارة مساحات أسماء `vue-i18n` الخاصة بك.
 
-باستخدام `intlayer`، يمكنك التصريح عن محتواك بصيغة مكتبة i18n المفضلة لديك، وسيقوم intlayer بإنشاء مساحات الأسماء الخاصة بك في الموقع الذي تختاره (مثال: `/messages/{{locale}}/{{namespace}}.json`).
+باستخدام `intlayer`، يمكنك التصريح عن محتواك بصيغة مكتبة i18n المفضلة لديك، وسيقوم intlayer بإنشاء مساحات الأسماء الخاصة بك في الموقع الذي تختاره (مثال: `/messages/{{locale}}/{{namespace}}.json`). راجع [وثائق توافق vue-i18n](https://intlayer.org/ar/doc/compatibility/vue-i18n) و [محول Nuxt i18n](https://intlayer.org/ar/doc/compatibility/nuxtjs-i18n).
+
+## الأسئلة الشائعة
+
+<FAQ>
+
+<Question title="هل Intlayer بديل لـ vue-i18n أم طبقة فوقه؟">
+
+كلاهما، اعتمادًا على كيفية اعتماده. `vue-intlayer` هو وقت تشغيل أصلي مع دالة `useIntlayer()` خاصة به. `@intlayer/vue-i18n` هو محول توافق يحافظ على واجهة برمجة تطبيقات `vue-i18n` ويستبدل ما ترتبط به، حتى تتمكن من الترحيل دون لمس المكونات ثم المضي قدمًا ملفًا تلو الآخر بعد ذلك.
+
+</Question>
+
+<Question title="ماذا يحدث لكتل SFC <i18n> الخاصة بي؟">
+
+المحول لا يقرأها. انقل تلك الرسائل إلى ملف JSON الخاص باللغة، أو إلى ملف `.content.ts` بجوار المكون، وهو نفس المفهوم مع أنواع منشأة تلقائيًا. هذه هي ميزة `vue-i18n` الوحيدة التي لا يتم نقلها.
 
-## ملاحظات عملية للترحيل (من vue-i18n إلى Intlayer)
+</Question>
 
-- **ابدأ لكل ميزة على حدة**: انقل مسارًا/عرضًا/مكونًا واحدًا في كل مرة إلى قواميس Intlayer المحلية.
-- **الجسر أثناء الترحيل**: احتفظ بكتالوجات vue-i18n بالتوازي؛ واستبدل عمليات البحث تدريجيًا.
-- **تمكين الفحوصات الصارمة**: دع الكشف أثناء وقت البناء يظهر المفاتيح/اللغات المفقودة مبكرًا.
-- **اعتمد مساعدي التوجيه/SEO**: قم بتوحيد اكتشاف اللغة وعلامات `hreflang`.
-- **قِس الحزم**: توقع **انخفاض حجم الحزمة** مع استبعاد المحتوى غير المستخدم.
+<Question title="هل يعمل Intlayer مع Nuxt؟">
+
+نعم. يغطي [Intlayer مع Nuxt](https://intlayer.org/ar/doc/environment/nuxt-and-vue) التوجيه متعدد اللغات والبرمجيات الوسيطة للكشف عن اللغة وإنشاء خريطة الموقع. إذا كنت تستخدم `@nuxtjs/i18n`، فإن [محول توافق Nuxt i18n](https://intlayer.org/ar/doc/compatibility/nuxtjs-i18n) هو مسار الترحيل.
+
+</Question>
+
+<Question title="هل يمكنني الاحتفاظ بـ locales/{locale}.json كمصدر وحيد للحقيقة؟">
+
+نعم. يقرأها [ملحق مزامنة JSON](https://intlayer.org/ar/doc/compatibility/vue-i18n) بلهجة `vue-i18n` (`{name}`، `{0}`، وصيغ الجمع `"car | cars"`) ويكتب الترجمات مرة أخرى عندما يقوم CLI أو CMS بتحديثها.
+
+</Question>
+
+<Question title="هل يعمل ICU مع Intlayer على Vue؟">
+
+دعم ICU الأصلي قيد التطوير. يتعامل محول `@intlayer/vue-i18n` مع بناء جملة الرسائل الخاصة بـ `vue-i18n`، بما في ذلك صيغ الجمع والاستيفاء المحدد والقوائم. للحصول على نموذج صيغ الجمع الخاص بـ Intlayer، راجع [محتوى التعداد](https://intlayer.org/ar/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
+
+## GitHub STARs
+
+تعد نجوم GitHub مؤشرًا قويًا على شعبية المشروع وثقة المجتمع وأهميته على المدى الطويل. على الرغم من أنها ليست مقياسًا مباشرًا للجودة التقنية، إلا أنها تعكس عدد المطورين الذين يجدون المشروع مفيدًا ويتابعون تقدمه ومن المرجح أن يتبنوه. لتقدير قيمة المشروع، تساعد النجوم في مقارنة الإقبال عبر البدائل وتوفر رؤى حول نمو النظام البيئي.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## الخلاصة
 
@@ -244,4 +395,15 @@ const { greeting } = useIntlayer("component-example");
 - مع **Intlayer**، يأتي **المحتوى المعياري**، و**TypeScript الصارم**، و**السلامة أثناء وقت البناء**، و**حزم معزولة من الشجرة (tree-shaken)**، و**أدوات التوجيه/SEO/المحرر** **مضمنة بشكل افتراضي**.
 - إذا كانت أولويات فريقك هي **قابلية الصيانة والسرعة** في تطبيق Vue/Nuxt متعدد اللغات وموجه بالمكونات، فإن Intlayer يقدم **التجربة الأكثر اكتمالًا** اليوم.
 
-راجع مستند ['لماذا Intlayer؟'](https://intlayer.org/doc/why) لمزيد من التفاصيل.
+## قراءات إضافية
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/ar/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/ar/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/ar/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/ar/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/ar/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/ar/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/ar/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/ar/doc/why) for more details.