\n\n\n```\n\n> `locale` प्रॉप को Astro पृष्ठ (सर्वर पहचान) से पारित किया जाता है और `installIntlayer` को इनिशियलाइज़ करने के लिए उपयोग किया जाता है, जिससे पेड़ के भीतर सभी कंपोजेबल्स के लिए प्रारंभिक भाषा सेट हो जाती है।\n\n### चरण 7: एक भाषा स्विचर जोड़ना\n\nभाषा स्विचिंग कार्यक्षमता सीधे Vue island टेम्पलेट के भीतर एकीकृत है (ऊपर चरण 6 देखें)। यह `vue-intlayer` से `useLocale` कंपोजेबल का उपयोग करता है और उपयोगकर्ता द्वारा एक नई भाषा चुनने पर स्थानीयकृत URL पर नेविगेट करता है:\n\n```vue fileName=\"src/components/vue/VueIsland.vue\"\n\n\n\n```\n\n> **निरंतरता पर नोट:**\n> `window.location.href` के माध्यम से रीडायरेक्ट करने के लिए `onLocaleChange` का उपयोग यह सुनिश्चित करता है कि नया भाषाई URL देखा जाए, जिससे Intlayer मिडलवेयर भाषा कुकी सेट कर सके और भविष्य की यात्राओं में उपयोगकर्ता की वरीयता को याद रख सके।\n\n### चरण 8: Sitemap और Robots.txt\n\nIntlayer आपकी स्थानीयकृत साइटमैप और robots.txt फ़ाइलों को गतिशील रूप से बनाने के लिए उपयोगिताओं की पेशकश करता है।\n\n#### साइटमैप (Sitemap)\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nअपने सभी स्थानीयकृत रूट सहित साइटमैप उत्पन्न करने के लिए `src/pages/sitemap.xml.ts` बनाएँ।\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nखोज इंजन क्रॉलिंग को नियंत्रित करने के लिए `src/pages/robots.txt.ts` बनाएँ।\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### TypeScript कॉन्फ़िगरेशन\n\nIntlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है।\n\n\n\n\n\nसुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।\n\n```json5 fileName=\"tsconfig.json\"\n{\n // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन\n \"include\": [\n // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन\n \".intlayer/**/*.ts\", // स्वतः उत्पन्न प्रकारों को शामिल करें\n ],\n}\n```\n\n### Git कॉन्फ़िगरेशन\n\nIntlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।\n\nऐसा करने के लिए, अपनी `.gitignore` फ़ाइल में निम्न निर्देश जोड़ें:\n\n```bash\n# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें\n.intlayer\n```\n\n### VS Code एक्सटेंशन\n\nIntlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप **आधिकारिक Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।\n\n[VS Code Marketplace से इंस्टॉलेशन](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nयह एक्सटेंशन प्रदान करता है:\n\n- अनुवाद कुंजियों के लिए **ऑटो-पूर्णता**।\n- अनुपलब्ध अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।\n- अनूदित सामग्री का **इनलाइन पूर्वावलोकन**।\n- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।\n\nएक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, [VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।\n\n---\n\n### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें\n\nयदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।\n\nइस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक [कंपाइलर](/hi/doc/compiler) / [एक्सट्रैक्टर](/hi/doc/concept/cli/extract) का प्रस्ताव करता है।\n\nइसे सेट करने के लिए, आप अपनी `intlayer.config.ts` फ़ाइल में एक `compiler` अनुभाग जोड़ सकते हैं:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... आपका शेष कॉन्फ़िगरेशन\n compiler: {\n /**\n * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।\n */\n enabled: true,\n\n /**\n * आउटपुट फ़ाइलों का पथ परिभाषित करता है\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।\n */\n saveComponents: false,\n\n /**\n * शब्दकोश कुंजी उपसर्ग\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nअपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nintlayerCompiler प्लगइन शामिल करने के लिए अपनी `vite.config.ts` अपडेट करें:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # या npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### अपने ज्ञान को और गहरा करें\n\nयदि आप और अधिक सीखना चाहते हैं, तो आप [विजुअल एडिटर](/hi/doc/concept/editor) को भी लागू कर सकते हैं या अपनी सामग्री को बाहरी बनाने के लिए [CMS](/hi/doc/concept/cms) का उपयोग कर सकते हैं।\n","about":"Intlayer के साथ अपनी Astro + Vue साइट में अंतर्राष्ट्रीयकरण (i18n) जोड़ना सीखें। अपनी साइट को बहुभाषी बनाने के लिए इस गाइड का पालन करें।","url":"https://intlayer.org/hi/doc/environment/astro/vue","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"अंतर्राष्ट्रीयकरण, दस्तावेज़ीकरण, Intlayer, Astro, Vue, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"डेवलपर्स, सामग्री प्रबंधक"}}

Creation:2026-04-24Last update:2026-05-06