सही Vue i18n लाइब्रेरी कैसे चुनें

"Vue i18n" एक सामान्य शब्द भी है और उस लाइब्रेरी का नाम भी जिसे लगभग हर कोई इंस्टॉल करता है। यह सुविधाजनक भी है और साथ ही भ्रामक भी: vue-i18n एक अच्छा डिफ़ॉल्ट है, लेकिन यह एकमात्र विकल्प नहीं है, और जो प्रश्न इस चुनाव को निर्धारित करने चाहिए (SSR है या नहीं, कितने पेज हैं, ट्रांसलेशन कौन लिखता है) वे शायद ही कभी npm install से पहले पूछे जाते हैं।

यह गाइड पहले उन सवालों को पूछती है, फिर उन उत्तरों को उपयुक्त लाइब्रेरीज़ के साथ मैप करती है, प्लेन Vite + Vue और Nuxt दोनों के लिए।

विषय सूची

लाइब्रेरीज़ की तुलना करने से पहले जवाब देने योग्य छह प्रश्न

1. Vite SPA या Nuxt? एक SPA में कैटलॉग की लागत JS बंडल की समस्या होती है। Nuxt में यह HTML पेलोड की भी समस्या है, क्योंकि मैसेज SSR स्टेट में सीरियलाइज़ होते हैं और हाइड्रेट होते हैं। इसी कारण से अधिकांश "vue-i18n धीमा है" की रिपोर्ट Nuxt ऐप्स से आती हैं।
2. अनुवाद कौन लिखता है? डेवलपर्स, एक TMS, ICU स्ट्रिंग्स डिलीवर करने वाली कोई एजेंसी, या एक AI पाइपलाइन। vue-i18n अपने स्वयं के पाइप-सेपरेटेड प्लूरल सिंटैक्स का उपयोग करता है, न कि ICU का। यदि स्ट्रिंग्स बाहर से आती हैं तो यह मायने रखता है।
3. कितनी भाषाएँ (locales) और पेज हैं? दो भाषाएँ और पाँच पेज सब कुछ एक साथ भेज सकते हैं। दस भाषाएँ और चालीस रूट्स ऐसा नहीं कर सकते, और लोडिंग रणनीति मुख्य लागत बन जाती है।
4. क्या आपको कीज़ पर टाइप्स की आवश्यकता है? vue-i18n में t("cart.totl") कंपाइल हो जाता है जब तक कि आप कोई मैसेज स्कीमा जेनेरिक पास न करें, और वह स्कीमा लेज़ी लोड होने वाले कैटलॉग के साथ संघर्ष करती है।
5. कंटेंट में क्या शामिल है? केवल UI लेबल्स, या मार्कडाउन, वाक्यों के अंदर लिंक्स, और प्रति-लोकेल ब्लॉक्स। रिच कंटेंट वह जगह है जहाँ स्ट्रिंग रिटर्न करने वाला t() असुविधाजनक हो जाता है।
6. क्या CSP एक बाधा है? डिफ़ॉल्ट vue-i18n बिल्ड ब्राउज़र में new Function के साथ मैसेजेस को कंपाइल करता है। रनटाइम-ओनली बिल्ड्स को बिल्ड टाइम पर प्रीकंपाइल करने के लिए @intlify/unplugin-vue-i18n की आवश्यकता होती है।

इन उत्तरों को लिख लें। नीचे दी गई हर बात इन्हीं पर आधारित है।

परिदृश्य एक नज़र में

Vue इकोसिस्टम में React की तुलना में कम i18n लाइब्रेरीज़ हैं, और वे अलग-अलग आर्किटेक्चरल दौर से आती हैं।

JavaScript i18n का इतिहास प्रत्येक दौर को विस्तार से कवर करता है।

सबसे महत्वपूर्ण निर्णय: कंटेंट कहाँ रहता है और कब लोड होता है

दो संरचनात्मक विकल्प सेटअप्स के बीच अधिकांश बंडल अंतर की व्याख्या करते हैं:

