vue-i18n बनाम Intlayer | Vue अंतरराष्ट्रीयकरण (i18n)

यह गाइड Vue 3 (और Nuxt) के लिए दो लोकप्रिय i18n विकल्पों की तुलना करता है: vue-i18n और Intlayer। हम आधुनिक Vue टूलिंग (Vite, Composition API) पर ध्यान केंद्रित करते हैं और मूल्यांकन करते हैं:

1. आर्किटेक्चर और सामग्री संगठन
2. TypeScript और सुरक्षा
3. अनुवाद की कमी को संभालना
4. रूटिंग और URL रणनीति
5. प्रदर्शन और लोडिंग व्यवहार
6. डेवलपर अनुभव (DX), टूलिंग और रखरखाव
7. SEO और बड़े प्रोजेक्ट की स्केलेबिलिटी

संक्षेप में: दोनों Vue ऐप्स को स्थानीयकृत कर सकते हैं। यदि आप चाहते हैं कंपोनेंट-स्कोप्ड कंटेंट, सख्त TypeScript टाइप्स, बिल्ड-टाइम मिसिंग-की चेक्स, ट्री-शेक्ड डिक्शनरीज़, और बिल्ट-इन राउटर/SEO हेल्पर्स के साथ-साथ विज़ुअल एडिटर और AI अनुवाद, तो Intlayer अधिक पूर्ण और आधुनिक विकल्प है।

उच्च-स्तरीय स्थिति

• vue-i18n - Vue के लिए डि-फैक्टो i18n लाइब्रेरी। लचीला संदेश स्वरूपण (ICU-शैली), स्थानीय संदेशों के लिए SFC <i18n> ब्लॉक्स, और एक बड़ा इकोसिस्टम। सुरक्षा और बड़े पैमाने पर रखरखाव ज्यादातर आपकी जिम्मेदारी है।
• Intlayer - Vue/Vite/Nuxt के लिए कंपोनेंट-केंद्रित कंटेंट मॉडल जिसमें सख्त TS टाइपिंग, बिल्ड-टाइम चेक्स, ट्री-शेकिंग, राउटर और SEO हेल्पर्स, वैकल्पिक विज़ुअल एडिटर/CMS, और AI-सहायता प्राप्त अनुवाद शामिल हैं।

साइड-बाय-साइड फीचर तुलना (Vue-केंद्रित)

गहराई से तुलना

1) वास्तुकला और विस्तार क्षमता

• vue-i18n: सामान्य सेटअप प्रत्येक लोकल के लिए केंद्रीकृत कैटलॉग का उपयोग करते हैं (वैकल्पिक रूप से फ़ाइलों/नेमस्पेस में विभाजित)। SFC <i18n> ब्लॉक्स स्थानीय संदेशों की अनुमति देते हैं लेकिन जैसे-जैसे प्रोजेक्ट बढ़ते हैं, टीमें अक्सर साझा कैटलॉग पर वापस लौटती हैं।
• Intlayer: प्रत्येक घटक के लिए डिक्शनरीज़ को बढ़ावा देता है जो उस घटक के पास संग्रहीत होती हैं जिसे वे सेवा देते हैं। इससे टीमों के बीच संघर्ष कम होता है, सामग्री खोजने योग्य रहती है, और स्वाभाविक रूप से विचलन/अप्रयुक्त कुंजियों को सीमित करता है।

यह क्यों महत्वपूर्ण है: बड़े Vue ऐप्स या डिज़ाइन सिस्टम में, मॉड्यूलर सामग्री मोनोलिथिक कैटलॉग की तुलना में बेहतर स्केल करती है।

2) टाइपस्क्रिप्ट और सुरक्षा

• vue-i18n: अच्छा TS समर्थन; कठोर कुंजी टाइपिंग आमतौर पर कस्टम स्कीमाओं/जनरिक्स और सावधान कन्वेंशनों की आवश्यकता होती है।
• Intlayer: आपकी सामग्री से सख्त प्रकार (strict types) उत्पन्न करता है, जो IDE ऑटोकम्प्लीशन और टाइपो/गायब कुंजियों के लिए कंपाइल-टाइम त्रुटियाँ प्रदान करता है।

यह क्यों महत्वपूर्ण है: मजबूत टाइपिंग रनटाइम से पहले समस्याओं को पकड़ लेती है।

3) गायब अनुवाद प्रबंधन

• vue-i18n: रनटाइम चेतावनियाँ/फॉलबैक (जैसे, फॉलबैक लोकल या कुंजी)।
• Intlayer: बिल्ड-टाइम पहचान चेतावनियों/त्रुटियों के साथ, जो लोकल और कुंजियों के बीच होती है।

यह क्यों महत्वपूर्ण है: बिल्ड-टाइम प्रवर्तन उत्पादन UI को साफ और सुसंगत रखता है।

4) रूटिंग और URL रणनीति (Vue Router/Nuxt)

