\n\n\n```\n\nتتضمن هذه الطريقة:\n\n- **تسريع التطوير** (الإعلان مرة واحدة؛ الإكمال التلقائي من IDE/AI).\n- **تنظيف قاعدة الكود** (مكون واحد = قاموس واحد).\n- **تسهيل التكرار/الترحيل** (نسخ المكون ومحتواه معًا).\n- **تجنب المفاتيح الميتة** (المكونات غير المستخدمة لا تستورد المحتوى).\n- **تحسين التحميل** (المكونات المحملة عند الطلب تجلب محتواها معها).\n\n---\n\n## ميزات إضافية لـ Intlayer (ذات صلة بـ Vue)\n\n- **دعم عبر الأُطُر المختلفة**: يعمل مع Vue، Nuxt، Vite، React، Express، والمزيد.\n- **إدارة المحتوى مدعومة بجافاسكريبت**: الإعلان في الكود مع مرونة كاملة.\n- **ملف إعلان لكل لغة**: قم بتهيئة جميع اللغات ودع الأدوات تولد الباقي.\n- **بيئة آمنة من حيث النوع**: إعداد TS قوي مع الإكمال التلقائي.\n- **استرجاع محتوى مبسط**: هوك/مركب واحد لجلب كل المحتوى لقاموس معين.\n- **قاعدة كود منظمة**: مكون واحد = قاموس واحد في نفس المجلد.\n- **توجيه محسّن**: مساعدات لمسارات وبيانات وصفية محلية لـ **Vue Router/Nuxt**.\n- **دعم Markdown**: استيراد Markdown عن بُعد/محلي لكل لغة؛ عرض البيانات الوصفية في الكود.\n- **محرر بصري مجاني ونظام إدارة محتوى اختياري**: التأليف بدون منصة ترجمة مدفوعة؛ مزامنة صديقة لـ Git.\n- **محتوى قابل للاقتصاص الشجري (Tree-shakable)**: يشحن فقط ما يُستخدم؛ يدعم التحميل عند الطلب.\n- **صديق للتصيير الثابت**: لا يعيق SSG.\n- **ترجمات مدعومة بالذكاء الاصطناعي**: ترجم إلى 231 لغة باستخدام مزود الذكاء الاصطناعي الخاص بك/مفتاح API.\n- **خادم MCP وامتداد VSCode**: أتمتة سير عمل i18n والتأليف داخل بيئة التطوير المتكاملة الخاصة بك.\n- **التشغيل البيني**: جسور مع **vue-i18n**، **react-i18next**، و **react-intl** عند الحاجة.\n\n---\n\n## متى تختار أيهما؟\n\n- **اختر vue-i18n** إذا كنت تريد **النهج القياسي لـ Vue**، وتشعر بالراحة في إدارة الكتالوجات/المساحات الاسمية بنفسك، وكان تطبيقك **صغير إلى متوسط الحجم** (أو تعتمد بالفعل على Nuxt i18n).\n- **اختر Intlayer** إذا كنت تقدر **المحتوى المخصص للمكونات**، و**TypeScript الصارم**، و**ضمانات وقت البناء**، و**الاقتصاص الشجري (tree-shaking)**، وأدوات التوجيه/SEO/المحرر المدمجة-خاصةً لـ **قواعد كود Vue/Nuxt الكبيرة والمودولارية**.\n\n---\n\n## ملاحظات عملية للترحيل (من vue-i18n إلى Intlayer)\n\n- **ابدأ لكل ميزة على حدة**: انقل مسارًا/عرضًا/مكونًا واحدًا في كل مرة إلى قواميس Intlayer المحلية.\n- **الجسر أثناء الترحيل**: احتفظ بكتالوجات vue-i18n بالتوازي؛ واستبدل عمليات البحث تدريجيًا.\n- **تمكين الفحوصات الصارمة**: دع الكشف أثناء وقت البناء يظهر المفاتيح/اللغات المفقودة مبكرًا.\n- **اعتمد مساعدي التوجيه/SEO**: قم بتوحيد اكتشاف اللغة وعلامات `hreflang`.\n- **قِس الحزم**: توقع **انخفاض حجم الحزمة** مع استبعاد المحتوى غير المستخدم.\n\n---\n\n## الخلاصة\n\nكلا من **vue-i18n** و **Intlayer** يقومان بتوطين تطبيقات Vue بشكل جيد. الفرق هو **مدى ما يجب عليك بناؤه بنفسك** لتحقيق إعداد قوي وقابل للتوسع:\n\n- مع **Intlayer**، يأتي **المحتوى المعياري**، و**TypeScript الصارم**، و**السلامة أثناء وقت البناء**، و**حزم معزولة من الشجرة (tree-shaken)**، و**أدوات التوجيه/SEO/المحرر** **مضمنة بشكل افتراضي**.\n- إذا كانت أولويات فريقك هي **قابلية الصيانة والسرعة** في تطبيق Vue/Nuxt متعدد اللغات وموجه بالمكونات، فإن Intlayer يقدم **التجربة الأكثر اكتمالًا** اليوم.\n\nراجع مستند ['لماذا Intlayer؟'](https://intlayer.org/doc/why) لمزيد من التفاصيل.\n","about":"مقارنة بين vue-i18n و Intlayer للتدويل (i18n) في تطبيقات Vue/Nuxt","url":"https://intlayer.org/ar/blog/vue-i18n-vs-intlayer","datePublished":"11-08-2024","dateModified":"23-08-2025","keywords":"vue-i18n, Intlayer, التدويل, i18n, مدونة, Vue, Nuxt, جافاسكريبت","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"المطورون ومديرو المحتوى"}}

إنشاء:2024-08-11آخر تحديث:2025-08-23

استخدم هذه الصفحة والموفر AI الذي تريده

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية

تعديل هذه الوثيقة

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

نسخ

نسخ الـ Markdown من المستند إلى الحافظة

vue-i18n مقابل Intlayer | التدويل في Vue (i18n)

تُقارن هذه الدليل بين خيارين شائعين للتدويل (i18n) لـ Vue 3 (و Nuxt): vue-i18n و Intlayer. نركز على أدوات Vue الحديثة (Vite، Composition API) ونقيّم:

البنية وتنظيم المحتوى
TypeScript والأمان
التعامل مع الترجمات المفقودة
التوجيه واستراتيجية عناوين URL
الأداء وسلوك التحميل
تجربة المطور (DX)، الأدوات والصيانة
تحسين محركات البحث (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

غالبًا ما يبطئ هذا التطوير مع نمو التطبيقات:

لمكون جديد تقوم بإنشاء/تعديل الكتالوجات البعيدة، ربط مساحات الأسماء، والترجمة (غالبًا عبر النسخ/اللصق اليدوي من أدوات الذكاء الاصطناعي).
عند تغيير المكونات تبحث عن المفاتيح المشتركة، تترجم، تحافظ على تزامن اللغات، تزيل المفاتيح غير المستخدمة، وتنسق هياكل JSON.

Intlayer يحدد المحتوى لكل مكون ويحتفظ به بالقرب من الكود، كما نفعل بالفعل مع CSS، والقصص، والاختبارات، والوثائق:

bash

نسخ الكود

نسخ الكود إلى الحافظة

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

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

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

./components/MyComponent/MyComponent.vue

نسخ الكود

نسخ الكود إلى الحافظة

<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؟' لمزيد من التفاصيل.

ما هو التدويل (i18n)?

إنشاء:2024-08-11آخر تحديث:2025-08-23

استخدم هذه الصفحة والموفر AI الذي تريده

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية

تعديل هذه الوثيقة

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

نسخ

نسخ الـ Markdown من المستند إلى الحافظة

vue-i18n مقابل Intlayer | التدويل في Vue (i18n)

البنية وتنظيم المحتوى
TypeScript والأمان
التعامل مع الترجمات المفقودة
التوجيه واستراتيجية عناوين URL
الأداء وسلوك التحميل
تجربة المطور (DX)، الأدوات والصيانة
تحسين محركات البحث (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: يشجع على قواميس لكل مكون مخزنة بجانب المكون الذي تخدمه. هذا يقلل من النزاعات بين الفرق، ويحافظ على اكتشاف المحتوى، ويحد بشكل طبيعي من الانحراف/المفاتيح غير المستخدمة.

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

.├── 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

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

غالبًا ما يبطئ هذا التطوير مع نمو التطبيقات:

لمكون جديد تقوم بإنشاء/تعديل الكتالوجات البعيدة، ربط مساحات الأسماء، والترجمة (غالبًا عبر النسخ/اللصق اليدوي من أدوات الذكاء الاصطناعي).
عند تغيير المكونات تبحث عن المفاتيح المشتركة، تترجم، تحافظ على تزامن اللغات، تزيل المفاتيح غير المستخدمة، وتنسق هياكل JSON.

bash

نسخ الكود

نسخ الكود إلى الحافظة

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

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

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

./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;

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

./components/MyComponent/MyComponent.vue

نسخ الكود

نسخ الكود إلى الحافظة

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // تكامل Vueconst { greeting } = useIntlayer("component-example");</script><template>  <span>{{ greeting }}</span></template>

<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.
قِس الحزم: توقع انخفاض حجم الحزمة مع استبعاد المحتوى غير المستخدم.

الخلاصة

مع Intlayer، يأتي المحتوى المعياري، وTypeScript الصارم، والسلامة أثناء وقت البناء، وحزم معزولة من الشجرة (tree-shaken)، وأدوات التوجيه/SEO/المحرر مضمنة بشكل افتراضي.
إذا كانت أولويات فريقك هي قابلية الصيانة والسرعة في تطبيق Vue/Nuxt متعدد اللغات وموجه بالمكونات، فإن Intlayer يقدم التجربة الأكثر اكتمالًا اليوم.

راجع مستند 'لماذا Intlayer؟' لمزيد من التفاصيل.

ما هو التدويل (i18n)?