@intlayer/docs 7.3.11 → 7.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/cjs/generated/docs.entry.cjs +19 -0
  2. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  3. package/dist/esm/generated/docs.entry.mjs +19 -0
  4. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  5. package/dist/types/generated/docs.entry.d.ts +1 -0
  6. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  7. package/docs/ar/intlayer_with_nuxt.md +294 -438
  8. package/docs/ar/intlayer_with_react_router_v7.md +33 -4
  9. package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +516 -0
  10. package/docs/ar/intlayer_with_tanstack.md +2 -12
  11. package/docs/ar/intlayer_with_vite+vue.md +1 -0
  12. package/docs/de/intlayer_with_nuxt.md +284 -410
  13. package/docs/de/intlayer_with_react_router_v7.md +33 -4
  14. package/docs/de/intlayer_with_react_router_v7_fs_routes.md +573 -0
  15. package/docs/de/intlayer_with_tanstack.md +1 -0
  16. package/docs/de/intlayer_with_vite+vue.md +1 -0
  17. package/docs/en/intlayer_with_nuxt.md +237 -341
  18. package/docs/en/intlayer_with_react_router_v7.md +24 -0
  19. package/docs/en/intlayer_with_react_router_v7_fs_routes.md +570 -0
  20. package/docs/en/intlayer_with_tanstack.md +2 -12
  21. package/docs/en/intlayer_with_vite+vue.md +49 -48
  22. package/docs/en-GB/intlayer_with_nuxt.md +254 -378
  23. package/docs/en-GB/intlayer_with_react_router_v7.md +33 -4
  24. package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +513 -0
  25. package/docs/en-GB/intlayer_with_tanstack.md +2 -12
  26. package/docs/en-GB/intlayer_with_vite+vue.md +1 -0
  27. package/docs/es/intlayer_with_nuxt.md +271 -390
  28. package/docs/es/intlayer_with_react_router_v7.md +33 -4
  29. package/docs/es/intlayer_with_react_router_v7_fs_routes.md +575 -0
  30. package/docs/es/intlayer_with_tanstack.md +1 -0
  31. package/docs/es/intlayer_with_vite+vue.md +1 -2
  32. package/docs/fr/intlayer_with_nuxt.md +278 -405
  33. package/docs/fr/intlayer_with_react_router_v7.md +34 -5
  34. package/docs/fr/intlayer_with_react_router_v7_fs_routes.md +574 -0
  35. package/docs/fr/intlayer_with_tanstack.md +1 -0
  36. package/docs/fr/intlayer_with_vite+vue.md +1 -0
  37. package/docs/hi/intlayer_with_nuxt.md +303 -447
  38. package/docs/hi/intlayer_with_react_router_v7.md +33 -4
  39. package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +518 -0
  40. package/docs/hi/intlayer_with_tanstack.md +2 -12
  41. package/docs/hi/intlayer_with_vite+vue.md +1 -0
  42. package/docs/id/intlayer_with_nuxt.md +266 -395
  43. package/docs/id/intlayer_with_react_router_v7.md +29 -4
  44. package/docs/id/intlayer_with_react_router_v7_fs_routes.md +521 -0
  45. package/docs/id/intlayer_with_tanstack.md +2 -12
  46. package/docs/id/intlayer_with_vite+vue.md +1 -0
  47. package/docs/it/intlayer_with_nuxt.md +299 -423
  48. package/docs/it/intlayer_with_react_router_v7.md +33 -4
  49. package/docs/it/intlayer_with_react_router_v7_fs_routes.md +574 -0
  50. package/docs/it/intlayer_with_tanstack.md +1 -0
  51. package/docs/ja/intlayer_with_nuxt.md +309 -432
  52. package/docs/ja/intlayer_with_react_router_v7.md +33 -4
  53. package/docs/ja/intlayer_with_react_router_v7_fs_routes.md +574 -0
  54. package/docs/ja/intlayer_with_tanstack.md +2 -12
  55. package/docs/ja/intlayer_with_vite+vue.md +1 -0
  56. package/docs/ko/intlayer_with_nuxt.md +295 -422
  57. package/docs/ko/intlayer_with_react_router_v7.md +33 -4
  58. package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +515 -0
  59. package/docs/ko/intlayer_with_tanstack.md +2 -12
  60. package/docs/ko/intlayer_with_vite+vue.md +1 -0
  61. package/docs/pl/intlayer_with_nuxt.md +273 -476
  62. package/docs/pl/intlayer_with_react_router_v7.md +32 -5
  63. package/docs/pl/intlayer_with_react_router_v7_fs_routes.md +615 -0
  64. package/docs/pl/intlayer_with_tanstack.md +2 -12
  65. package/docs/pl/intlayer_with_vite+vue.md +1 -0
  66. package/docs/pt/intlayer_with_nuxt.md +277 -420
  67. package/docs/pt/intlayer_with_react_router_v7.md +28 -0
  68. package/docs/pt/intlayer_with_tanstack.md +1 -0
  69. package/docs/ru/intlayer_with_nuxt.md +287 -425
  70. package/docs/ru/intlayer_with_react_router_v7.md +33 -4
  71. package/docs/ru/intlayer_with_react_router_v7_fs_routes.md +574 -0
  72. package/docs/ru/intlayer_with_tanstack.md +1 -0
  73. package/docs/ru/intlayer_with_vite+vue.md +1 -0
  74. package/docs/tr/intlayer_with_nuxt.md +313 -406
  75. package/docs/tr/intlayer_with_react_router_v7.md +33 -4
  76. package/docs/tr/intlayer_with_react_router_v7_fs_routes.md +572 -0
  77. package/docs/tr/intlayer_with_tanstack.md +2 -12
  78. package/docs/tr/intlayer_with_vite+vue.md +1 -0
  79. package/docs/vi/intlayer_with_nuxt.md +273 -418
  80. package/docs/vi/intlayer_with_react_router_v7.md +29 -4
  81. package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +523 -0
  82. package/docs/vi/intlayer_with_tanstack.md +2 -12
  83. package/docs/vi/intlayer_with_vite+vue.md +1 -0
  84. package/docs/zh/intlayer_with_nuxt.md +300 -461
  85. package/docs/zh/intlayer_with_react_router_v7.md +33 -4
  86. package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +516 -0
  87. package/docs/zh/intlayer_with_tanstack.md +2 -12
  88. package/docs/zh/intlayer_with_vite+vue.md +1 -0
  89. package/package.json +10 -11
  90. package/src/generated/docs.entry.ts +19 -0
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  createdAt: 2025-06-18
3
- updatedAt: 2025-06-29
4
- title: अपना Nuxt and Vue ऐप कैसे अनुवाद करें – i18n गाइड 2025
3
+ updatedAt: 2025-12-07
4
+ title: अपने Nuxt और Vue ऐप का अनुवाद कैसे करें – i18n गाइड 2025
5
5
  description: जानें कि अपनी Nuxt और Vue वेबसाइट को बहुभाषी कैसे बनाएं। अंतरराष्ट्रीयकरण (i18n) और अनुवाद के लिए दस्तावेज़ का पालन करें।
