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)

مقارنة متعمقة

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) من كتالوجات مركزية:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json└── src    └── components        └── MyComponent.vue

أو باستخدام مجلدات لكل لغة:

.├── 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، والقصص، والاختبارات، والوثائق:

.└── components    └── MyComponent        ├── MyComponent.content.ts        └── MyComponent.vue

إعلان المحتوى (لكل مكون):

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):

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // تكامل Vueconst { 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؟' لمزيد من التفاصيل.