• दोनों स्थानीयकृत रूट्स के साथ काम कर सकते हैं।
• Intlayer स्थानीयकृत पथों को उत्पन्न करने, लोकल उपसर्गों का प्रबंधन करने, और SEO के लिए <link rel="alternate" hreflang> जारी करने में सहायक प्रदान करता है। Nuxt के साथ, यह फ्रेमवर्क की रूटिंग को पूरक बनाता है।

यह क्यों महत्वपूर्ण है: कम कस्टम ग्लू लेयर्स और विभिन्न लोकलों में साफ-सुथरा SEO।

5) प्रदर्शन और लोडिंग व्यवहार

• vue-i18n: असिंक्रोनस लोकल मैसेज का समर्थन करता है; ओवर-बंडलिंग से बचना आपकी जिम्मेदारी है (कैटलॉग को सावधानी से विभाजित करें)।
• Intlayer: बिल्ड के दौरान ट्री-शेकिंग करता है और प्रत्येक शब्दकोश/लोकल के लिए लेज़ी-लोडिंग करता है। अप्रयुक्त सामग्री भेजी नहीं जाती।

यह क्यों महत्वपूर्ण है: छोटे बंडल और मल्टी-लोकल Vue ऐप्स के लिए तेज़ स्टार्टअप।

6) डेवलपर अनुभव और टूलिंग

• vue-i18n: परिपक्व दस्तावेज़ और समुदाय; आप आमतौर पर संपादकीय कार्यप्रवाह के लिए बाहरी स्थानीयकरण प्लेटफ़ॉर्म पर निर्भर करेंगे।
• Intlayer: एक मुफ्त विज़ुअल एडिटर, वैकल्पिक CMS (Git-अनुकूल या बाहरी), एक VSCode एक्सटेंशन, CLI/CI उपयोगिताएँ, और आपके अपने प्रदाता कुंजी का उपयोग करके AI-सहायता प्राप्त अनुवाद प्रदान करता है।

यह क्यों महत्वपूर्ण है: कम संचालन लागत और एक छोटा विकास–सामग्री चक्र।

7) SEO, SSR और SSG

• दोनों Vue SSR और Nuxt के साथ काम करते हैं।
• Intlayer: SEO सहायक (साइटमैप/मेटाडेटा/hreflang) जोड़ता है जो फ्रेमवर्क-स्वतंत्र हैं और Vue/Nuxt बिल्ड के साथ अच्छी तरह से काम करते हैं।

यह क्यों महत्वपूर्ण है: बिना विशेष कनेक्शन के अंतरराष्ट्रीय SEO।

क्यों Intlayer? (समस्या और दृष्टिकोण)

अधिकांश i18n स्टैक्स (जिसमें vue-i18n भी शामिल है) केंद्रीकृत कैटलॉग से शुरू होते हैं:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json└── src    └── components        └── MyComponent.vue

या प्रति-स्थानीय फ़ोल्डरों के साथ:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json└── src    └── components        └── MyComponent.vue

जैसे-जैसे ऐप्स बढ़ते हैं, यह अक्सर विकास को धीमा कर देता है:

1. एक नए कॉम्पोनेंट के लिए आप रिमोट कैटलॉग बनाते/संपादित करते हैं, नामस्थान जोड़ते हैं, और अनुवाद करते हैं (अक्सर AI टूल्स से मैनुअल कॉपी/पेस्ट के माध्यम से)।
2. कॉम्पोनेंट बदलते समय आप साझा कुंजियाँ ढूंढते हैं, अनुवाद करते हैं, स्थानीय संस्करणों को सिंक में रखते हैं, मृत कुंजियाँ हटाते हैं, और JSON संरचनाओं को संरेखित करते हैं।

Intlayer सामग्री को प्रति-कॉम्पोनेंट के रूप में सीमित करता है और इसे कोड के बगल में रखता है, जैसे हम पहले से CSS, स्टोरीज़, टेस्ट और डॉक्यूमेंट्स के साथ करते हैं:

.└── components    └── MyComponent        ├── MyComponent.content.ts        └── MyComponent.vue

सामग्री घोषणा (प्रति कॉम्पोनेंट):

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):

<script setup lang="ts">import { useIntlayer } from "vue-intlayer"; // Vue एकीकरणconst { greeting } = useIntlayer("component-example");</script><template>  <span>{{ greeting }}</span></template>

यह दृष्टिकोण:

• विकास को तेज़ करता है (एक बार घोषित करें; IDE/AI स्वतः पूर्ण करता है)।
• कोडबेस को साफ़ करता है (1 कॉम्पोनेंट = 1 शब्दकोश)।
• डुप्लिकेशन/माइग्रेशन को आसान बनाता है (एक कॉम्पोनेंट और उसकी सामग्री को साथ में कॉपी करें)।
• मृत कुंजियों से बचाता है (अप्रयुक्त कॉम्पोनेंट सामग्री आयात नहीं करते)।
• लोडिंग को अनुकूलित करता है (लेट लोड किए गए कॉम्पोनेंट अपनी सामग्री साथ लाते हैं)।