6
6
  keywords:
7
7
  - अंतरराष्ट्रीयकरण
@@ -14,35 +14,62 @@ slugs:
14
14
  - doc
15
15
  - environment
16
16
  - nuxt-and-vue
17
- applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-template
17
+ applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-4-template
18
+ youtubeVideo: https://www.youtube.com/watch?v=nhUcUAVQ6eQ
18
19
  history:
20
+ - version: 7.3.11
21
+ date: 2025-12-07
22
+ changes: LocaleSwitcher, SEO, मेटाडेटा अपडेट करें
19
23
  - version: 5.5.10
20
24
  date: 2025-06-29
21
- changes: प्रारंभिक इतिहास
25
+ changes: इतिहास प्रारंभ करें
22
26
  ---
23
27
 
24
- # Intlayer के साथ अपना Nuxt and Vue अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
28
+ # Intlayer का उपयोग करके अपनी Nuxt और Vue वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
25
29
 
26
- GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-nuxt-template) देखें।
30
+ ## सामग्री तालिका
31
+
32
+ <TOC/>
27
33
 
28
34
  ## Intlayer क्या है?
29
35
 
30
- **Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
36
+ **Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
31
37
 
32
38
  Intlayer के साथ, आप कर सकते हैं:
33
39
 
34
- - **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कंपोनेंट स्तर पर होते हैं।
35
- - **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
36
- - **TypeScript समर्थन सुनिश्चित करें** ऑटो-जेनरेटेड प्रकारों के साथ, जो ऑटो-कम्प्लीशन और त्रुटि पहचान में सुधार करते हैं।
37
- - **उन्नत विशेषताओं का लाभ उठाएं**, जैसे गतिशील लोकल डिटेक्शन और स्विचिंग।
40
+ - **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कि कंपोनेंट स्तर पर होते हैं।
41
+ - **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें।**
42
+ - **TypeScript समर्थन सुनिश्चित करें** ऑटो-जेनरेटेड प्रकारों के साथ, जिससे ऑटो-कम्प्लीशन और त्रुटि पहचान में सुधार होता है।
43
+ - **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकल डिटेक्शन और स्विचिंग।
38
44
 
39
45
  ---
40
46
 
41
47
  ## Nuxt एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
42
48
 
43
- ### चरण 1: निर्भरताएँ स्थापित करें
49
+ <Tab defaultTab="video">
50
+ <TabItem label="वीडियो" value="video">
51
+
52
+ <iframe title="अपने Nuxt और Vue ऐप को Intlayer का उपयोग करके कैसे अनुवादित करें? Intlayer की खोज करें" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/nhUcUAVQ6eQ?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
53
+
54
+ </TabItem>
55
+ <TabItem label="कोड" value="code">
56
+
57
+ <iframe
58
+ src="https://stackblitz.com/github/aymericzip/intlayer-nuxt-4-template?embed=1&ctl=1&file=intlayer.config.ts"
59
+ className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
60
+ title="डेमो कोडसैंडबॉक्स - Intlayer का उपयोग करके अपने एप्लिकेशन का अंतरराष्ट्रीयकरण कैसे करें"
61
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
62
+ loading="lazy"
63
+ />
64
+
65
+ </TabItem>
66
+ </Tab>
44
67
 
45
- npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
68
+ GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-nuxt-4-template) देखें।
69
+
70
+ ### चरण 1: Dependencies इंस्टॉल करें
71
+
72
+ npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
46
73
 
47
74
  ```bash packageManager="npm"
48
75
  npm install intlayer vue-intlayer
@@ -61,10 +88,10 @@ yarn add --save-dev nuxt-intlayer
61
88
 
62
89
  - **intlayer**
63
90
 
64
- मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md), ट्रांसपाइलेशन, और [CLI कमांड्स](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_cli.md) के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
91
+ कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md), ट्रांसपाइलेशन, और [CLI कमांड्स](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/index.md) के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
65
92
 
66
93
  - **vue-intlayer**
67
- वह पैकेज जो Intlayer को Vue एप्लिकेशन के साथ एकीकृत करता है। यह Vue कंपोनेंट्स के लिए कंपोज़ेबल्स प्रदान करता है।
94
+ वह पैकेज जो Intlayer को Vue एप्लिकेशन के साथ एकीकृत करता है। यह Vue कंपोनेंट्स के लिए कॉम्पोज़ेबल्स प्रदान करता है।
68
95
 
69
96
  - **nuxt-intlayer**
70
97
  Nuxt मॉड्यूल जो Intlayer को Nuxt एप्लिकेशन के साथ एकीकृत करता है। यह स्वचालित सेटअप, लोकल डिटेक्शन के लिए मिडलवेयर, कुकी प्रबंधन, और URL पुनर्निर्देशन प्रदान करता है।
@@ -86,9 +113,6 @@ const config: IntlayerConfig = {
86
113
  ],
87
114
  defaultLocale: Locales.ENGLISH,
88
115
  },
89
- content: {
90
- contentDir: ["."], // क्योंकि डिफ़ॉल्ट रूप से Intlayer `./src` डायरेक्टरी से सामग्री घोषणा फ़ाइलों को देखेगा
91
- },
92
116
  };
93
117
 
94
118
  export default config;
@@ -108,9 +132,6 @@ const config = {
108
132
  ],
109
133
  defaultLocale: Locales.ENGLISH,
110
134
  },
111
- content: {
112
- contentDir: ["."],
113
- },
114
135
  };
115
136
 
116
137
  export default config;
@@ -130,15 +151,12 @@ const config = {
130
151
  ],
131
152
  defaultLocale: Locales.ENGLISH,
132
153
  },
133
- content: {
134
- contentDir: ["."],
135
- },
136
154
  };
137
155
 
138
156
  module.exports = config;
139
157
  ```
140
158
 
