Creation:2025-06-18Last update:2026-05-31

    ترجمة موقع Nuxt و Vue الخاص بك باستخدام Intlayer | التدويل (i18n)

    جدول المحتويات

    لماذا Intlayer على البدائل؟

    بالمقارنة مع الحلول الرئيسية مثل @nuxtjs/i18n أو i18next، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:

    تغطية Nuxt الكاملة

    تم تحسين Intlayer للعمل بشكل مثالي مع Nuxt من خلال تقديم توجيه متعدد اللغات، برامج وسيطة للكشف عن اللغة، خريطة الموقع، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n).

    حجم البندل

    بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer في تقليل أحجام البندل وصفحاتك بنسبة تصل إلى 50%.

    الصيانة

    يؤدي تحديد نطاق محتوى تطبيقك إلى تسهيل الصيانة للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer بالكامل لضمان دقة المحتوى الخاص بك.

    وكيل الذكاء الاصطناعي

    يؤدي تحديد موقع المحتوى المشترك إلى تقليل السياق المطلوب بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل CLI لاختبار الترجمات المفقودة،LSP، MCP ومهارات الوكيل، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.

    الأتمتة

    استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا مترجمًا لأتمتة استخراج المحتوى، بالإضافة إلى منصة ويب للمساعدة في الترجمة في الخلفية.

    أداء

    يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.

    التحجيم مع عدم وجود مطور

    أكثر من مجرد حل i18n، يوفر Intlayer [محررًا مرئيًا] مستضافًا ذاتيًا](/ar/doc/concept/editor) وكامل CMS لمساعدتك في إدارة المحتوى متعدد اللغات في الوقت الفعلي، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.

    دليل خطوة بخطوة لإعداد Intlayer في تطبيق Nuxt

    www.youtube.com

    راجع قالب التطبيق على GitHub.

    1. تثبيت التبعيات

      قم بتثبيت الحزم اللازمة باستخدام npm:

      bash
      npm install intlayer vue-intlayernpm install --save-dev nuxt-intlayernpx intlayer init

      • intlayer

        الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، الترجمة، إعلان المحتوى، التحويل البرمجي، وأوامر CLI.

      • vue-intlayer الحزمة التي تدمج Intlayer مع تطبيق Vue. تحتوي على composables لمكونات Vue.

      • nuxt-intlayer وحدة Nuxt التي تدمج Intlayer مع تطبيقات Nuxt. توفر إعدادًا تلقائيًا، وmiddleware لاكتشاف اللغة، وإدارة الكوكيز، وإعادة توجيه URL.

    2. تكوين مشروعك

      أنشئ ملف تكوين لتحديد لغات تطبيقك:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // لغات أخرى خاصة بك
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء الكوكيز، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع توثيق التكوين.

    3. دمج Intlayer في تكوين Nuxt الخاص بك

      أضف وحدة intlayer إلى تكوين Nuxt الخاص بك:

      nuxt.config.ts
      import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  // ... تكوين Nuxt الحالي الخاص بك  modules: ["nuxt-intlayer"],});
      تقوم وحدة nuxt-intlayer تلقائيًا بالتعامل مع دمج Intlayer مع Nuxt. فهي تقوم بإعداد بناء إعلان المحتوى، ومراقبة الملفات في وضع التطوير، وتوفير middleware لاكتشاف اللغة، وإدارة التوجيه المحلي.

    4. إعلان المحتوى الخاص بك

      قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:

      يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك طالما تم تضمينها في دليل contentDir (افتراضيًا، ./src). ويجب أن تتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
      لمزيد من التفاصيل، راجع توثيق إعلان المحتوى.

    5. استخدام Intlayer في كودك

      يمكنك الوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيق Nuxt الخاص بك باستخدام الـ useIntlayer composable:

      components/HelloWorld.vue
      <script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  nuxtIntlayer,  learnMore,  nuxtDocs,  readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://nuxt.com/docs/getting-started/introduction" target="_blank"      >Nuxt</a    >، <nuxtIntlayer />  </p>  <p>    <learnMore />    <a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>.  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

      الوصول إلى المحتوى في Intlayer

      يقدم Intlayer واجهات برمجة تطبيقات مختلفة للوصول إلى المحتوى الخاص بك:

      • بناء الجملة المعتمد على المكونات (موصى به): استخدم بناء الجملة <myContent />، أو <Component :is="myContent" /> لعرض المحتوى كعقدة Intlayer. هذا يتكامل بسلاسة مع المحرر المرئي و نظام إدارة المحتوى (CMS).

      • بناء الجملة المعتمد على النص: استخدم {{ myContent }} لعرض المحتوى كنص عادي، بدون دعم المحرر المرئي.

      • بناء جملة HTML الخام: استخدم <div v-html="myContent" /> لعرض المحتوى كـ HTML خام، بدون دعم المحرر المرئي.

      • بناء جملة التفكيك: الدالة القابلة للاستخدام useIntlayer تُرجع Proxy يحتوي على المحتوى. يمكن تفكيك هذا البروكسي للوصول إلى المحتوى مع الحفاظ على التفاعلية.

        • استخدم const content = useIntlayer("myContent"); و {{ content.myContent }} / <content.myContent />.
        • أو استخدم const { myContent } = useIntlayer("myContent"); و {{ myContent}} / <myContent/> لتفكيك المحتوى.

    6. تغيير لغة المحتوى الخاص بك

      اختياري

      لتغيير لغة المحتوى الخاص بك، يمكنك استخدام الدالة setLocale المقدمة من الدالة القابلة للاستخدام useLocale. تتيح لك هذه الدالة تعيين لغة التطبيق وتحديث المحتوى وفقًا لذلك.

      قم بإنشاء مكون للتبديل بين اللغات باستخدام NuxtLink. استخدام الروابط بدلاً من الأزرار للتبديل بين اللغات هو أفضل ممارسة لتحسين محركات البحث وقابلية اكتشاف الصفحات، حيث يسمح لمحركات البحث بفهرسة جميع النسخ المحلية من صفحاتك:

      components/LocaleSwitcher.vue
      <script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Nuxt يقوم بالاستيراد التلقائي لـ useRouteconst route = useRoute();const { locale, availableLocales, setLocale } = useLocale();</script><template>  <nav class="locale-switcher">    <NuxtLink      v-for="localeEl in availableLocales"      :key="localeEl"      :to="getLocalizedUrl(route.fullPath, localeEl)"      class="locale-link"      :class="{ 'active-locale': localeEl === locale }"      @click="setLocale(localeEl)"    >      {{ getLocaleName(localeEl) }}    </NuxtLink>  </nav></template>
      استخدام NuxtLink مع سمات href الصحيحة (عبر getLocalizedUrl) يضمن أن محركات البحث يمكنها اكتشاف جميع النسخ اللغوية لصفحاتك. هذا أفضل من التبديل بين اللغات باستخدام جافا سكريبت فقط، والذي قد لا تتبعه عناكب محركات البحث.

      بعد ذلك، قم بإعداد ملف app.vue لاستخدام التخطيطات:

      app.vue
      <template>  <NuxtLayout>    <NuxtPage />  </NuxtLayout></template>

    7. إضافة التوجيه المحلي إلى تطبيقك

      اختياري

      يتولى Nuxt تلقائيًا التعامل مع التوجيه المحلي عند استخدام وحدة nuxt-intlayer. هذا ينشئ مسارات لكل لغة تلقائيًا بناءً على هيكل دليل الصفحات الخاص بك.

      مثال:

      plaintext
      pages/├── index.vue          → /, /fr, /es├── about.vue          → /about, /fr/about, /es/about└── contact/    └── index.vue      → /contact, /fr/contact, /es/contact

      لإنشاء صفحات محلية، ببساطة قم بإنشاء ملفات Vue الخاصة بك في دليل pages/. فيما يلي مثالان لصفحات:

      صفحة الرئيسية (pages/index.vue):

      pages/index.vue
      <script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("home-page");useHead({  title: content.metaTitle.raw,  meta: [    {      name: "description",      content: content.metaDescription.raw,    },  ],});</script><template>  <h1><content.title /></h1></template>

      صفحة حول (pages/about.vue):

      pages/about.vue
      <script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // استخدم .raw للوصول إلى النص الأساسي  meta: [    {      name: "description",      content: content.metaDescription.raw, // استخدم .raw للوصول إلى النص الأساسي    },  ],});</script><template>  <h1><content.title /></h1></template>
      ملاحظة: يتم استيراد useHead تلقائيًا في Nuxt. يمكنك الوصول إلى قيم المحتوى باستخدام .value (تفاعلي) أو .raw (نص بدائي) حسب حاجتك.

      سيقوم موديل nuxt-intlayer تلقائيًا بـ:

      • اكتشاف اللغة المفضلة للمستخدم
      • التعامل مع تبديل اللغة عبر عنوان URL
      • تعيين الخاصية المناسبة <html lang="">
      • إدارة ملفات تعريف الارتباط الخاصة باللغة
      • إعادة توجيه المستخدمين إلى عنوان URL المحلي المناسب

    8. إنشاء مكون رابط محلي اللغة

      اختياري

      لضمان أن تنقل تطبيقك يحترم اللغة الحالية، يمكنك إنشاء مكون مخصص Links. يقوم هذا المكون تلقائيًا بإضافة بادئة للروابط الداخلية باستخدام اللغة الحالية، وهو أمر ضروري لـ تحسين محركات البحث (SEO) وقابلية اكتشاف الصفحات.

      components/Links.vue
      <script setup lang="ts">import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";interface Props {  href: string;  locale?: string;}const props = defineProps<Props>();const { locale: currentLocale } = useLocale();// حساب المسار النهائيconst finalPath = computed(() => {  // 1. التحقق مما إذا كانت الرابط خارجي  const isExternal = /^https?:\/\//.test(props.href || "");  // 2. إذا كان خارجيًا، إرجاعه كما هو (NuxtLink يتولى توليد وسم <a>)  if (isExternal) return props.href;  // 3. إذا كان الرابط داخليًا، قم بتعريب الـ URL  const targetLocale = props.locale || currentLocale.value;  return getLocalizedUrl(props.href, targetLocale);});</script><template>  <NuxtLink :to="finalPath" v-bind="$attrs">    <slot />  </NuxtLink></template>

      ثم استخدم هذا المكون في جميع أنحاء تطبيقك:

      layouts/default.vue
      <script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">الرئيسية</Links>    <Links href="/about">حول</Links>  </div></template>

      باستخدام NuxtLink مع المسارات المترجمة، تضمن أن:

      • محركات البحث يمكنها الزحف وفهرسة جميع إصدارات لغات صفحاتك
      • يمكن للمستخدمين مشاركة عناوين URL المترجمة مباشرة
      • يعمل سجل المتصفح بشكل صحيح مع عناوين URL التي تحتوي على بادئة اللغة

    9. التعامل مع البيانات الوصفية وتحسين محركات البحث

      اختياري

      يوفر Nuxt قدرات ممتازة لتحسين محركات البحث عبر الـ useHead composable (يتم استيراده تلقائيًا). يمكنك استخدام Intlayer للتعامل مع البيانات الوصفية المترجمة باستخدام accessor .raw أو .value للحصول على القيمة النصية الأولية:

      pages/about.vue
      <script setup lang="ts">import { useIntlayer } from "vue-intlayer";// يتم استيراد useHead تلقائيًا في Nuxtconst content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // استخدم .raw للوصول إلى القيمة النصية الأولية  meta: [    {      name: "description",      content: content.metaDescription.raw, // استخدم .raw للوصول إلى القيمة النصية الأولية    },  ],});</script><template>  <h1><content.title /></h1></template>
      بدلاً من ذلك، يمكنك استخدام الدالة import { getIntlayer } from "intlayer" للحصول على المحتوى بدون تفاعل Vue.

      الوصول إلى قيم المحتوى:

      • استخدم .raw للحصول على القيمة النصية الأولية (غير تفاعلية)
      • استخدم .value للحصول على القيمة التفاعلية
      • استخدم بناء جملة المكون <content.key /> لدعم محرر المرئيات

      قم بإنشاء إعلان المحتوى المقابل:

      pages/about-page.content.ts
      import { t, type Dictionary } from "intlayer";