Intlayer की अतिरिक्त विशेषताएँ (Vue-संबंधित)

• क्रॉस-फ्रेमवर्क समर्थन: Vue, Nuxt, Vite, React, Express, और अधिक के साथ काम करता है।
• जावास्क्रिप्ट-चालित सामग्री प्रबंधन: पूर्ण लचीलापन के साथ कोड में घोषित करें।
• प्रति-स्थान घोषणा फ़ाइल: सभी स्थानों को बीजित करें और बाकी उपकरणों को उत्पन्न करने दें।
• टाइप-सुरक्षित वातावरण: ऑटो-कम्प्लीशन के साथ मजबूत TS कॉन्फ़िग।
• सरल सामग्री पुनःप्राप्ति: एकल हुक/कंपोज़ेबल जो एक शब्दकोश के लिए सभी सामग्री प्राप्त करता है।
• संगठित कोडबेस: 1 घटक = उसी फ़ोल्डर में 1 शब्दकोश।
• सुधारित रूटिंग: Vue Router/Nuxt के लिए स्थानीयकृत पथ और मेटाडेटा के लिए सहायक।
• मार्कडाउन समर्थन: प्रति स्थान दूरस्थ/स्थानीय मार्कडाउन आयात करें; फ्रंटमैटर को कोड में उजागर करें।
• मुफ्त विज़ुअल एडिटर और वैकल्पिक CMS: बिना भुगतान किए स्थानीयकरण प्लेटफ़ॉर्म के लेखक; Git-अनुकूल सिंक।
• ट्री-शेकेबल सामग्री: केवल उपयोग की गई सामग्री भेजता है; लेज़ी लोडिंग का समर्थन करता है।
• स्थैतिक रेंडरिंग के अनुकूल: SSG को अवरुद्ध नहीं करता।
• एआई-संचालित अनुवाद: अपने स्वयं के एआई प्रदाता/API कुंजी का उपयोग करके 231 भाषाओं में अनुवाद करें।
• MCP सर्वर और VSCode एक्सटेंशन: अपने IDE के अंदर i18n वर्कफ़्लोज़ और लेखन को स्वचालित करें।
• इंटरऑपरेबिलिटी: आवश्यकता पड़ने पर vue-i18n, react-i18next, और react-intl के साथ पुल बनाता है।

कब किसे चुनें?

• vue-i18n चुनें यदि आप मानक Vue दृष्टिकोण चाहते हैं, आप कैटलॉग/नेमस्पेस स्वयं प्रबंधित करने में सहज हैं, और आपका ऐप छोटा से मध्यम आकार का है (या आप पहले से Nuxt i18n पर निर्भर हैं)।
• Intlayer चुनें यदि आप कंपोनेंट-स्कोप्ड कंटेंट, सख्त TypeScript, बिल्ड-टाइम गारंटियां, ट्री-शेकिंग, और बिल्ट-इन रूटिंग/SEO/एडिटर टूलिंग को महत्व देते हैं-विशेष रूप से बड़े, मॉड्यूलर Vue/Nuxt कोडबेस के लिए।

व्यावहारिक माइग्रेशन नोट्स (vue-i18n → Intlayer)

• प्रत्येक फीचर से शुरू करें: एक समय में एक रूट/व्यू/कंपोनेंट को स्थानीय Intlayer शब्दकोशों में स्थानांतरित करें।
• माइग्रेशन के दौरान ब्रिज बनाए रखें: vue-i18n कैटलॉग्स को समानांतर रखें; धीरे-धीरे लुकअप्स को बदलें।
• सख्त जांच सक्षम करें: बिल्ड-टाइम पर गायब कुंजियों/स्थानीयताओं का जल्दी पता चलने दें।
• राउटर/SEO सहायक अपनाएं: स्थानीय पहचान और hreflang टैग्स को मानकीकृत करें।
• बंडल मापें: अप्रयुक्त सामग्री को हटाने पर बंडल आकार में कमी की उम्मीद करें।

निष्कर्ष

दोनों vue-i18n और Intlayer Vue ऐप्स को अच्छी तरह स्थानीयकृत करते हैं। अंतर यह है कि एक मजबूत, स्केलेबल सेटअप प्राप्त करने के लिए आपको स्वयं कितना निर्माण करना होगा:

• Intlayer के साथ, मॉड्यूलर कंटेंट, सख्त TS, बिल्ड-टाइम सुरक्षा, ट्री-शेक्ड बंडल, और राउटर/SEO/एडिटर टूलिंग बॉक्स से बाहर मिलते हैं।
• यदि आपकी टीम एक मल्टी-लोकल, कंपोनेंट-चालित Vue/Nuxt ऐप में रखरखाव और गति को प्राथमिकता देती है, तो Intlayer आज सबसे पूर्ण अनुभव प्रदान करता है।

अधिक जानकारी के लिए 'Why Intlayer?' दस्तावेज़ देखें।