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