افضل مكتبات الترجمة في vue.js

في Vue.js، تتوفر عدة مكتبات لترجمة النصوص المتعددة اللغات، من بينها Vue I18n و Vuetify و Vue Translate، و يعتبر Vue I18n من أشهر هذه المكتبات، حيث توفر إمكانيات فعالة لترجمة النصوص بسهولة وإدارة اللغات المتعددة.

Vuetify توفر دعما مدمجا لترجمة النصوص عبر خدمة i18n، مما يجعلها خيارا مناسبا لمن يستخدم هذه المكتبة لتصميم واجهة المستخدم، أما بالنسبة لمكتبة Vue Translate، فهي مكتبة مستقلة توفر وظائف ترجمة النصوص المبنية على Vue.js. لتضمين أي من هذه المكتبات في مشروعك في Vue.js، يتطلب الأمر عادة تثبيت المكتبة المناسبة باستخدام npm أو yarn، ثم استيرادها في ملفات مشروعك، وتكوينها وفقا لاحتياجات مشروعك. 

ها هو مثال على كيفية استخدام مكتبة Vue I18n في تطبيق Vue.js:في الملف main.js (أو أي ملف رئيسي آخر)، يمكنك استيراد Vue و VueI18n وتكوين المكتبة كما يلي:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App.vue';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // اللغة الافتراضية
  messages: {
    en: {
      greeting: 'Hello!'
    },
    fr: {
      greeting: 'Bonjour!'
    },
    ar: {
      greeting: 'مرحباً!'
    }
  }
});

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
});

ثم، في ملف مكون Vue (مثل App.vue)، يمكنك استخدام المكونات التي تحتوي على نصوص يجب ترجمتها. على سبيل المثال:

<template>
  <div>
    <h1>{{ $t('greeting') }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    // يمكنك تغيير اللغة في وقت التشغيل
    this.$i18n.locale = 'fr'; // تغيير اللغة إلى الفرنسية
  }
}
</script>

هنا يتم تحديد مكتبة Vue I18n وتكوينها في الملف main.js. ثم يتم استخدام النص المترجم في مكون Vue (App.vue) باستخدام $t('greeting') حيث يتم ترجمة النص وفقا للغة المحددة في المكتبة.

حسنا، توجد عدة مكتبات للترجمة في Vue.js، وتختلف في الميزات والاستخدام لهذا فالاختيار يعتمد على احتياجات مشروعك ومستوى التكامل المطلوب، بعض المكتبات الشهيرة:

• Vue I18n: وهي المكتبة الرسمية للترجمة في Vue.js. 
• VeeValidate: بالإضافة إلى التحقق من البيانات، توفر VeeValidate أيضا دعما للترجمة لرسائل التحقق.
• Vue-Translate: تقدم وظائف بسيطة للترجمة.
• Vue-Multilanguage: توفر طريقة بسيطة لإضافة دعم للغات متعددة داخل التطبيق.

ولتضمين أيٍ من هذه المكتبات في مشاريعنا، يمكن اتباع هذه الخطوات:

• تثبيت المكتبة: من خلال استخدام npm أو yarn لتثبيت المكتبة التي نرغب في استخدامها. على سبيل المثال:،

•  `npm install vue-i18n`

  من أجل تثبيت Vue I18n.
• ولاستيرادها في المشروع: نتوجه إلى ملف الدخول الرئيسي للتطبيق (مثل main.js)، ثم نقوم بتضمين المكتبة عن طريق استيرادها.
• استخدامها في مكونات Vue: نقوم بتكوين واستخدام مكتبة الترجمة وفقا للتوثيقات والأمثلة المقدمة من قِبل المكتبة.

هذا مثال على كيفية استيرادها في المشروع:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

وهذا مثال آخر على كيفية استخدامها في مكونات Vue:

على سبيل المثال نقوم بإنشاء ملف للرسائل المترجمة مثل `messages.js` ونملؤه بالرسائل لكل لغة:

// messages.js
export default {
  en: {
    greeting: 'Hello!',
    welcome: 'Welcome to my Vue.js app.'
  },
  ar: {
    greeting: 'مرحبًا!',
    welcome: 'مرحباً بك في تطبيقي Vue.js.'
  }
};

بعدها نباشر في تكوين الترجمة، في ملف `main.js`، نقوم بتكوين VueI18n وتحميل الرسائل المترجمة:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './messages';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // اللغة الافتراضية
  fallbackLocale: 'en', // اللغة الاحتياطية
  messages, // الرسائل المترجمة
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

كما يمكن استخدام الترجمة في مكونات Vue الخاصة بنا عن طريق فلاتر معينة (filters) أو دوال خاصة بالترجمة. وهنا مثال على استخدامها في قالب:

<template>
  <div>
    <p>{{ $t('greeting') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

يوجد  Vue-i18n وتتميز بالتالي:

• مكتبة شائعة وموثوقة توفر وظائف ترجمة شاملة.
• تدعم الترجمة القائمة على المكونات والمفاتيح.
• سهلة الاستخدام مع واجهة برمجة تطبيقات واضحة.
• توفر ميزات متقدمة مثل التعدد اللغوي الديناميكي وترجمة السمات.

بجانب مكتبات أخرى مثل Vue-ns وvue-intl.

وتستطيع التوجه للمستند الرسمي لكل مكتبة وتفقد طريقة الاستخدام وكمثال ذلك هو المستند الرسمي لمكتبة Vue-i18n:

• https://kazupon.github.io/vue-i18n/introduction.html

هذه قائمة بافضل المكتبات الخاصة بالترجمة 

• Vue I18n 

يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا

• Vuex-i18n 

يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا

• vue-i18next 

يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا

• vue-gettext

يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا

هذه قائمة بافضل المكتبات الخاصة بالترجمة يمكنك زيارة موقع كل منها والتعرف على خصائصها واختيار الانسب بالنسبة لك ول احتياجات موقعك واتباع الخطوات اللازمة لتضمينها 

وبالنسبة لي افضل واسهل مكتبة هي vue-i18n , ساعلمك كيف تقوم بتضمينها في مشروعك عبر اتباع الخطوات التالية:

الخطوة الاولى :

•  بالبداية سنقوم بتثبيت هذا الحزمة عن طريق npm 

npm install vue-i18n

الخطوة الثانية :

قم بانشاء ملف main.js  وقم بتضمينها بداخله كالتالي :

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

الخطوة الثالثة :

 نقوم بتحديد لغة التطبيق واللغة التي نريد العمل عليها كالتالي :

export default new VueI18n({
 
language
  locale: 'en', //اللغة الافتراضية هنا 
  fallbackLocale: 'ar', // اللغة التي تريد الترجمة اليها 
  messages: {
    en: {
	// الترجمات الانحليزية
    },
    ar: {
      // الترجمات العربية 
    },
  },
});

الخطوة الرابعة :

اضافة الترجمات عن طريق انشاء مفتاح ل كل قيمة من خلال الكائن messages  كالتالي :

messages: {
  en: {
    greeting: 'Hello!',
    welcome: 'Welcome to hsoub academy .',
  },
  ar: {
    greeting: 'مرحبا ',
    welcome: ' اهلا وسهلا بك في اكاديمية حسوب ',
  },
},

هذه باختصار طريقة التضمين والترجمة 
وان كان لديك عدد كبير من الترجمات يمكننا الترجمة في ملفات منفصلة وذلك يجعل تنظيمها وادارتها وطريقة الوصول اليها اسهل بكثير 
لذا دعني اعطيك هذه الطريقة 

اولا : قم بانشاء ملفين
en.json  (للغة العربية )
ar.json ( للغة الانجليزية )

ثم قم باضافة الترجمات التي تريدها بنفس الطريقة المعتادة عن طريق اضافة مفتاح واسناد قيمة له 
 

{
    greeting: 'مرحبا ',
    welcome: ' اهلا وسهلا بك في اكاديمية حسوب ',
  }

والأن لنقم باستدعاء هذه الملفات داخل الملف الاساسي main.js كالتالي :

import en from './locales/en.json'
import es from './locales/es.json'

واضافتها للكائن messages  كالتالي 
 

messages: {
 en,
 ar
}

بالتوفيق لك 

 

في Vue.js، هناك عدة مكتبات ممتازة لترجمة النصوص افضلهم 
 

Vue I18n  : تعتبر واحدة من أشهر مكتبات الترجمة في Vue.js، توفر ميزات قوية لإدارة النصوص المترجمة بشكل فعال مع إمكانية التعامل مع تنسيقات الوقت والتاريخ والعملات.

Vue Translate : مكتبة خفيفة وسهلة الاستخدام تتيح لك ترجمة نصوص التطبيق بسهولة.

Vuelidate : تستخدم للتحقق من النماذج في Vue.js وتدعم الترجمة للرسائل الخطأ والتنبيهات.

Vue-intl : مكتبة مبنية على مكتبة FormatJS توفر ميزات قوية لترجمة النصوص وتنسيق التواريخ والأرقام.

تختلف طريقة تضمين هذه المكتبات في مشروع Vue.js بناءً على طريقة تنظيم مشروعك واعتمادك على مدير الحزم (Package Manager) مثل npm أو Yarn. ومن الممكن أيضًا تضمينها مباشرة من CDN في مشروعك إذا كنت تفضل ذلك.

نصيحتي انك تستخدم Vue I18n انا افضل هذه المكتبه لكثرة مميزاتها ساشرح لك مثال كامل لكيفية دمجها مع مشروعك 

اولا يجب عليك تشغيل الأمر التالي لتثبيت vue-i18n: 
 

npm install vue-i18n

في مشروع Vue الخاص بك، قم بإنشاء ملف جديد باسم i18n.js في دليل src. سيكون هذا الملف مسؤولاً عن تكوين vue-i18n.
 

import Vue from 'vue';
import VueI18n from 'vue-i18n';

قم بإنشاء كائن من الـ VueI18n وقم بتصديره للاستخدام عبر التطبيق الخاص بك:
 

export default new VueI18n({

  locale: 'en', // اللغه الافتراضيه
  fallbackLocale: 'en',
  messages: {
    en: {
      ترجمة الانجليزيه
    },
    ar: {
     الترجمه للعربيه
    },
  },
});

بعد الاتباع هذه الخطوات سيكون الملف بهذه الشكل
 

// src/i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'en', // اللغة الافتراضية
  fallbackLocale: 'en', // لغة الاحتياطية في حالة عدم العثور على الترجمة
  messages: {
    en: {
      welcome: 'Welcome to my Vue.js app!',
      greeting: 'Hello, how are you today?'
    },
    ar: {
      welcome: 'أهلاً بك في تطبيق Vue.js الخاص بي!',
      greeting: 'مرحباً، كيف حالك اليوم؟'
    },
  },
});

كيفية الاستخدام في اي  صفحة في مشروعك
 

<template>
  <div>
    <p>{{ $t('welcome') }}</p>
    <p>{{ $t('greeting') }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>