const aboutPageContent = {
  key: "about-page",
  content: {
    metaTitle: t({
      en: "About Us - My Company",
      fr: "À Propos - Ma Société",
      es: "Acerca de Nosotros - Mi Empresa",
      ar: "معلومات عنا - شركتي",
    }),
    metaDescription: t({
      en: "Learn more about our company and our mission",
      fr: "En savoir plus sur notre société et notre mission",
      es: "Conozca más sobre nuestra empresa y nuestra misión",
      ar: "تعرف أكثر على شركتنا ومهمتنا",
    }),
    title: t({
      en: "About Us",
      fr: "À Propos",
      es: "Acerca de Nosotros",
      ar: "معلومات عنا",
    }),
  },
} satisfies Dictionary;

export default aboutPageContent;

    (اختياري) الخطوة 6ب: إنشاء تخطيط مع التنقل

    تسمح تخطيطات Nuxt بتعريف هيكل مشترك لصفحاتك. قم بإنشاء تخطيط افتراضي يتضمن مفتاح تبديل اللغة والتنقل:

    layouts/default.vue
    <script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">الرئيسية</Links>    <Links href="/about">حول</Links>  </div></template>

    مكون Links (الموضح أدناه) يضمن أن روابط التنقل الداخلية تتم ترجمتها تلقائيًا.

    تكوين Git

    يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب الالتزام بها في مستودع Git الخاص بك.

    للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف .gitignore الخاص بك:

    .gitignore
    # تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer.intlayer

    امتداد VS Code

    لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت امتداد Intlayer الرسمي لـ VS Code.

    التثبيت من سوق VS Code

    يوفر هذا الامتداد:

    • الإكمال التلقائي لمفاتيح الترجمة.
    • الكشف الفوري عن الأخطاء للترجمات المفقودة.
    • معاينات مدمجة للمحتوى المترجم.
    • إجراءات سريعة لإنشاء وتحديث الترجمات بسهولة.

    لمزيد من التفاصيل حول كيفية استخدام الامتداد، راجع توثيق امتداد Intlayer لـ VS Code.

    التعمق أكثر

    للتقدم أكثر، يمكنك تنفيذ المحرر المرئي أو تعريض محتواك باستخدام نظام إدارة المحتوى (CMS).

    Vite و Vue
    Vite و Solid