• केंद्रीकृत या स्कोप्ड कंटेंट। ऐप के लिए एक locales/en.json, या प्रति कंपोनेंट एक डिक्लेरेशन।
• स्टैटिक या डायनामिक इम्पोर्ट। स्टार्टअप पर सब कुछ, या सक्रिय लोकेल (और आदर्श रूप से सक्रिय रूट) को मांग पर फ़ेच करना।

यह ग्राफ 1 से 10 पेजों के एक सैद्धांतिक ऐप के लिए पेलोड का अनुमान लगाता है, जिसका 1 से 10 लोकेल्स में अनुवाद किया गया है, जिसमें प्रति पेज लगभग 30 KB टेक्स्ट है।

vue-i18n डायनामिक एक्सिस का समर्थन करता है: import() के बाद setLocaleMessage का अर्थ है कि आप उन नौ लोकेल्स को भेजना बंद कर देते हैं जिन्हें कोई नहीं पढ़ता। जो यह आपको नहीं देता वह है पेज एक्सिस। एक लोकेल कैटलॉग एक ऑब्जेक्ट होता है, और इसे लोड करने से हर पेज की कॉपी लोड हो जाती है। SPA में कोई ध्यान नहीं देता। Nuxt में, @nuxtjs/i18n और दस से अधिक पेजों के साथ, हर रूट हर दूसरे रूट के स्ट्रिंग्स को दो बार ले जाता है: JS चंक में और SSR पेलोड में।

Vue बेंचमार्क इसे "अन्य रूट्स से लीकेज" और "अन्य लोकेल्स से लीकेज" के रूप में मापता है। यदि प्रश्न 3 का आपका उत्तर "कई पेज" था, तो यह सेक्शन किसी भी API प्राथमिकता से अधिक महत्वपूर्ण है। प्रति-कंपोनेंट बनाम केंद्रीकृत i18n पोस्ट इसी ट्रेड-ऑफ के मेंटेनेंस पक्ष को कवर करती है।

उम्मीदवार लाइब्रेरीज़

लाइब्रेरी साइज़ Vue बेंचमार्क से हैं: 10-पेज, 10-लोकेल ऐप पर बंडलिंग, ट्री-शेकिंग और मिनिफिकेशन के बाद एक खाली कंपोनेंट में प्लगइन और कंपोज़ेबल। कंटेंट को अलग से मापा जाता है।

संख्याएँ बेंचमार्क के वर्ज़न्स का एक स्नैपशॉट हैं। केवल साइज़ के आधार पर निर्णय लेने से पहले इसे अपने ऐप पर चलाएं।

Paraglide का लगभग-शून्य लाइब्रेरी साइज़ बनावट के कारण है: रनटाइम आपके रिपॉजिटरी में जेनरेट होता है, जिसका अर्थ है हर पुश से पहले एक रीजेनरेशन स्टेप और जेनरेट की गई फ़ाइलों पर मर्ज कॉन्फ्लिक्ट्स। Intlayer को vite-intlayer (या Nuxt मॉड्यूल) की आवश्यकता होती है, इसलिए यह बिल्ड स्टेप के बिना नहीं चल सकता।

अपने उत्तरों को एक लाइब्रेरी से मिलाएं

प्रत्येक लाइब्रेरी कहाँ कम पड़ती है

• vue-i18n: इस सेट में सबसे भारी, खुद का प्लूरल फॉर्मेट, टाइप्स ऑप्ट-इन हैं और लेज़ी लोडिंग के साथ नाजुक हैं, कोई प्रति-रूट स्कोपिंग नहीं है, डेड कीज़ चुपचाप जमा होती रहती हैं। Vue 3 ऐप में legacy: true छोड़ने से Vue 2 कम्पैटिबिलिटी लेयर बनी रहती है और useI18n() टाइपिंग खो जाती है।
• @nuxtjs/i18n: ऊपर दी गई हर चीज़ को इनहेरिट करता है, और एक दर्जन से अधिक रूट्स होने पर SSR पेलोड हर पेज के स्ट्रिंग्स को ले जाता है।
• fluent-vue: अच्छा मैसेज सिंटैक्स, कोई की टाइप्स नहीं, और Vite प्लगइन सभी भाषाओं के सभी कंटेंट को हर पेज में लोड करता है। बेंचमार्क में सबसे भारी।
• Paraglide: जेनरेट की गई फ़ाइलें रेपो में कमिट की जाती हैं, हर पुश से पहले रीजेनरेशन, और लोकेल को रिएक्टिव स्टोर के बजाय प्रत्येक मैसेज कॉल पर कुकी या स्टोरेज से पढ़ा जाता है, जिससे लोकेल बदलने पर अतिरिक्त काम होता है।
• Intlayer: अनिवार्य बिल्ड प्लगइन, छोटा इकोसिस्टम, आंशिक ICU समर्थन, और डिज़ाइन द्वारा पूरे कोडबेस में फैला हुआ कंटेंट, इसलिए अनुवादक के लिए एक JSON एक्सपोर्ट करने के लिए टूलिंग की आवश्यकता होती है।

