Intlayer

--- createdAt: 2024-08-11 updatedAt: 2025-08-23 title: vue-i18n مقابل Intlayer description: مقارنة بين vue-i18n و Intlayer للتدويل (i18n) في تطبيقات Vue/Nuxt keywords: - vue-i18n - Intlayer - التدويل - i18n - مدونة - Vue - Nuxt - جافاسكريبت slugs: - blog - vue-i18n-vs-intlayer --- # vue-i18n مقابل Intlayer | التدويل في Vue (i18n) تُقارن هذه الدليل بين خيارين شائعين للتدويل (i18n) لـ **Vue 3** (و **Nuxt**): **vue-i18n** و **Intlayer**. نركز على أدوات Vue الحديثة (Vite، Composition API) ونقيّم: 1. **البنية وتنظيم المحتوى** 2. **TypeScript والأمان** 3. **التعامل مع الترجمات المفقودة** 4. **التوجيه واستراتيجية عناوين URL** 5. **الأداء وسلوك التحميل** 6. **تجربة المطور (DX)، الأدوات والصيانة** 7. **تحسين محركات البحث (SEO) وقابلية التوسع في المشاريع الكبيرة** > **ملخص**: كلاهما يمكنه تعريب تطبيقات Vue. إذا كنت تريد **محتوى مخصص للمكونات**، **أنواع TypeScript صارمة**، **فحوصات مفاتيح مفقودة أثناء البناء**، **قواميس معزولة بشجرة الاهتزاز (tree-shaken)**، و**مساعدات مدمجة للتوجيه وSEO** بالإضافة إلى **محرر بصري وترجمات مدعومة بالذكاء الاصطناعي**، فإن **Intlayer** هو الخيار الأكثر تكاملاً وحداثة. --- ## التموقع على مستوى عالٍ - **vue-i18n** - مكتبة التدويل الافتراضية لـ Vue. تنسيق رسائل مرن (نمط ICU)، كتل `<i18n>` في ملفات المكونات المفردة (SFC) للرسائل المحلية، ونظام بيئي كبير. الأمان والصيانة على نطاق واسع تقع بشكل رئيسي على عاتقك. - **Intlayer** - نموذج محتوى يركز على المكونات لـ Vue/Vite/Nuxt مع **أنواع TypeScript صارمة**، **فحوصات أثناء وقت البناء**، **عزل القواميس بشجرة الاهتزاز (tree-shaking)**، **مساعدات التوجيه وSEO**، محرر بصري/نظام إدارة محتوى اختياري، وترجمات مدعومة بالذكاء الاصطناعي. --- ## مقارنة الميزات جنبًا إلى جنب (مركزة على Vue) | الميزة | **Intlayer** | **vue-i18n** | | ------------------------------------------------------------------------ | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | **الترجمات بالقرب من المكونات** | ✅ نعم، المحتوى متواجد بجانب كل مكون (مثلاً، `MyComp.content.ts`) | ✅ نعم، عبر كتل SFC `<i18n>` (اختياري) | | **تكامل TypeScript** | ✅ متقدم، أنواع **صارمة** مولدة تلقائيًا وإكمال تلقائي للمفاتيح | ✅ أنواع جيدة؛ **السلامة الصارمة للمفاتيح تتطلب إعدادات/انضباط إضافي** | | **كشف الترجمات المفقودة** | ✅ تحذيرات/أخطاء أثناء وقت البناء وظهور في TS | ⚠️ استرجاع/تحذيرات أثناء وقت التشغيل | | **المحتوى الغني (المكونات/Markdown)** | ✅ دعم مباشر للعناصر الغنية وملفات محتوى Markdown | ⚠️ محدود (المكونات عبر `<i18n-t>`, وMarkdown عبر إضافات خارجية) | | **الترجمة المدعومة بالذكاء الاصطناعي** | ✅ سير عمل مدمج باستخدام مفاتيح مزود الذكاء الاصطناعي الخاصة بك | ❌ غير مدمج | | **المحرر المرئي / نظام إدارة المحتوى (CMS)** | ✅ محرر مرئي مجاني ونظام إدارة محتوى اختياري | ❌ غير مدمج (استخدم منصات خارجية) | | **التوجيه المحلي** | ✅ أدوات مساعدة لـ Vue Router/Nuxt لإنشاء مسارات وروابط محلية و`hreflang` | ⚠️ ليس جزءًا أساسيًا (استخدم Nuxt i18n أو إعداد Vue Router مخصص) | | **توليد المسارات الديناميكية** | ✅ نعم | ❌ غير متوفر (يوفره Nuxt i18n) | | **التعددية والتنسيق** | ✅ أنماط تعداد؛ منسقات تعتمد على Intl | ✅ رسائل بأسلوب ICU؛ منسقات Intl | | **صياغات المحتوى** | ✅ `.ts`، `.js`، `.json`، `.md`، `.txt` (YAML قيد العمل) | ✅ `.json`، `.js` (بالإضافة إلى كتل SFC `<i18n>`) | | **دعم ICU** | ⚠️ قيد العمل | ✅ نعم | | **أدوات تحسين محركات البحث (خريطة الموقع، الروبوتات، البيانات الوصفية)** | ✅ أدوات مساعدة مدمجة (غير مرتبطة بإطار عمل معين) | ❌ ليست جزءًا أساسيًا (Nuxt i18n/المجتمع) | | **SSR/SSG** | ✅ يعمل مع Vue SSR و Nuxt؛ لا يعيق التقديم الثابت | ✅ يعمل مع Vue SSR/Nuxt | | **إزالة الشجر (شحن المحتوى المستخدم فقط)** | ✅ لكل مكون أثناء وقت البناء | ⚠️ جزئي؛ يتطلب تقسيم الكود يدويًا / رسائل غير متزامنة | | **التحميل الكسول** | ✅ لكل لغة / لكل قاموس | ✅ دعم رسائل اللغة غير المتزامنة | | **تنقية المحتوى غير المستخدم** | ✅ نعم (وقت البناء) | ❌ غير مدمج | | **قابلية صيانة المشاريع الكبيرة** | ✅ يشجع على هيكلية معيارية وصديقة لأنظمة التصميم | ✅ ممكن، لكنه يحتاج إلى انضباط قوي في الملفات/المساحات الاسمية | | **النظام البيئي / المجتمع** | ⚠️ أصغر لكنه ينمو بسرعة | ✅ كبير وناضج في نظام Vue البيئي | --- ## مقارنة متعمقة ### 1) البنية القابلة للتوسع والمرونة - **vue-i18n**: الإعدادات الشائعة تستخدم **كتالوجات مركزية** لكل لغة (يمكن تقسيمها اختياريًا إلى ملفات/مساحات أسماء). كتل `<i18n>` في ملفات المكونات المفردة (SFC) تسمح برسائل محلية، لكن الفرق غالبًا ما تعود إلى الكتالوجات المشتركة مع نمو المشاريع. - **Intlayer**: يشجع على **قواميس لكل مكون** مخزنة بجانب المكون الذي تخدمه. هذا يقلل من النزاعات بين الفرق، ويحافظ على اكتشاف المحتوى، ويحد بشكل طبيعي من الانحراف/المفاتيح غير المستخدمة. **لماذا هذا مهم:** في تطبيقات Vue الكبيرة أو أنظمة التصميم، **المحتوى المعياري** يتوسع بشكل أفضل من الكتالوجات الأحادية. --- ### 2) TypeScript والأمان - **vue-i18n**: دعم جيد لـ TS؛ **الكتابة الصارمة للمفاتيح** عادة ما تحتاج إلى مخططات/جنيريكس مخصصة واتفاقيات دقيقة. - **Intlayer**: **ينشئ أنواعًا صارمة** من محتواك، مما يوفر **الإكمال التلقائي في بيئة التطوير (IDE)** و**أخطاء وقت الترجمة** للأخطاء الإملائية/المفاتيح المفقودة. **لماذا هذا مهم:** الكتابة الصارمة تكتشف المشاكل **قبل** وقت التشغيل. --- ### 3) التعامل مع الترجمات المفقودة - **vue-i18n**: تحذيرات/استرجاعات **وقت التشغيل** (مثل الرجوع إلى لغة أو مفتاح بديل). - **Intlayer**: كشف **وقت البناء** مع تحذيرات/أخطاء عبر اللغات والمفاتيح. **لماذا هذا مهم:** فرض القواعد وقت البناء يحافظ على واجهة المستخدم في الإنتاج نظيفة ومتسقة. --- ### 4) التوجيه واستراتيجية عناوين URL (Vue Router/Nuxt) - **كلاهما** يمكن أن يعمل مع مسارات محلية. - **Intlayer** يوفر مساعدات لـ **إنشاء مسارات محلية**، و**إدارة بادئات اللغة**، وإصدار **`<link rel="alternate" hreflang>`** لتحسين محركات البحث (SEO). مع Nuxt، يكمل توجيه الإطار. **لماذا هذا مهم:** تقليل طبقات الربط المخصصة و**تحسين SEO أنظف** عبر اللغات. --- ### 5) الأداء وسلوك التحميل - **vue-i18n**: يدعم رسائل اللغة غير المتزامنة؛ تجنب التجميع الزائد مسؤوليتك (قسّم الكتالوجات بعناية). - **Intlayer**: يقوم بـ **تحليل الشجرة** أثناء البناء و**التحميل الكسول لكل قاموس/لغة**. المحتوى غير المستخدم لا يتم شحنه. **لماذا هذا مهم:** حزم أصغر وتشغيل أسرع لتطبيقات Vue متعددة اللغات. --- ### 6) تجربة المطور والأدوات - **vue-i18n**: وثائق ومجتمع ناضج؛ ستعتمد عادةً على **منصات الترجمة الخارجية** لسير العمل التحريري. - **Intlayer**: يوفر **محرر بصري مجاني**، و**نظام إدارة محتوى اختياري** (متوافق مع Git أو خارجي)، و**امتداد VSCode**، وأدوات **CLI/CI**، وترجمات **مدعومة بالذكاء الاصطناعي** باستخدام مفاتيح المزود الخاصة بك. **لماذا هذا مهم:** تقليل تكلفة العمليات ودورة تطوير-محتوى أقصر. --- ### 7) تحسين محركات البحث (SEO)، العرض من جانب الخادم (SSR) والتوليد الثابت للموقع (SSG) - **كلاهما** يعمل مع Vue SSR وNuxt. - **Intlayer**: يضيف **مساعدات SEO** (خرائط الموقع/البيانات الوصفية/`hreflang`) التي لا تعتمد على إطار عمل معين وتتوافق بشكل جيد مع بناء Vue/Nuxt. **لماذا هذا مهم:** تحسين SEO دولي بدون تعقيدات خاصة. --- ## لماذا Intlayer؟ (المشكلة والمنهجية) تبدأ معظم حزم i18n (بما في ذلك **vue-i18n**) من **كتالوجات مركزية**: ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json └── src └── components └── MyComponent.vue ``` أو باستخدام مجلدات لكل لغة: ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json └── src └── components └── MyComponent.vue ``` غالبًا ما يبطئ هذا التطوير مع نمو التطبيقات: 1. **لمكون جديد** تقوم بإنشاء/تعديل الكتالوجات البعيدة، ربط مساحات الأسماء، والترجمة (غالبًا عبر النسخ/اللصق اليدوي من أدوات الذكاء الاصطناعي). 2. **عند تغيير المكونات** تبحث عن المفاتيح المشتركة، تترجم، تحافظ على تزامن اللغات، تزيل المفاتيح غير المستخدمة، وتنسق هياكل JSON. **Intlayer** يحدد المحتوى **لكل مكون** ويحتفظ به **بالقرب من الكود**، كما نفعل بالفعل مع CSS، والقصص، والاختبارات، والوثائق: ```bash . └── components └── MyComponent ├── MyComponent.content.ts └── MyComponent.vue ``` **إعلان المحتوى** (لكل مكون): ```ts fileName="./components/MyComponent/MyComponent.content.ts" import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { greeting: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` **الاستخدام في Vue** (واجهة التكوين Composition API): ```vue fileName="./components/MyComponent/MyComponent.vue" <script setup lang="ts"> import { useIntlayer } from "vue-intlayer"; // تكامل Vue const { greeting } = useIntlayer("component-example"); </script> <template> <span>{{ greeting }}</span> </template> ``` تتضمن هذه الطريقة: - **تسريع التطوير** (الإعلان مرة واحدة؛ الإكمال التلقائي من IDE/AI). - **تنظيف قاعدة الكود** (مكون واحد = قاموس واحد). - **تسهيل التكرار/الترحيل** (نسخ المكون ومحتواه معًا). - **تجنب المفاتيح الميتة** (المكونات غير المستخدمة لا تستورد المحتوى). - **تحسين التحميل** (المكونات المحملة عند الطلب تجلب محتواها معها). --- ## ميزات إضافية لـ Intlayer (ذات صلة بـ Vue) - **دعم عبر الأُطُر المختلفة**: يعمل مع Vue، Nuxt، Vite، React، Express، والمزيد. - **إدارة المحتوى مدعومة بجافاسكريبت**: الإعلان في الكود مع مرونة كاملة. - **ملف إعلان لكل لغة**: قم بتهيئة جميع اللغات ودع الأدوات تولد الباقي. - **بيئة آمنة من حيث النوع**: إعداد TS قوي مع الإكمال التلقائي. - **استرجاع محتوى مبسط**: هوك/مركب واحد لجلب كل المحتوى لقاموس معين. - **قاعدة كود منظمة**: مكون واحد = قاموس واحد في نفس المجلد. - **توجيه محسّن**: مساعدات لمسارات وبيانات وصفية محلية لـ **Vue Router/Nuxt**. - **دعم Markdown**: استيراد Markdown عن بُعد/محلي لكل لغة؛ عرض البيانات الوصفية في الكود. - **محرر بصري مجاني ونظام إدارة محتوى اختياري**: التأليف بدون منصة ترجمة مدفوعة؛ مزامنة صديقة لـ Git. - **محتوى قابل للاقتصاص الشجري (Tree-shakable)**: يشحن فقط ما يُستخدم؛ يدعم التحميل عند الطلب. - **صديق للتصيير الثابت**: لا يعيق SSG. - **ترجمات مدعومة بالذكاء الاصطناعي**: ترجم إلى 231 لغة باستخدام مزود الذكاء الاصطناعي الخاص بك/مفتاح API. - **خادم MCP وامتداد VSCode**: أتمتة سير عمل i18n والتأليف داخل بيئة التطوير المتكاملة الخاصة بك. - **التشغيل البيني**: جسور مع **vue-i18n**، **react-i18next**، و **react-intl** عند الحاجة. --- ## متى تختار أيهما؟ - **اختر vue-i18n** إذا كنت تريد **النهج القياسي لـ Vue**، وتشعر بالراحة في إدارة الكتالوجات/المساحات الاسمية بنفسك، وكان تطبيقك **صغير إلى متوسط الحجم** (أو تعتمد بالفعل على Nuxt i18n). - **اختر Intlayer** إذا كنت تقدر **المحتوى المخصص للمكونات**، و**TypeScript الصارم**، و**ضمانات وقت البناء**، و**الاقتصاص الشجري (tree-shaking)**، وأدوات التوجيه/SEO/المحرر المدمجة-خاصةً لـ **قواعد كود Vue/Nuxt الكبيرة والمودولارية**. --- ## ملاحظات عملية للترحيل (من vue-i18n إلى Intlayer) - **ابدأ لكل ميزة على حدة**: انقل مسارًا/عرضًا/مكونًا واحدًا في كل مرة إلى قواميس Intlayer المحلية. - **الجسر أثناء الترحيل**: احتفظ بكتالوجات vue-i18n بالتوازي؛ واستبدل عمليات البحث تدريجيًا. - **تمكين الفحوصات الصارمة**: دع الكشف أثناء وقت البناء يظهر المفاتيح/اللغات المفقودة مبكرًا. - **اعتمد مساعدي التوجيه/SEO**: قم بتوحيد اكتشاف اللغة وعلامات `hreflang`. - **قِس الحزم**: توقع **انخفاض حجم الحزمة** مع استبعاد المحتوى غير المستخدم. --- ## الخلاصة كلا من **vue-i18n** و **Intlayer** يقومان بتوطين تطبيقات Vue بشكل جيد. الفرق هو **مدى ما يجب عليك بناؤه بنفسك** لتحقيق إعداد قوي وقابل للتوسع: - مع **Intlayer**، يأتي **المحتوى المعياري**، و**TypeScript الصارم**، و**السلامة أثناء وقت البناء**، و**حزم معزولة من الشجرة (tree-shaken)**، و**أدوات التوجيه/SEO/المحرر** **مضمنة بشكل افتراضي**. - إذا كانت أولويات فريقك هي **قابلية الصيانة والسرعة** في تطبيق Vue/Nuxt متعدد اللغات وموجه بالمكونات، فإن Intlayer يقدم **التجربة الأكثر اكتمالًا** اليوم. راجع مستند ['لماذا Intlayer؟'](https://intlayer.org/doc/why) لمزيد من التفاصيل.