141
- > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और भी बहुत कुछ। उपलब्ध सभी पैरामीटरों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
159
+ > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URLs, मिडलवेयर रीडायरेक्शन, कुकी नाम, आपकी कंटेंट घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग्स को अक्षम कर सकते हैं, और भी बहुत कुछ। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, कृपया [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
142
160
 
143
161
  ### चरण 3: अपने Nuxt कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
144
162
 
@@ -153,258 +171,46 @@ export default defineNuxtConfig({
153
171
  });
154
172
  ```
155
173
 
156
- > `nuxt-intlayer` मॉड्यूल स्वचालित रूप से Intlayer को Nuxt के साथ एकीकृत करता है। यह सामग्री घोषणा निर्माण सेट करता है, विकास मोड में फ़ाइलों की निगरानी करता है, स्थानीय पहचान के लिए मिडलवेयर प्रदान करता है, और स्थानीयकृत रूटिंग का प्रबंधन करता है।
174
+ > `nuxt-intlayer` मॉड्यूल स्वचालित रूप से Intlayer को Nuxt के साथ एकीकृत करता है। यह कंटेंट घोषणा निर्माण सेट करता है, विकास मोड में फ़ाइलों की निगरानी करता है, स्थानीय पहचान के लिए मिडलवेयर प्रदान करता है, और स्थानीयकृत रूटिंग का प्रबंधन करता है।
157
175
 
158
176
  ### चरण 4: अपनी सामग्री घोषित करें
159
177
 
160
- अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:
178
+ अनुवाद संग्रहीत करने के लिए अपनी कंटेंट घोषणाएँ बनाएं और प्रबंधित करें:
161
179
 
162
- ```tsx fileName="components/helloWorld.content.ts" contentDeclarationFormat="typescript"
163
- import { t, type Dictionary } from "intlayer";
180
+ ```tsx fileName="content/home-page.content.ts" contentDeclarationFormat="typescript"
181
+ import { type Dictionary, t } from "intlayer";
164
182
 
165
- const helloWorldContent = {
166
- key: "helloworld",
167
- content: {
168
- count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
169
- edit: t({
170
- en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
171
- fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
172
- es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
173
- }),
174
- checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
175
- nuxtIntlayer: t({
176
- en: "Nuxt Intlayer documentation",
177
- fr: "Documentation de Nuxt Intlayer",
178
- es: "Documentación de Nuxt Intlayer",
179
- }),
180
- learnMore: t({
181
- en: "Learn more about Nuxt in the ",
182
- fr: "En savoir plus sur Nuxt dans la ",
183
- es: "Aprenda más sobre Nuxt en la ",
184
- }),
185
- nuxtDocs: t({
186
- en: "Nuxt Documentation",
187
- fr: "Documentation Nuxt",
188
- es: "Documentación de Nuxt",
189
- }),
190
- readTheDocs: t({
191
- en: "Click on the Nuxt logo to learn more",
192
- fr: "Cliquez sur le logo Nuxt pour en savoir plus",
193
- es: "Haga clic en el logotipo de Nuxt para obtener más información",
194
- }),
195
- },
196
- } satisfies Dictionary;
197
-
198
- export default helloWorldContent;
199
- ```
200
-
201
- ```javascript fileName="components/helloWorld.content.mjs" contentDeclarationFormat="esm"
202
- import { t } from "intlayer";
203
-
204
- /** @type {import('intlayer').Dictionary} */
205
- const helloWorldContent = {
206
- key: "helloworld",
183
+ const content = {
184
+ key: "home-page",
207
185
  content: {
208
- count: t({ en: "count is ", hi: "गिनती है ", fr: "le compte est ", es: "el recuento es " }),
209
- edit: t({
210
- en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
211
- hi: "<code>components/HelloWorld.vue</code> को संपादित करें और HMR परीक्षण के लिए सहेजें",
212
- fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
213
- es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
214
- }),
215
- checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
216
- nuxtIntlayer: t({
217
- en: "Nuxt Intlayer documentation",
218
- fr: "Documentation de Nuxt Intlayer",
219
- es: "Documentación de Nuxt Intlayer",
220
- }),
221
- learnMore: t({
222
- en: "Learn more about Nuxt in the ",
223
- fr: "En savoir plus sur Nuxt dans la ",
224
- es: "Aprenda más sobre Nuxt en la ",
225
- }),
226
- nuxtDocs: t({
227
- en: "Nuxt Documentation",
228
- fr: "Documentation Nuxt",
229
- es: "Documentación de Nuxt",
186
+ title: t({
187
+ en: "Hello world",
188
+ fr: "Bonjour le monde",
189
+ es: "Hola mundo",
230
190
  }),
231
- readTheDocs: t({
232
- en: "Click on the Nuxt logo to learn more",
233
- fr: "Cliquez sur le logo Nuxt pour en savoir plus",
234
- es: "Haga clic en el logotipo de Nuxt para obtener más información",
191
+ metaTitle: t({
192
+ en: "Welcome | My Application",
193
+ fr: "Bienvenue | Mon Application",
194
+ es: "Bienvenido | Mi Aplicación",
235
195
  }),
236
- },
237
- };
238
-
239
- export default helloWorldContent;
240
- fr: "Cliquez sur le logo Nuxt pour en savoir plus",
241
- es: "Haga clic en el logotipo de Nuxt para obtener más información",
196
+ metaDescription: t({
197
+ en: "Discover your multilingual Nuxt app homepage powered by Intlayer.",
198
+ fr: "Découvrez la page d'accueil multilingue de votre application Nuxt propulsée par Intlayer.",
199
+ es: "Descubre la página de inicio multilingüe de tu aplicación Nuxt impulsada por Intlayer.",
242
200
  }),
243
201
  },
244
202
  } satisfies Dictionary;
245
203
 
246
- export default helloWorldContent;
247
- ```
248
-
249
- ```javascript fileName="components/helloWorld.content.mjs" contentDeclarationFormat="esm"
250
- import { t } from "intlayer";
251
-
252
- /** @type {import('intlayer').Dictionary} */
253
- const helloWorldContent = {
254
- key: "helloworld",
255
- content: {
256
- count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
257
- edit: t({
258
- en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
259
- fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
260
- es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
261
- }),
262
- checkOut: t({
263
- en: "Check out ",
264
- hi: "देखें ",
265
- fr: "Vérifiez ",
266
- es: "Compruebe ",
267
- }),
268
- nuxtIntlayer: t({
269
- en: "Nuxt Intlayer documentation",
270
- hi: "Nuxt Intlayer दस्तावेज़",
271
- fr: "Documentation de Nuxt Intlayer",
272
- es: "Documentación de Nuxt Intlayer",
273
- }),
274
- learnMore: t({
275
- en: "Learn more about Nuxt in the ",
276
- hi: "Nuxt के बारे में अधिक जानें ",
277
- fr: "En savoir plus sur Nuxt dans la ",
278
- es: "Aprenda más sobre Nuxt en la ",
279
- }),
280
- nuxtDocs: t({
281
- en: "Nuxt Documentation",
282
- hi: "Nuxt दस्तावेज़",
283
- fr: "Documentation Nuxt",
284
- es: "Documentación de Nuxt",
285
- }),
286
- readTheDocs: t({
287
- en: "Click on the Nuxt logo to learn more",
288
- hi: "अधिक जानने के लिए Nuxt लोगो पर क्लिक करें",
289
- fr: "Cliquez sur le logo Nuxt pour en savoir plus",
290
- es: "Haga clic en el logotipo de Nuxt para obtener más información",
291
- }),
292
- },
293
- };
294
-
295
- export default helloWorldContent;
296
- ```
297
-
298
- ```javascript fileName="components/helloWorld.content.cjs" contentDeclarationFormat="commonjs"
299
- const { t } = require("intlayer");
300
-
301
- /** @type {import('intlayer').Dictionary} */
302
- const helloWorldContent = {
303
- key: "helloworld",
304
- content: {
305
- count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
306
- edit: t({
307
- en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
308
- fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
309
- es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
310
- }),
311
- checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
312
- nuxtIntlayer: t({
313
- en: "Nuxt Intlayer documentation",
314
- fr: "Documentation de Nuxt Intlayer",
315
- es: "Nuxt Intlayer दस्तावेज़ीकरण",
316
- }),
317
- learnMore: t({
318
- en: "Nuxt के बारे में अधिक जानें ",
319
- fr: "En savoir plus sur Nuxt dans la ",
320
- es: "Aprenda más sobre Nuxt en la ",
321
- }),
322
- nuxtDocs: t({
323
- en: "Nuxt दस्तावेज़ीकरण",
324
- fr: "Documentation Nuxt",
325
- es: "Documentación de Nuxt",
326
- }),
327
- readTheDocs: t({
328
- en: "अधिक जानने के लिए Nuxt लोगो पर क्लिक करें",
329
- fr: "Cliquez sur le logo Nuxt pour en savoir plus",
330
- es: "Haga clic en el logotipo de Nuxt para obtener más información",
331
- }),
332
- },
333
- };
334
-
335
- module.exports = helloWorldContent;
336
- ```
337
-
338
- ```json fileName="components/helloWorld.content.json" contentDeclarationFormat="json"
339
- {
340
- "$schema": "https://intlayer.org/schema.json",
341
- "key": "helloworld",
342
- "content": {
343
- "count": {
344
- "nodeType": "translation",
345
- "translation": {
346
- "en": "count is ",
347
- "hi": "गिनती है ",
348
- "fr": "le compte est ",
349
- "es": "el recuento es "
350
- }
351
- },
352
- "edit": {
353
- "nodeType": "translation",
354
- "translation": {
355
- "en": "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
356
- "hi": "परीक्षण के लिए <code>components/HelloWorld.vue</code> संपादित करें और HMR को सहेजें",
357
- "fr": "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
358
- "es": "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR"
359
- }
360
- },
361
- "checkOut": {
362
- "nodeType": "translation",
363
- "translation": {
364
- "en": "Check out ",
365
- "hi": "देखें ",
366
- "fr": "Vérifiez ",
367
- "es": "Compruebe "
368
- }
369
- },
370
- "nuxtIntlayer": {
371
- "nodeType": "translation",
372
- "translation": {
373
- "hi": "Nuxt Intlayer प्रलेखन"
374
- }
375
- },
376
- "learnMore": {
377
- "nodeType": "translation",
378
- "translation": {
379
- "hi": "Nuxt के बारे में अधिक जानें "
380
- }
381
- },
382
- "nuxtDocs": {
383
- "nodeType": "translation",
384
- "translation": {
385
- "hi": "Nuxt प्रलेखन"
386
- }
387
- },
388
- "readTheDocs": {
389
- "nodeType": "translation",
390
- "translation": {
391
- "hi": "अधिक जानने के लिए Nuxt लोगो पर क्लिक करें"
392
- }
393
- }
394
- "es": "Haga clic en el logotipo de Nuxt para obtener más información"
395
- }
396
- }
397
- }
398
- }
204
+ export default content;
399
205
  ```
400
206
 
401
- > आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब तक कि वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हों। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हों (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)।
207
+ > आपकी कंटेंट घोषणाएँ आपकी एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब तक कि वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हों। और कंटेंट घोषणा फ़ाइल एक्सटेंशन से मेल खाती हों (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)।
402
208
 
403
- > अधिक विवरण के लिए, [सामग्री घोषणा प्रलेखन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md) देखें।
209
+ > अधिक विवरण के लिए, [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
404
210
 
405
211
  ### चरण 5: अपने कोड में Intlayer का उपयोग करें
406
212
 
407
- अपने Nuxt एप्लिकेशन में `useIntlayer` कॉम्पोज़ेबल का उपयोग करके अपनी सामग्री शब्दकोशों तक पहुँचें:
213
+ अपने Nuxt एप्लिकेशन में `useIntlayer` composable का उपयोग करके अपनी कंटेंट डिक्शनरीज़ तक पहुँचें:
408
214
 
409
215
  ```vue fileName="components/HelloWorld.vue"
410
216
  <script setup lang="ts">
@@ -453,86 +259,76 @@ const countRef = ref(0);
453
259
  </template>
454
260
  ```
455
261
 
456
- #### Intlayer में सामग्री तक पहुँच
262
+ #### Intlayer में कंटेंट तक पहुँच
457
263
 
458
- Intlayer आपकी सामग्री तक पहुँचने के लिए विभिन्न API प्रदान करता है:
264
+ Intlayer आपकी कंटेंट तक पहुँचने के लिए विभिन्न APIs प्रदान करता है:
459
265
 
460
- - **कंपोनेंट-आधारित सिंटैक्स** (अनुशंसित):
461
- सामग्री को Intlayer नोड के रूप में रेंडर करने के लिए `<myContent />` या `<Component :is="myContent" />` सिंटैक्स का उपयोग करें। यह [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) और [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) के साथ सहजता से एकीकृत होता है।
266
+ - **कंपोनेंट-आधारित सिंटैक्स** (सिफारिश की गई):
267
+ `<myContent />`, या `<Component :is="myContent" />` सिंटैक्स का उपयोग करके कंटेंट को Intlayer Node के रूप में रेंडर करें। यह [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) और [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) के साथ सहजता से एकीकृत होता है।
462
268
 
463
269
  - **स्ट्रिंग-आधारित सिंटैक्स**:
464
- सामग्री को सादे टेक्स्ट के रूप में रेंडर करने के लिए `{{ myContent }}` का उपयोग करें, बिना Visual Editor समर्थन के।
270
+ कंटेंट को प्लेन टेक्स्ट के रूप में रेंडर करने के लिए `{{ myContent }}` का उपयोग करें, बिना Visual Editor सपोर्ट के।
465
271
 
466
272
  - **रॉ HTML सिंटैक्स**:
467
- सामग्री को रॉ HTML के रूप में रेंडर करने के लिए `<div v-html="myContent" />` का उपयोग करें, बिना Visual Editor समर्थन के।
273
+ कंटेंट को रॉ HTML के रूप में रेंडर करने के लिए `<div v-html="myContent" />` का उपयोग करें, बिना Visual Editor सपोर्ट के।
468
274
 
469
275
  - **डिस्ट्रक्चरिंग सिंटैक्स**:
470
- `useIntlayer` कॉम्पोज़ेबल सामग्री के साथ एक प्रॉक्सी लौटाता है। इस प्रॉक्सी को डेस्ट्रक्चर करके सामग्री तक पहुंचा जा सकता है जबकि प्रतिक्रियाशीलता बनी रहती है।
471
- - उपयोग करें `const content = useIntlayer("myContent");` और `{{ content.myContent }}` / `<content.myContent />`।
472
- - या उपयोग करें `const { myContent } = useIntlayer("myContent");` और `{{ myContent}}` / `<myContent/>` सामग्री को डेस्ट्रक्चर करने के लिए।
276
+ `useIntlayer` कॉम्पोज़ेबल कंटेंट के साथ एक Proxy लौटाता है। इस Proxy को डिस्ट्रक्चर करके कंटेंट तक पहुंचा जा सकता है जबकि रिएक्टिविटी बनी रहती है।
277
+ - `const content = useIntlayer("myContent");` का उपयोग करें और `{{ content.myContent }}` / `<content.myContent />`।
278
+ - या `const { myContent } = useIntlayer("myContent");` का उपयोग करें और `{{ myContent}}` / `<myContent/>` से कंटेंट को डीस्ट्रक्चर करें।
473
279
 
474
280
  ### (वैकल्पिक) चरण 6: अपनी सामग्री की भाषा बदलें
475
281
 
476
- अपनी सामग्री की भाषा बदलने के लिए, आप `useLocale` कॉम्पोज़ेबल द्वारा प्रदान किया गया `setLocale` फ़ंक्शन उपयोग कर सकते हैं। यह फ़ंक्शन आपको एप्लिकेशन की भाषा सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।
282
+ अपनी सामग्री की भाषा बदलने के लिए, आप `useLocale` कॉम्पोज़ेबल द्वारा प्रदान किए गए `setLocale` फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपको एप्लिकेशन की लोकल सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।
477
283
 
478
- भाषाओं के बीच स्विच करने के लिए एक कॉम्पोनेंट बनाएं:
284
+ `NuxtLink` का उपयोग करके भाषाओं के बीच स्विच करने के लिए एक कॉम्पोनेंट बनाएं। **लोकल स्विचिंग के लिए बटन के बजाय लिंक का उपयोग करना SEO और पेज की खोज योग्यता के लिए एक सर्वोत्तम अभ्यास है**, क्योंकि यह खोज इंजन को आपकी सभी स्थानीयकृत पृष्ठों के संस्करणों को क्रॉल और इंडेक्स करने की अनुमति देता है:
479
285
 
480
286
  ```vue fileName="components/LocaleSwitcher.vue"
481
- <template>
482
- <div class="locale-switcher">
483
- <select v-model="selectedLocale" @change="changeLocale">
484
- <option v-for="loc in availableLocales" :key="loc" :value="loc">
485
- {{ getLocaleName(loc) }}
486
- </option>
487
- </select>
488
- </div>
489
- </template>
490
-
491
287
  <script setup lang="ts">
492
- import { ref, watch } from "vue";
493
- import { getLocaleName } from "intlayer";
288
+ import { getLocaleName, getLocalizedUrl } from "intlayer";
494
289
  import { useLocale } from "vue-intlayer";
495
290
 
496
- // लोकल जानकारी और setLocale फ़ंक्शन प्राप्त करें
291
+ // Nuxt स्वचालित रूप से useRoute को इम्पोर्ट करता है
292
+ const route = useRoute();
497
293
  const { locale, availableLocales, setLocale } = useLocale();
498
-
499
- // चयनित लोकल को ref के साथ ट्रैक करें
500
- const selectedLocale = ref(locale.value);
501
-
502
- // चयन बदलने पर लोकल अपडेट करें
503
- const changeLocale = () => setLocale(selectedLocale.value);
504
-
505
- // global locale के साथ selectedLocale को सिंक में रखें
506
- watch(
507
- () => locale.value,
508
- (newLocale) => {
509
- selectedLocale.value = newLocale;
510
- }
511
- );
512
294
  </script>
295
+
296
+ <template>
297
+ <nav class="locale-switcher">
298
+ <NuxtLink
299
+ v-for="localeEl in availableLocales"
300
+ :key="localeEl"
301
+ :to="getLocalizedUrl(route.fullPath, localeEl)"
302
+ class="locale-link"
303
+ :class="{ 'active-locale': localeEl === locale }"
304
+ @click="setLocale(localeEl)"
305
+ >
306
+ {{ getLocaleName(localeEl) }}
307
+ </NuxtLink>
308
+ </nav>
513
309
  </template>
310
+ ```
514
311
 
515
- <style scoped>
516
- .locale-switcher {
517
- margin: 1rem 0;
518
- }
312
+ > `NuxtLink` का उपयोग उचित `href` गुणों के साथ (जो `getLocalizedUrl` के माध्यम से होता है) यह सुनिश्चित करता है कि सर्च इंजन आपकी पृष्ठों के सभी भाषा संस्करणों को खोज सकें। यह केवल JavaScript-आधारित locale स्विचिंग की तुलना में बेहतर है, जिसे सर्च इंजन क्रॉलर शायद फॉलो न करें।
519
313
 
520
- select {
521
- padding: 0.5rem;
522
- border-radius: 0.25rem;
523
- border: 1px solid #ccc;
524
- }
525
- </style>
314
+ फिर, अपने `app.vue` को लेआउट्स का उपयोग करने के लिए सेट करें:
315
+
316
+ ```vue fileName="app.vue"
317
+ <template>
318
+ <NuxtLayout>
319
+ <NuxtPage />
320
+ </NuxtLayout>
321
+ </template>
526
322
  ```
527
323
 
528
- फिर, इस कॉम्पोनेंट का उपयोग अपनी पेज या लेआउट में करें:
324
+ ### (वैकल्पिक) चरण 6b: नेविगेशन के साथ एक लेआउट बनाएं
529
325
 
530
- ```vue fileName="app.vue"
326
+ Nuxt लेआउट्स आपको अपने पृष्ठों के लिए एक सामान्य संरचना परिभाषित करने की अनुमति देते हैं। एक डिफ़ॉल्ट लेआउट बनाएं जिसमें locale स्विचर और नेविगेशन शामिल हो:
327
+
328
+ ```vue fileName="layouts/default.vue"
531
329
  <script setup lang="ts">
532
- import { useIntlayer } from "vue-intlayer";
330
+ import Links from "~/components/Links.vue";
533
331
  import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
534
-
535
- const content = useIntlayer("app"); // संबंधित intlayer घोषणा फ़ाइल बनाएँ
536
332
  </script>
537
333
 
538
334
  <template>
@@ -541,15 +337,20 @@ const content = useIntlayer("app"); // संबंधित intlayer घोष
541
337
  <LocaleSwitcher />
542
338
  </header>
543
339
  <main>
544
- <NuxtPage />
340
+ <slot />
545
341
  </main>
342
+
343
+ <Links href="/">Home</Links>
344
+ <Links href="/about">About</Links>
546
345
  </div>
547
346
  </template>
548
347
  ```
549
348
 
349
+ `Links` कंपोनेंट (नीचे दिखाया गया) यह सुनिश्चित करता है कि आंतरिक नेविगेशन लिंक स्वचालित रूप से स्थानीयकृत हों।
350
+
550
351
  ### (वैकल्पिक) चरण 7: अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें
551
352
 
552
- Nuxt स्वचालित रूप से `nuxt-intlayer` मॉड्यूल का उपयोग करते समय स्थानीयकृत रूटिंग को संभालता है। यह आपके पेज डायरेक्टरी संरचना के आधार पर प्रत्येक भाषा के लिए स्वचालित रूप से रूट बनाता है।
353
+ जब आप `nuxt-intlayer` मॉड्यूल का उपयोग करते हैं, तो Nuxt स्वचालित रूप से स्थानीयकृत रूटिंग को संभालता है। यह आपकी pages डायरेक्टरी संरचना के आधार पर प्रत्येक भाषा के लिए स्वचालित रूप से रूट बनाता है।
553
354
 
554
355
  उदाहरण:
555
356
 
@@ -561,266 +362,321 @@ pages/
561
362
  └── index.vue → /contact, /fr/contact, /es/contact
562
363
  ```
563
364
 
564
- एक स्थानीयकृत पेज बनाने के लिए, बस `pages/` डायरेक्टरी में अपनी Vue फाइलें बनाएं:
365
+ स्थानीयकृत पेज बनाने के लिए, बस `pages/` डायरेक्टरी में अपने Vue फाइलें बनाएं। यहाँ दो उदाहरण पेज दिए गए हैं:
565
366
 
566
- ```vue fileName="pages/about.vue"
367
+ **होम पेज (`pages/index.vue`):**
368
+
369
+ ```vue fileName="pages/index.vue"
567
370
  <script setup lang="ts">
568
371
  import { useIntlayer } from "vue-intlayer";
569
372
 
570
- const content = useIntlayer("about");
373
+ const content = useIntlayer("home-page");
374
+
375
+ useHead({
376
+ title: content.metaTitle.value,
377
+ meta: [
378
+ {
379
+ name: "description",
380
+ content: content.metaDescription.value,
381
+ },
382
+ ],
383
+ });
571
384
  </script>
572
385
 
573
386
  <template>
574
- <div>
575
- <h1>{{ content.title }}</h1>
576
- <p>{{ content.description }}</p>
577
- </div>
387
+ <h1><content.title /></h1>
578
388
  </template>
579
389
  ```
580
390
 
581
- `nuxt-intlayer` मॉड्यूल स्वचालित रूप से निम्नलिखित करेगा:
391
+ **अबाउट पेज (`pages/about.vue`):**
582
392
 
583
- - उपयोगकर्ता की पसंदीदा भाषा का पता लगाएं
584
- - URL के माध्यम से भाषा स्विचिंग को संभालें
585
- - उपयुक्त `<html lang="">` एट्रिब्यूट सेट करें
586
- - भाषा कुकीज़ का प्रबंधन करें
587
- - उपयोगकर्ताओं को उपयुक्त स्थानीयकृत URL पर पुनः निर्देशित करें
393
+ ```vue fileName="pages/about.vue"
394
+ <script setup lang="ts">
395
+ import { useIntlayer } from "vue-intlayer";
588
396
 
589
- ### (वैकल्पिक) चरण 8: एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना
397
+ const content = useIntlayer("about-page");
590
398
 
591
- यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन का नेविगेशन वर्तमान भाषा का सम्मान करता है, आप एक कस्टम `LocalizedLink` कॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ उपसर्ग करता है।
399
+ useHead({
400
+ title: content.metaTitle.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
401
+ meta: [
402
+ {
403
+ name: "description",
404
+ content: content.metaDescription.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
405
+ },
406
+ ],
407
+ });
408
+ </script>
592
409
 
593
- ```vue fileName="components/LocalizedLink.vue"
594
410
  <template>
595
- <NuxtLink :to="localizedHref" v-bind="$attrs">
596
- <slot />
597
- </NuxtLink>
411
+ <h1><content.title /></h1>
598
412
  </template>
413
+ ```
599
414
 
415
+ > नोट: `useHead` Nuxt में ऑटो-इम्पोर्ट होता है। आप अपनी जरूरत के अनुसार कंटेंट वैल्यूज़ को `.value` (reactive) या `.raw` (primitive string) के माध्यम से एक्सेस कर सकते हैं।
416
+
417
+ `nuxt-intlayer` मॉड्यूल स्वचालित रूप से:
418
+
419
+ - उपयोगकर्ता की पसंदीदा लोकल का पता लगाता है
420
+ - URL के माध्यम से लोकल स्विचिंग को संभालता है
421
+ - उपयुक्त `<html lang="">` एट्रिब्यूट सेट करता है
422
+ - लोकल कुकीज़ का प्रबंधन करता है
423
+ - उपयोगकर्ताओं को उपयुक्त स्थानीयकृत URL पर रीडायरेक्ट करता है
424
+
425
+ ### (वैकल्पिक) चरण 8: एक स्थानीयकृत लिंक कंपोनेंट बनाना
426
+
427
+ अपने एप्लिकेशन की नेविगेशन को वर्तमान locale का सम्मान करने के लिए, आप एक कस्टम `Links` कंपोनेंट बना सकते हैं। यह कंपोनेंट स्वचालित रूप से आंतरिक URLs के साथ वर्तमान भाषा का प्रीफिक्स जोड़ता है, जो **SEO और पेज की खोज योग्यता** के लिए आवश्यक है।
428
+
429
+ ```vue fileName="components/Links.vue"
600
430
  <script setup lang="ts">
601
- import { computed } from "vue";
602
431
  import { getLocalizedUrl } from "intlayer";
603
432
  import { useLocale } from "vue-intlayer";
604
433
 
605
- const props = defineProps({
606
- to: {
607
- type: String,
608
- required: true,
609
- },
610
- });
434
+ interface Props {
435
+ href: string;
436
+ locale?: string;
437
+ }
438
+
439
+ const props = defineProps<Props>();
611
440
 
612
- const { locale } = useLocale();
441
+ const { locale: currentLocale } = useLocale();
613
442
 
614
- // जांचें कि लिंक बाहरी है या नहीं
615
- const isExternalLink = computed(() => /^https?:\/\//.test(props.to || ""));
443
+ // अंतिम पथ की गणना करें
444
+ const finalPath = computed(() => {
445
+ // 1. जांचें कि लिंक बाहरी है या नहीं
446
+ const isExternal = /^https?:\/\//.test(props.href || "");
616
447
 
617
- // आंतरिक लिंक के लिए स्थानीयकृत href बनाएं
618
- const localizedHref = computed(() =>
619
- isExternalLink.value ? props.to : getLocalizedUrl(props.to, locale.value)
620
- );
448
+ // 2. यदि बाहरी है, तो जैसा है वैसा लौटाएं (NuxtLink <a> टैग जनरेशन को संभालता है)
449
+ if (isExternal) return props.href;
450
+
451
+ // 3. यदि आंतरिक है, तो URL को स्थानीयकृत करें
452
+ const targetLocale = props.locale || currentLocale.value;
453
+ return getLocalizedUrl(props.href, targetLocale);
454
+ });
621
455
  </script>
456
+
457
+ <template>
458
+ <NuxtLink :to="finalPath" v-bind="$attrs">
459
+ <slot />
460
+ </NuxtLink>
461
+ </template>
622
462
  ```
623
463
 
624
- फिर इस कॉम्पोनेंट का उपयोग अपने एप्लिकेशन में करें:
464
+ फिर इस कंपोनेंट का उपयोग अपने एप्लिकेशन में पूरे स्थान पर करें:
465
+
466
+ ```vue fileName="layouts/default.vue"
467
+ <script setup lang="ts">
468
+ import Links from "~/components/Links.vue";
469
+ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
470
+ </script>
625
471
 
626
- ```vue fileName="pages/index.vue"
627
472
  <template>
628
473
  <div>
629
- <LocalizedLink to="/about">
630
- {{ content.aboutLink }}
631
- </LocalizedLink>
632
- <LocalizedLink to="/contact">
633
- {{ content.contactLink }}
634
- </LocalizedLink>
474
+ <header>
475
+ <LocaleSwitcher />
476
+ </header>
477
+ <main>
478
+ <slot />
479
+ </main>
480
+
481
+ <Links href="/">होम</Links>
482
+ <Links href="/about">अबाउट</Links>
635
483
  </div>
636
484
  </template>
637
-
638
- <script setup lang="ts">
639
- import { useIntlayer } from "vue-intlayer";
640
- import LocalizedLink from "~/components/LocalizedLink.vue";
641
-
642
- const content = useIntlayer("home");
643
- </script>
644
485
  ```
645
486
 
487
+ > `NuxtLink` का उपयोग स्थानीयकृत पथों के साथ करने से, आप सुनिश्चित करते हैं कि:
488
+ >
489
+ > - सर्च इंजन आपकी पृष्ठों के सभी भाषा संस्करणों को क्रॉल और इंडेक्स कर सकते हैं
490
+ > - उपयोगकर्ता सीधे स्थानीयकृत URLs साझा कर सकते हैं
491
+ > - ब्राउज़र इतिहास स्थानीयकृत-पूर्वसर्ग वाले URLs के साथ सही ढंग से काम करता है
492
+
646
493
  ### (वैकल्पिक) चरण 9: मेटाडेटा और SEO को संभालना
647
494
 
648
- Nuxt उत्कृष्ट SEO क्षमताएँ प्रदान करता है। आप स्थानीयकृत मेटाडेटा को संभालने के लिए Intlayer का उपयोग कर सकते हैं:
495
+ Nuxt `useHead` कॉम्पोज़ेबल (स्वतः-आयातित) के माध्यम से उत्कृष्ट SEO क्षमताएँ प्रदान करता है। आप Intlayer का उपयोग स्थानीयकृत मेटाडेटा को संभालने के लिए कर सकते हैं, `.raw` या `.value` एक्सेसर का उपयोग करके प्रिमिटिव स्ट्रिंग मान प्राप्त करने के लिए:
649
496
 
650
497
  ```vue fileName="pages/about.vue"
651
498
  <script setup lang="ts">
652
- import { useSeoMeta } from "nuxt/app";
653
- import { getIntlayer } from "intlayer";
654
- import { useLocale } from "vue-intlayer";
499
+ import { useIntlayer } from "vue-intlayer";
655
500
 
656
- const { locale } = useLocale();
657
- const content = getIntlayer("about-meta", locale.value);
501
+ // useHead Nuxt में स्वतः-आयातित है
502
+ const content = useIntlayer("about-page");
658
503
 
659
- useSeoMeta({
660
- title: content.title,
661
- description: content.description,
504
+ useHead({
505
+ title: content.metaTitle.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
506
+ meta: [
507
+ {
508
+ name: "description",
509
+ content: content.metaDescription.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
510
+ },
511
+ ],
662
512
  });
663
513
  </script>
664
514
 
665
515
  <template>
666
- <div>
667
- <h1>{{ content.pageTitle }}</h1>
668
- <p>{{ content.pageContent }}</p>
669
- </div>
516
+ <h1><content.title /></h1>
670
517
  </template>
671
518
  ```
672
519
 
673
- संबंधित सामग्री घोषणा बनाएँ:
520
+ > वैकल्पिक रूप से, आप Vue reactivity के बिना कंटेंट प्राप्त करने के लिए `import { getIntlayer } from "intlayer"` फ़ंक्शन का उपयोग कर सकते हैं।
521
+
522
+ > **कंटेंट मानों तक पहुँच:**
523
+ >
524
+ > - प्रिमिटिव स्ट्रिंग मान प्राप्त करने के लिए `.raw` का उपयोग करें (गैर-रिएक्टिव)
525
+ > - रिएक्टिव मान प्राप्त करने के लिए `.value` का उपयोग करें
526
+ > - विज़ुअल एडिटर समर्थन के लिए `<content.key />` कंपोनेंट सिंटैक्स का उपयोग करें
527
+
528
+ संबंधित कंटेंट घोषणा बनाएँ:
674
529
 
675
- ```ts fileName="pages/about-meta.content.ts"
530
+ ```ts fileName="pages/about-page.content.ts" contentDeclarationFormat="typescript"
676
531
  import { t, type Dictionary } from "intlayer";
677
- import type { useSeoMeta } from "nuxt/app";
678
532
 
679
- const aboutMetaContent = {
680
- key: "about-meta",
533
+ const aboutPageContent = {
534
+ key: "about-page",
681
535
  content: {
682
- title: t({
536
+ metaTitle: t({
683
537
  en: "About Us - My Company",
684
538
  fr: "À Propos - Ma Société",
685
539
  es: "Acerca de Nosotros - Mi Empresa",
686
540
  }),
687
- description: t({
541
+ metaDescription: t({
542
+ hi: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
688
543
  en: "Learn more about our company and our mission",
689
544
  fr: "En savoir plus sur notre société et notre mission",
690
545
  es: "Conozca más sobre nuestra empresa y nuestra misión",
691
546
  }),
547
+ title: t({
548
+ hi: "हमारे बारे में",
549
+ en: "About Us",
550
+ fr: "À Propos",
551
+ es: "Acerca de Nosotros",
552
+ }),
692
553
  },
693
- } satisfies Dictionary<Parameters<typeof useSeoMeta>[0]>;
554
+ } satisfies Dictionary;
694
555
 
695
- export default aboutMetaContent;
556
+ export default aboutPageContent;
696
557
  ```
697
558
 
698
- ```typescript fileName="pages/about-meta.content.mjs" contentDeclarationFormat="esm"
559
+ ```javascript fileName="pages/about-page.content.mjs" contentDeclarationFormat="esm"
699
560
  import { t } from "intlayer";
700
561
 
701
562
  /** @type {import('intlayer').Dictionary} */
702
- const aboutMetaContent = {
703
- key: "about-meta",
563
+ const aboutPageContent = {
564
+ key: "about-page",
704
565
  content: {
705
- title: t({
706
- zh: "关于我们 - 我的公司",
707
- en: "हमारे बारे में - मेरी कंपनी",
566
+ metaTitle: t({
567
+ hi: "हमारे बारे में - मेरी कंपनी",
568
+ en: "About Us - My Company",
708
569
  fr: "À Propos - Ma Société",
709
570
  es: "Acerca de Nosotros - Mi Empresa",
710
571
  }),
711
- description: t({
712
- zh: "了解更多关于我们公司和我们的使命",
713
- en: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
572
+ metaDescription: t({
573
+ hi: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
714
574
  fr: "En savoir plus sur notre société et notre mission",
715
575
  es: "Conozca más sobre nuestra empresa y nuestra misión",
716
576
  }),
577
+ title: t({
578
+ hi: "हमारे बारे में",
579
+ fr: "À Propos",
580
+ es: "Acerca de Nosotros",
581
+ }),
717
582
  },
718
583
  };
719
584
 
720
- export default aboutMetaContent;
585
+ export default aboutPageContent;
721
586
  ```
722
587
 
723
- ```typescript fileName="pages/about-meta.content.js" contentDeclarationFormat="cjs"
588
+ ```javascript fileName="pages/about-page.content.cjs" contentDeclarationFormat="commonjs"
724
589
  const { t } = require("intlayer");
725
590
 
726
591
  /** @type {import('intlayer').Dictionary} */
727
- const aboutMetaContent = {
728
- key: "about-meta",
592
+ const aboutPageContent = {
593
+ key: "about-page",
729
594
  content: {
730
- title: t({
731
- zh: "关于我们 - 我的公司",
732
- en: "हमारे बारे में - मेरी कंपनी",
595
+ metaTitle: t({
596
+ hi: "हमारे बारे में - मेरी कंपनी",
733
597
  fr: "À Propos - Ma Société",
734
598
  es: "Acerca de Nosotros - Mi Empresa",
735
599
  }),
736
- description: t({
737
- zh: "了解更多关于我们公司和我们的使命",
738
- en: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
600
+ metaDescription: t({
601
+ hi: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
602
+ en: "Learn more about our company and our mission",
739
603
  fr: "En savoir plus sur notre société et notre mission",
740
604
  es: "Conozca más sobre nuestra empresa y nuestra misión",
741
605
  }),
606
+ title: t({
607
+ hi: "हमारे बारे में",
608
+ en: "About Us",
609
+ fr: "À Propos",
610
+ es: "Acerca de Nosotros",
611
+ }),
742
612
  },
743
613
  };
744
614
 
745
- module.exports = aboutMetaContent;
615
+ module.exports = aboutPageContent;
746
616
  ```
747
617
 
748
- ```json fileName="pages/about-meta.content.json" contentDeclarationFormat="json"
618
+ ```json fileName="pages/about-page.content.json" contentDeclarationFormat="json"
749
619
  {
750
- "key": "about-meta",
620
+ "$schema": "https://intlayer.org/schema.json",
621
+ "key": "about-page",
751
622
  "content": {
752
- "title": {
623
+ "metaTitle": {
753
624
  "nodeType": "translation",
754
- "translations": {
755
- "zh": "关于我们 - 我的公司",
756
- "en": "हमारे बारे में - मेरी कंपनी",
625
+ "translation": {
626
+ "hi": "हमारे बारे में - मेरी कंपनी",
627
+ "en": "About Us - My Company",
757
628
  "fr": "À Propos - Ma Société",
758
629
  "es": "Acerca de Nosotros - Mi Empresa"
759
630
  }
760
631
  },
761
- "description": {
632
+ "metaDescription": {
762
633
  "nodeType": "translation",
763
- "translations": {
764
- "zh": "了解更多关于我们公司和我们的使命",
765
- "en": "Learn more about our company and our mission",
634
+ "translation": {
635
+ "hi": "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
766
636
  "fr": "En savoir plus sur notre société et notre mission",
767
637
  "es": "Conozca más sobre nuestra empresa y nuestra misión"
768
638
  }
639
+ },
640
+ "title": {
641
+ "nodeType": "translation",
642
+ "translation": {
643
+ "hi": "हमारे बारे में",
644
+ "fr": "À Propos",
645
+ "es": "Acerca de Nosotros"
646
+ }
769
647
  }
770
648
  }
771
649
  }
772
650
  ```
773
651
 
774
- ### टाइपस्क्रिप्ट कॉन्फ़िगर करें
775
-
776
- Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
777
-
778
- ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
779
-
780
- ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
781
-
782
- सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में ऑटो-जेनरेटेड टाइप्स शामिल हैं।
783
-
784
- ```json5 fileName="tsconfig.json"
785
- {
786
- // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन
787
- "include": [
788
- // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
789
- ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकारों को शामिल करें
790
- ],
791
- }
792
- ```
793
-
794
652
  ### Git कॉन्फ़िगरेशन
795
653
 
796
- सुझाव दिया जाता है कि Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा किया जाए। इससे आप उन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
654
+ यह अनुशंसित है कि Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा किया जाए। इससे आप इन्हें अपनी Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
797
655
 
798
- इसके लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
656
+ इसके लिए, आप अपनी `.gitignore` फाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
799
657
 
800
658
  ```plaintext fileName=".gitignore"
801
- # Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
659
+ # Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें
802
660
  .intlayer
803
661
  ```
804
662
 
805
- ### VS कोड एक्सटेंशन
663
+ ### VS Code एक्सटेंशन
806
664
 
807
- Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल कर सकते हैं।
665
+ Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
808
666
 
809
667
  [VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
810
668
 
811
669
  यह एक्सटेंशन प्रदान करता है:
812
670
 
813
- - **अनुवाद कुंजी के लिए ऑटोकम्प्लीशन**.
814
- - **अनुवादों की कमी के लिए रियल-टाइम त्रुटि पहचान**।
815
- - **अनुवादित सामग्री के इनलाइन पूर्वावलोकन**।
816
- - **तेजी से क्रियाएं** ताकि आप आसानी से अनुवाद बना और अपडेट कर सकें।
671
+ - अनुवाद कुंजियों के लिए **ऑटोकम्प्लीशन**।
672
+ - गायब अनुवादों के लिए **रीयल-टाइम त्रुटि पहचान**।
673
+ - अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**।
674
+ - अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
817
675
 
818
- विस्तृत जानकारी के लिए, एक्सटेंशन का उपयोग कैसे करें, इसके लिए [Intlayer VS कोड एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
676
+ एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक विवरण के लिए देखें [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension)
819
677
 
820
678
  ---
821
679
 
822
680
  ### आगे बढ़ें
823
681
 
824
- आगे बढ़ने के लिए, आप [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को लागू कर सकते हैं या अपनी सामग्री को [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके बाहरी कर सकते हैं।
825
-
826
- ---
682
+ आगे बढ़ने के लिए, आप [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को लागू कर सकते हैं या अपने कंटेंट को [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।