प्रत्येक विकल्प कोड में कैसा दिखता है

वही कंपोनेंट, शीर्षक और प्लूरल के साथ एक कार्ट समरी, प्रत्येक उम्मीदवार के साथ लिखा गया है। दिलचस्प हिस्सा टेम्पलेट नहीं है, बल्कि यह है कि कंटेंट कहाँ रहता है और vue-tsc इसके बारे में क्या जानता है।

{
  "cart": {
    "title": "Your cart",
    "items": "no item | one item | {count} items"
  }
}

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const props = defineProps<{ count: number }>();
const { t } = useI18n();
</script>

<template>
  <section>
    <h2>{{ t("cart.title") }}</h2>
    <p>{{ t("cart.items", { count: props.count }, props.count) }}</p>
  </section>
</template>

cart-title = Your cart
cart-items = { $count ->
    [one] { $count } item
   *[other] { $count } items
}

<script setup lang="ts">
import { useFluent } from "fluent-vue";

const props = defineProps<{ count: number }>();
const { $t } = useFluent();
</script>

<template>
  <section>
    <h2>{{ $t("cart-title") }}</h2>
    <p>{{ $t("cart-items", { count: props.count }) }}</p>
  </section>
</template>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script setup lang="ts">
import { m } from "../paraglide/messages.js";

const props = defineProps<{ count: number }>();
</script>

<template>
  <section>
    <h2>{{ m.cart_title() }}</h2>
    <p>{{ m.cart_items({ count: props.count }) }}</p>
  </section>
</template>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({ en: "Your cart", fr: "Votre panier", es: "Tu carrito" }),
    items: t({
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const props = defineProps<{ count: number }>();
const { title, items } = useIntlayer("cart-summary");
</script>

<template>
  <section>
    <h2><title /></h2>
    <p>{{ items(props.count) }}</p>
  </section>
</template>

पहले से ही vue-i18n पर हैं? @intlayer/vue-i18n कम्पैटिबिलिटी एडेप्टर बंडलर स्तर पर पैकेज को उपनाम (alias) देता है, ताकि useI18n(), $t, पाइप प्लूरल्स और v-t काम करते रहें जबकि Intlayer कंटेंट सर्व करता है। माइग्रेशन गाइड बाद में एडेप्टर से हटने को कवर करती है, और एक Nuxt-विशिष्ट गाइड भी है।

निर्णय लेने से पहले

एक फीचर टेबल आपको बताती है कि लाइब्रेरी आज क्या करती है। ये बिंदु आपको बताते हैं कि इसके साथ काम करना कैसा रहेगा।

रिपॉजिटरी गतिविधि की जाँच करें।

कमिट्स, इश्यू रिस्पॉन्स टाइम, और क्या पिछला माइनर रिलीज़ इसी साल हुआ था। बिना मेंटेनर के एक अच्छा डिज़ाइन भविष्य के माइग्रेशन का इंतज़ार है।

npm डाउनलोड्स के आधार पर चयन न करें।

सबसे अधिक इंस्टॉल की गई लाइब्रेरी वह है जो सबसे पहले आई थी, न कि वह जो 2026 के Vue कोडबेस के लिए उपयुक्त है। डाउनलोड्स इतिहास को मापते हैं, उपयुक्तता को नहीं।

पूछें कि मेंटेनर को कौन भुगतान करता है, और वे क्या बेचते हैं।

vue-i18n को Crowdin द्वारा समर्थित किया गया है, जैसे next-intl और svelte-i18n को। i18next को Locize द्वारा समर्थन प्राप्त है। Tolgee, Paraglide (inlang) और Intlayer प्रत्येक अपना प्लेटफ़ॉर्म चलाते हैं। एक वेंडर जिसका राजस्व होस्टेड अनुवाद है, उसके पास आपके टूलचेन के अंदर अनुवाद को मुफ़्त बनाने का बहुत कम कारण है। Intlayer इस सेट में एकमात्र ऐसा है जो आपकी अपनी API की के साथ CLI के माध्यम से AI अनुवाद प्रदान करता है, और एक CMS जिसे आप स्वयं होस्ट कर सकते हैं।

क्या यह AI-एजेंट के लिए तैयार है?

एजेंट अभी भी i18n के साथ संघर्ष करते हैं: वे लोकेल्स भूल जाते हैं, मनगढ़ंत कीज़ बनाते हैं, और मैसेज सिंटैक्स मिला देते हैं। क्या लाइब्रेरी Agent Skills या एक MCP सर्वर प्रदान करती है ताकि एजेंट कंटेंट को लिस्ट, फ़िल और टेस्ट कर सके? और क्या कंटेंट लोडिंग डिफ़ॉल्ट रूप से अनुकूलित है, या किसी को हर तिमाही में नेमस्पेस और लेज़ी इम्पोर्ट्स की समीक्षा करनी होगी?

आउट-ऑफ-द-बॉक्स टाइप सुरक्षा।

"अतिरिक्त वायरिंग के साथ टाइप किया जा सकता है" ऐसा नहीं, बल्कि "एक गलत की पर फ्रेश इंस्टॉल पर tsc फेल हो जाता है"। जाँचें कि अस्तित्वहीन की के साथ क्या होता है, और ऐसे लोकेल के साथ क्या होता है जिसमें एक अनुवाद छूट गया है।

अप्रयुक्त सामग्री (unused content) का पता लगाना।

कैटलॉग केवल बढ़ते हैं। Intlayer का बिल्ड अप्रयुक्त फ़ील्ड्स को हटा देता है (purge) और उन्हें लॉग करता है (build.purge)। Paraglide आर्किटेक्चर के माध्यम से वहाँ पहुँचता है, क्योंकि एक अनकॉल्ड मैसेज फंक्शन ट्री-शेक हो जाता है। बाकी सब कुछ सफाई का काम आप पर छोड़ देते हैं।

डेवलपर अनुभव (Developer experience)।

पहले ट्रांसलेटेड स्ट्रिंग तक सेटअप का समय, एक LSP या VS Code एक्सटेंशन जो होवर पर अनुवाद दिखाता है और डिक्लेरेशन पर कूदता है, फ़िल, टेस्ट और पुश के लिए एक CLI, और गैर-डेवलपर्स के लिए पुल रिक्वेस्ट के बिना कंटेंट को एडिट करने का एक तरीका (विज़ुअल एडिटर या CMS)।

अक्सर पूछे जाने वाले प्रश्न

आगे पढ़ें

• Vue i18n बेंचमार्क: बंडल साइज़, लीकेज और लोकेल-स्विच टाइमिंग्स
• Vue i18n: vue-i18n कैसे काम करता है और कहाँ समस्या आती है और Nuxt i18n पोस्ट
• vue-i18n बनाम Intlayer, फीचर दर फीचर और vue-i18n बनाम Intlayer बेंचमार्क
• क्या vue-i18n पुराना हो चुका है?
• JavaScript i18n का इतिहास
• कंपाइलर बनाम डिक्लेरेटिव i18n
• प्रति-कंपोनेंट बनाम केंद्रीकृत i18n
• Vite + Vue ऐप में i18n सेट अप करें और एक Nuxt ऐप में
• यही गाइड React, Svelte और Solid के लिए