الوثائق / Nuxt

Nuxt i18n، تلقائي

تخصيص تطبيق Nuxt: تصبح القوالب استدعاءات ويُضاف @nuxtjs/i18n إلى nuxt.config مع تجميع كل لغة والحفاظ على اللغة في ملف تعريف الارتباط.

كيف يعمل

تتم إعادة كتابة صفحات ومكونات Nuxt مثل أي مكون Vue؛ يستخدم الإعداد الوحدة الرسمية @nuxtjs/i18n.

قبل وبعد

المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.

app/pages/index.vue · قبل

<template>
  <main>
    <h1>Fresh coffee, delivered</h1>
    <NuxtLink to="/shop">Browse the shop</NuxtLink>
  </main>
</template>

app/pages/index.vue · بعد

<template>
  <main>
    <h1>{{ $t('home.fresh_coffee_delivered') }}</h1>
    <NuxtLink to="/shop">{{ $t('home.browse_the_shop') }}</NuxtLink>
  </main>
</template>

locales/en.json

{
  "home": {
    "fresh_coffee_delivered": "Fresh coffee, delivered",
    "browse_the_shop": "Browse the shop"
  }
}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد @nuxtjs/i18n إذا لم يكن المشروع يحتوي عليه بعد:

@nuxtjs/i18n في ملف package.json و modules في nuxt.config
تجميع i18n/i18n.config.ts لكل لغة، مع قواعد الجمع
رابط URL لكل لغة (/es/about، الافتراضية بدون بادئة) مع روابط hreflang من useLocaleHead()
الزيارة الأولى تتبع ملف تعريف الارتباط lang أو المتصفح

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.