@intlayer/docs 5.8.0-canary.0 → 5.8.0

package/blog/hi/vue-i18n_vs_intlayer.md

@@ -0,0 +1,268 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-08-23
+title: vue-i18n बनाम Intlayer
+description: Vue/Nuxt ऐप्स में अंतरराष्ट्रीयकरण (i18n) के लिए vue-i18n की तुलना Intlayer से करें
+keywords:
+  - vue-i18n
+  - Intlayer
+  - अंतरराष्ट्रीयकरण
+  - i18n
+  - ब्लॉग
+  - Vue
+  - Nuxt
+  - जावास्क्रिप्ट
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer
+---
+
+# 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-केंद्रित)
+
+| फीचर                                             | **Intlayer**                                                                        | **vue-i18n**                                                                         |
+| ------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| **कंपोनेंट के पास अनुवाद**                       | ✅ हाँ, प्रत्येक कंपोनेंट के लिए कंटेंट साथ में रखा गया (जैसे, `MyComp.content.ts`) | ✅ हाँ, SFC `<i18n>` ब्लॉक्स के माध्यम से (वैकल्पिक)                                 |
+| **TypeScript एकीकरण**                            | ✅ उन्नत, स्वचालित रूप से जनरेट किए गए **सख्त** टाइप्स और की ऑटोकंप्लीशन            | ✅ अच्छे टाइपिंग; **सख्त की सुरक्षा के लिए अतिरिक्त सेटअप/अनुशासन आवश्यक**           |
+| **अनुवाद की कमी का पता लगाना**                   | ✅ **बिल्ड-टाइम** चेतावनियाँ/त्रुटियाँ और TS सतह पर दिखाना                          | ⚠️ रनटाइम फॉलबैक/चेतावनियाँ                                                          |
+| **रिच कंटेंट (कंपोनेंट/मार्कडाउन)**              | ✅ रिच नोड्स और मार्कडाउन कंटेंट फाइलों के लिए सीधे समर्थन                          | ⚠️ सीमित (कंपोनेंट्स `<i18n-t>` के माध्यम से, मार्कडाउन बाहरी प्लगइन्स के माध्यम से) |
+| **एआई-संचालित अनुवाद**                           | ✅ आपके अपने एआई प्रदाता कीज़ का उपयोग करके अंतर्निर्मित वर्कफ़्लोज़                | ❌ अंतर्निर्मित नहीं                                                                 |
+| **विजुअल एडिटर / CMS**                           | ✅ मुफ्त विजुअल एडिटर और वैकल्पिक CMS                                               | ❌ अंतर्निर्मित नहीं (बाहरी प्लेटफ़ॉर्म का उपयोग करें)                               |
+| **स्थानीयकृत रूटिंग**                            | ✅ Vue Router/Nuxt के लिए स्थानीयकृत पथ, URL, और `hreflang` जनरेट करने में सहायक    | ⚠️ मुख्य नहीं (Nuxt i18n या कस्टम Vue Router सेटअप का उपयोग करें)                    |
+| **डायनामिक रूट जनरेशन**                          | ✅ हाँ                                                                              | ❌ प्रदान नहीं किया गया (Nuxt i18n प्रदान करता है)                                   |
+| **बहुवचन और स्वरूपण**                            | ✅ एनेमरेशन पैटर्न; Intl-आधारित फॉर्मेटर्स                                          | ✅ ICU-शैली संदेश; Intl फॉर्मेटर्स                                                   |
+| **सामग्री प्रारूप**                              | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML प्रगति पर)                            | ✅ `.json`, `.js` (साथ ही SFC `<i18n>` ब्लॉक्स)                                      |
+| **ICU समर्थन**                                   | ⚠️ प्रगति पर                                                                        | ✅ हाँ                                                                               |
+| **SEO सहायक (साइटमैप, रोबोट्स, मेटाडेटा)**       | ✅ अंतर्निर्मित सहायक (फ्रेमवर्क-स्वतंत्र)                                          | ❌ मुख्य नहीं (Nuxt i18n/समुदाय)                                                     |
+| **SSR/SSG**                                      | ✅ Vue SSR और Nuxt के साथ काम करता है; स्थैतिक रेंडरिंग को ब्लॉक नहीं करता          | ✅ Vue SSR/Nuxt के साथ काम करता है                                                   |
+| **ट्री-शेकिंग (केवल उपयोग की गई सामग्री भेजना)** | ✅ बिल्ड समय पर प्रति-कंपोनेंट                                                      | ⚠️ आंशिक; मैनुअल कोड-स्प्लिटिंग/असिंक्रोनस संदेशों की आवश्यकता होती है               |
+| **लेज़ी लोडिंग**                                 | ✅ प्रति-भाषा / प्रति-शब्दकोश                                                       | ✅ असिंक्रोनस भाषा संदेश समर्थित                                                     |
+| **अप्रयुक्त सामग्री को हटाना**                   | ✅ हाँ (बिल्ड-टाइम)                                                                 | ❌ अंतर्निर्मित नहीं                                                                 |
+| **बड़े प्रोजेक्ट की रखरखाव क्षमता**              | ✅ मॉड्यूलर, डिज़ाइन-सिस्टम-अनुकूल संरचना को प्रोत्साहित करता है                    | ✅ संभव है, लेकिन मजबूत फ़ाइल/नेमस्पेस अनुशासन की आवश्यकता होती है                   |
+| **इकोसिस्टम / समुदाय**                           | ⚠️ छोटा लेकिन तेजी से बढ़ रहा है                                                    | ✅ 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** भी शामिल है) **केंद्रीकृत कैटलॉग** से शुरू होते हैं:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+या प्रति-स्थानीय फ़ोल्डरों के साथ:
+
+```bash
+.
+├── 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, स्टोरीज़, टेस्ट और डॉक्यूमेंट्स के साथ करते हैं:
+
+```bash
+.
+└── components
+    └── MyComponent
+        ├── MyComponent.content.ts
+        └── MyComponent.vue
+```
+
+**सामग्री घोषणा** (प्रति कॉम्पोनेंट):
+
+```ts fileName="./components/MyComponent/MyComponent.content.ts"
+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):
+
+```vue fileName="./components/MyComponent/MyComponent.vue"
+<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?' दस्तावेज़](https://intlayer.org/doc/why) देखें।

package/blog/it/intlayer_with_next-i18next.md

@@ -1,6 +1,6 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: Intlayer e next-i18next
 description: Integra Intlayer con next-i18next per un'app Next.js
 keywords: