Author:

Creation:2025-04-18Last update:2026-05-31

GitHub पर एप्लिकेशन टेम्पलेट देखें

इस पृष्ठ के लिए एक एप्लिकेशन टेम्पलेट उपलब्ध है।

शोकेस एप्लिकेशन देखें

यह पृष्ठ टेम्पलेट का लाइव डेमो लिंक करता है।

वीडियो ट्यूटोरियल देखें

इस पृष्ठ के लिए एक वीडियो ट्यूटोरियल उपलब्ध है।

इस दस्तावेज़ को अपने पसंदीदा AI एसिस्टेंट के साथ संदर्भित करेंChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके

संस्करण इतिहास

"सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"
v8.9.04/5/2026
"init कमांड जोड़ें"
v7.5.930/12/2025
"प्रारंभिक इतिहास"
v5.5.1029/6/2025

इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।

अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखें

इस दस्तावेज़ को संपादित करें

अगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।

दस्तावेज़ के लिए GitHub लिंक

Copy

दस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें

Intlayer के साथ अपना Vite and Vue अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

Name: Intlayer
Author: Intlayer

GitHub पर एप्लिकेशन टेम्पलेट देखें।

विकल्पों पर इन्टलेयर क्यों?

Vue-i18n या i18next जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

पूर्ण व्यू कवरेज

Intlayer को घटक-स्तरीय सामग्री स्कोपिंग, प्रतिक्रियाशील अनुवाद, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके Vue के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।

बंडल का आकार

अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।

रखरखाव

आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।

एआई एजेंट

सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और एजेंट कौशल, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

स्वचालन

अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।

प्रदर्शन

बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।

किसी भी देव के साथ स्केलिंग

सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।

Vite और Vue एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

www.youtube.com

GitHub पर एप्लिकेशन टेम्पलेट देखें।

1
निर्भरताएँ स्थापित करें

npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
bash
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
npm install intlayer vue-intlayernpm install vite-intlayer --save-devnpx intlayer init
- intlayer
  
  मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन, और CLI कमांड्स के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
- vue-intlayer वह पैकेज जो Intlayer को Vue एप्लिकेशन के साथ एकीकृत करता है। यह Vue अंतरराष्ट्रीयकरण के लिए संदर्भ प्रदाता और कॉम्पोज़ेबल्स प्रदान करता है।
- vite-intlayer Vite प्लगइन शामिल है जो Intlayer को Vite बंडलर के साथ एकीकृत करता है, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने, और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी प्रदान करता है।
2
अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
intlayer.config.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
```
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // आपकी अन्य भाषाएँ
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
```
इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग को अक्षम करना, और भी बहुत कुछ सेट कर सकते हैं। उपलब्ध पैरामीटर की पूरी सूची के लिए, कृपया कॉन्फ़िगरेशन दस्तावेज़ देखें।
3
अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
vite.config.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
```
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), intlayer()],
});
```
intlayer() Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनका निरीक्षण करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।

अपनी सामग्री घोषित करें

अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:

src/helloWorld.content.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

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

const helloWorldContent = {
  key: "helloworld",
  content: {
    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
    edit: t({
      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
    }),
    checkOut: t({ en: "जांचें ", fr: "Vérifiez ", es: "Compruebe " }),
    officialStarter: t({
      en: ", आधिकारिक Vue + Vite स्टार्टर",
      fr: ", le starter officiel Vue + Vite",
      es: ", el starter oficial Vue + Vite",
    }),
    learnMore: t({
      en: "Vue के लिए IDE समर्थन के बारे में अधिक जानें ",
      fr: "En savoir plus sur le support IDE pour Vue dans le ",
      es: "Aprenda más sobre el soporte IDE para Vue en el ",
    }),
    vueDocs: t({
      en: "Vue दस्तावेज़ स्केलिंग अप गाइड",
      fr: "Vue Docs Scaling up Guide",
      es: "Vue Docs Scaling up Guide",
    }),
    readTheDocs: t({
      en: "Vite और Vue लोगो पर क्लिक करके अधिक जानें",
      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
    }),
  },
} satisfies Dictionary;

export default helloWorldContent;

आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल हो जाती हैं। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हैं (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml})।

अधिक विवरण के लिए, सामग्री घोषणा प्रलेखन देखें।

5
अपने कोड में Intlayer का उपयोग करें

अपने Vue एप्लिकेशन में Intlayer के अंतरराष्ट्रीयकरण फीचर्स का उपयोग करने के लिए, आपको सबसे पहले अपने मुख्य फ़ाइल में Intlayer सिंगलटन इंस्टेंस को रजिस्टर करना होगा। यह चरण महत्वपूर्ण है क्योंकि यह आपके एप्लिकेशन के सभी कंपोनेंट्स को अंतरराष्ट्रीयकरण संदर्भ प्रदान करता है, जिससे अनुवाद आपके कंपोनेंट ट्री में कहीं भी सुलभ हो जाते हैं।
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
import { createApp } from "vue";import { intlayer } from "vue-intlayer";import App from "./App.vue";import "./style.css";const app = createApp(App);// शीर्ष स्तर पर प्रदाता को इंजेक्ट करेंapp.use(intlayer);// एप्लिकेशन को माउंट करेंapp.mount("#app");
अपने एप्लिकेशन में कंटेंट डिक्शनरीज़ तक पहुंचने के लिए एक मुख्य Vue कंपोनेंट बनाएं और useIntlayer कॉम्पोज़ेबल्स का उपयोग करें:
src/HelloWord.vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({ msg: String,});const { count, edit, checkOut, officialStarter, learnMore, vueDocs, readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template> <h1>{{ msg }}</h1> <div class="card"> <button type="button" @click="countRef++"> <count /> {{ countRef }} </button> <p v-html="edit"></p> </div> <p> <checkOut /> <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" >create-vue</a >, <officialStarter /> </p> <p> <learnMore /> <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank" ><vueDocs /></a >. </p> <p class="read-the-docs"><readTheDocs /></p> <p class="read-the-docs">{{ readTheDocs }}</p></template>
Intlayer में कंटेंट तक पहुंचना
Intlayer आपकी सामग्री तक पहुंचने के लिए विभिन्न API प्रदान करता है:
- कंपोनेंट-आधारित सिंटैक्स (अनुशंसित): कंटेंट को Intlayer नोड के रूप में रेंडर करने के लिए <myContent /> या <Component :is="myContent" /> सिंटैक्स का उपयोग करें। यह विज़ुअल एडिटर और CMS के साथ सहजता से एकीकृत होता है।
- स्ट्रिंग-आधारित सिंटैक्स: कंटेंट को प्लेन टेक्स्ट के रूप में रेंडर करने के लिए {{ myContent }} का उपयोग करें, बिना विज़ुअल एडिटर सपोर्ट के।
- रॉ HTML सिंटैक्स: <div v-html="myContent" /> का उपयोग बिना विज़ुअल एडिटर समर्थन के सामग्री को कच्चे HTML के रूप में रेंडर करने के लिए करें।
- डिस्ट्रक्चरिंग सिंटैक्स: useIntlayer कॉम्पोज़ेबल सामग्री के साथ एक प्रॉक्सी लौटाता है। इस प्रॉक्सी को डिस्ट्रक्चर करके सामग्री तक पहुंचा जा सकता है जबकि प्रतिक्रियाशीलता बनी रहती है।
  - const content = useIntlayer("myContent"); का उपयोग करें और {{ content.myContent }} / <content.myContent />।
  - या const { myContent } = useIntlayer("myContent"); का उपयोग करें और {{ myContent}} / <myContent/> से सामग्री को डिस्ट्रक्चर करें।
यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए Intlayer कंपाइलर को एक्सट्रैक्ट कमांड के साथ उपयोग कर सकते हैं।

अपनी सामग्री की भाषा बदलें

वैकल्पिक

अपनी सामग्री की भाषा बदलने के लिए, आप useLocale कॉम्पोज़ेबल द्वारा प्रदान किया गया setLocale फ़ंक्शन उपयोग कर सकते हैं। यह फ़ंक्शन एप्लिकेशन की लोकल सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।

भाषाओं के बीच स्विच करने के लिए एक कंपोनेंट बनाएं:

src/components/LocaleSwitcher.vue

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { getLocaleName } from "intlayer";import { useLocale } from "vue-intlayer";// लोकल जानकारी और setLocale फ़ंक्शन प्राप्त करेंconst { locale, availableLocales, setLocale } = useLocale();// चयनित लोकल को ref के साथ ट्रैक करेंconst selectedLocale = ref(locale.value);// चयन बदलने पर लोकल अपडेट करेंconst changeLocale = () => setLocale(selectedLocale.value);// selectedLocale को वैश्विक locale के साथ सिंक में रखेंwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

फिर, इस कॉम्पोनेंट का उपयोग अपने App.vue में करें:

src/App.vue

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import HelloWorld from "@components/HelloWorld.vue";import LocaleSwitcher from "@components/LocaleSwitcher.vue";import { ref, watch } from "vue";const content = useIntlayer("app"); // संबंधित intlayer घोषणा फ़ाइल बनाएं</script><template>  <div>    <LocaleSwitcher />    <a href="https://vite.dev" target="_blank">      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />    </a>    <a href="https://vuejs.org/" target="_blank">      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />    </a>  </div>  <HelloWorld :msg="content.title" /></template>

7
अपने एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ें
वैकल्पिक

Vue एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ना आमतौर पर Vue Router का उपयोग करके लोकल प्रीफिक्स के साथ किया जाता है। यह प्रत्येक भाषा के लिए अद्वितीय रूट बनाता है, जो SEO और SEO-अनुकूल URL के लिए उपयोगी है।

उदाहरण:
plaintext
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
- https://example.com/about- https://example.com/es/about- https://example.com/fr/about
सबसे पहले, Vue Router इंस्टॉल करें:
bash
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
npm install vue-routernpx intlayer init
फिर, एक राउटर कॉन्फ़िगरेशन बनाएं जो स्थानीय-आधारित रूटिंग को संभालता है:
src/router/index.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
import { localeFlatMap, type Locale,} from 'intlayer';import { createIntlayerClient } from "vue-intlayer";import { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/home/HomeView.vue';import RootView from './views/root/Root.vue';/** * स्थानीय-विशिष्ट पथ और मेटाडेटा के साथ रूट्स घोषित करें। */const routes = localeFlatMap(({ urlPrefix, locale }) => [ { path: `${urlPrefix}/`, name: `Root-${locale}`, component: RootView, meta: { locale, }, }, { path: `${urlPrefix}/home`, name: `Home-${locale}`, component: HomeView, meta: { locale, }, },]);// राउटर इंस्टेंस बनाएंexport const router = createRouter({ history: createWebHistory(), routes,});// स्थानीयता हैंडलिंग के लिए नेविगेशन गार्ड जोड़ेंrouter.beforeEach((to, _from, next) => { const client = createIntlayerClient(); const metaLocale = to.meta.locale as Locale; // रूट मेटा में परिभाषित स्थानीयता का पुन: उपयोग करें client.setLocale(metaLocale); next();});
राउटर में रूट की पहचान करने के लिए नाम का उपयोग किया जाता है। यह सभी रूट्स में अद्वितीय होना चाहिए ताकि संघर्ष से बचा जा सके और उचित नेविगेशन और लिंकिंग सुनिश्चित हो सके।

फिर, अपने main.js फ़ाइल में राउटर को पंजीकृत करें:
src/main.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// ऐप में राउटर जोड़ेंapp.use(router);// ऐप को माउंट करेंapp.mount("#app");
फिर अपने App.vue फ़ाइल को अपडेट करें ताकि RouterView कॉम्पोनेंट को रेंडर किया जा सके। यह कॉम्पोनेंट वर्तमान रूट के लिए मेल खाने वाले कॉम्पोनेंट को प्रदर्शित करेगा।
src/App.vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template> <nav> <LocaleSwitcher /> </nav> <RouterView /></template>
साथ ही, आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए intlayerProxy का भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान स्थानीयता को स्वचालित रूप से पहचान लेगा और उपयुक्त स्थानीयता कुकी सेट करेगा। यदि कोई स्थानीयता निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त स्थानीयता निर्धारित करेगा। यदि कोई स्थानीयता पता नहीं चलती है, तो यह डिफ़ॉल्ट स्थानीयता पर पुनर्निर्देशित करेगा।
vite.config.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
```
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer, intlayerProxy } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    intlayerProxy(), // should be placed first
    vue(),
    intlayer(),
  ],
});
```

जब स्थानीयता बदलती है तो URL बदलें

वैकल्पिक

जब उपयोगकर्ता भाषा बदलता है तो URL को स्वचालित रूप से अपडेट करने के लिए, आप LocaleSwitcher घटक को Vue Router का उपयोग करने के लिए संशोधित कर सकते हैं:

src/components/LocaleSwitcher.vue

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Vue Router प्राप्त करेंconst router = useRouter();// लोकल जानकारी और setLocale फ़ंक्शन प्राप्त करेंconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // वर्तमान रूट प्राप्त करें और एक स्थानीयकृत URL बनाएं    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // पेज को रीलोड किए बिना स्थानीयकृत रूट पर नेविगेट करें    router.push(localizedPath);  },});// चयनित लोकल को ref के साथ ट्रैक करेंconst selectedLocale = ref(locale.value);// चयन बदलने पर स्थानीयता अपडेट करेंconst changeLocale = () => {  setLocale(selectedLocale.value);};// selectedLocale को वैश्विक स्थानीयता के साथ सिंक में रखेंwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

टिप: बेहतर SEO और पहुँच के लिए, स्थानीयकृत पृष्ठों से लिंक करने के लिए <a href="/fr/home" hreflang="fr"> जैसे टैग का उपयोग करें, जैसा कि चरण 10 में दिखाया गया है। इससे खोज इंजन भाषा-विशिष्ट URL को सही ढंग से खोज और अनुक्रमित कर सकते हैं। SPA व्यवहार बनाए रखने के लिए, आप @click.prevent के साथ डिफ़ॉल्ट नेविगेशन को रोक सकते हैं, useLocale का उपयोग करके स्थानीयता बदल सकते हैं, और Vue Router का उपयोग करके प्रोग्रामेटिक रूप से नेविगेट कर सकते हैं।

html

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<ol>  <li>    <a      hreflang="x-default"      aria-label="अंग्रेज़ी में स्विच करें"      target="_self"      aria-current="page"      href="/doc/get-started"    >      <div>        <span dir="ltr" lang="en">English</span>        <span>अंग्रेज़ी</span>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="स्पेनिश में स्विच करें"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span>        <span>स्पेनिश</span>        <span>ES</span>      </div>    </a>  </li></ol>

9
HTML भाषा और दिशा विशेषताओं को स्विच करें
वैकल्पिक

जब आपका एप्लिकेशन कई भाषाओं का समर्थन करता है, तो वर्तमान लोकल के अनुसार <html> टैग के lang और dir विशेषताओं को अपडेट करना महत्वपूर्ण होता है। ऐसा करने से सुनिश्चित होता है कि:
- पहुँच: स्क्रीन रीडर और सहायक तकनीकें सही lang एट्रिब्यूट पर निर्भर करती हैं ताकि सामग्री को सही ढंग से उच्चारित और व्याख्यायित किया जा सके।
- पाठ रेंडरिंग: dir (दिशा) एट्रिब्यूट सुनिश्चित करता है कि पाठ सही क्रम में प्रदर्शित हो (जैसे, अंग्रेज़ी के लिए बाएं से दाएं, अरबी या हिब्रू के लिए दाएं से बाएं), जो पठनीयता के लिए आवश्यक है।
- एसईओ: सर्च इंजन lang एट्रिब्यूट का उपयोग आपके पृष्ठ की भाषा निर्धारित करने के लिए करते हैं, जिससे खोज परिणामों में सही स्थानीयकृत सामग्री प्रदर्शित हो सके।
जब स्थानीयता बदलती है, तो इन एट्रिब्यूट्स को गतिशील रूप से अपडेट करके, आप सभी समर्थित भाषाओं में उपयोगकर्ताओं के लिए एक सुसंगत और सुलभ अनुभव सुनिश्चित करते हैं।
src/composables/useI18nHTMLAttributes.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * एक कॉम्पोजेबल जो वर्तमान लोकल के आधार पर HTML <html> एलिमेंट के `lang` और `dir` एट्रिब्यूट्स को अपडेट करता है। * * @example * // अपने App.vue या किसी ग्लोबल कॉम्पोनेंट में * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export const useI18nHTMLAttributes = () => { const { locale } = useLocale(); // जब भी लोकल बदलता है, HTML एट्रिब्यूट्स को अपडेट करें watch( () => locale.value, (newLocale) => { if (!newLocale) return; // भाषा एट्रिब्यूट को अपडेट करें document.documentElement.lang = newLocale; // टेक्स्ट दिशा सेट करें (अधिकांश भाषाओं के लिए ltr, अरबी, हिब्रू आदि के लिए rtl) document.documentElement.dir = getHTMLTextDir(newLocale); }, { immediate: true } );};
अपने App.vue या किसी वैश्विक कॉम्पोनेंट में इस कॉम्पोज़ेबल का उपयोग करें:
src/App.vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// वर्तमान लोकल के आधार पर HTML विशेषताओं को लागू करेंuseI18nHTMLAttributes();</script><template> </template>
10
एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना
वैकल्पिक

यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन की नेविगेशन वर्तमान लोकल का सम्मान करती है, आप एक कस्टम Link कॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पेज के लिंक पर क्लिक करता है, तो वे /about के बजाय /fr/about पर पुनः निर्देशित होते हैं।

यह व्यवहार कई कारणों से उपयोगी है:
- SEO और उपयोगकर्ता अनुभव: स्थानीयकृत URL खोज इंजन को भाषा-विशिष्ट पृष्ठों को सही ढंग से इंडेक्स करने में मदद करते हैं और उपयोगकर्ताओं को उनकी पसंदीदा भाषा में सामग्री प्रदान करते हैं।
- संगति: अपने एप्लिकेशन में स्थानीयकृत लिंक का उपयोग करके, आप सुनिश्चित करते हैं कि नेविगेशन वर्तमान लोकल के भीतर ही रहता है, जिससे अप्रत्याशित भाषा परिवर्तन से बचा जा सके।
- रखरखाव योग्यता: स्थानीयकरण लॉजिक को एकल घटक में केंद्रीकृत करने से URL प्रबंधन सरल हो जाता है, जिससे आपका कोडबेस बनाए रखना और विस्तार करना आसान हो जाता है क्योंकि आपका एप्लिकेशन बढ़ता है।
src/components/Link.vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<template> <a :href="localizedHref" v-bind="$attrs"> <slot /> </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({ href: { type: String, required: true, },});const { locale } = useLocale();// जांचें कि लिंक बाहरी है या नहींconst isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));// आंतरिक लिंक के लिए स्थानीयकृत href बनाएंconst localizedHref = computed(() => isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>
Vue Router के साथ उपयोग के लिए, एक राउटर-विशिष्ट संस्करण बनाएं:
src/components/RouterLink.vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<template> <router-link :to="localizedTo" v-bind="$attrs"> <slot /> </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({ to: { type: [String, Object], required: true, },});const { locale } = useLocale();// router-link के लिए localized to-prop बनाएंconst localizedTo = computed(() => { if (typeof props.to === "string") { return getLocalizedUrl(props.to, locale.value); } else { // यदि 'to' एक ऑब्जेक्ट है, तो path प्रॉपर्टी को स्थानीयकृत करें return { ...props.to, path: getLocalizedUrl(props.to.path ?? "/", locale.value), }; }});</script>
अपने एप्लिकेशन में इन कॉम्पोनेंट्स का उपयोग करें:
src/App.vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<template> <div>  <RouterLink to="/">रूट</RouterLink> <RouterLink to="/home">होम</RouterLink>  <Link href="/">रूट</Link> <Link href="/home">होम</Link> </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>
11
मार्कडाउन रेंडर करें
वैकल्पिक

Intlayer आपके Vue एप्लिकेशन में Markdown सामग्री को सीधे रेंडर करने का समर्थन करता है। डिफ़ॉल्ट रूप से, Markdown को सादा टेक्स्ट के रूप में माना जाता है। Markdown को समृद्ध HTML में बदलने के लिए, आप markdown-it, एक Markdown पार्सर, को एकीकृत कर सकते हैं।

यह विशेष रूप से उपयोगी होता है जब आपके अनुवादों में सूची, लिंक, या जोर देने जैसे स्वरूपित सामग्री शामिल होती है।

डिफ़ॉल्ट रूप से Intlayer Markdown को स्ट्रिंग के रूप में रेंडर करता है। लेकिन Intlayer installIntlayerMarkdown फ़ंक्शन का उपयोग करके Markdown को HTML में रेंडर करने का तरीका भी प्रदान करता है।

intlayer पैकेज का उपयोग करके Markdown सामग्री को कैसे घोषित करें, यह देखने के लिए markdown doc देखें।
main.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
import MarkdownIt from "markdown-it";import { createApp, h } from "vue";import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";const app = createApp(App);app.use(intlayer);const md = new MarkdownIt({ html: true, // HTML टैग की अनुमति दें linkify: true, // URL को स्वचालित रूप से लिंक करें typographer: true, // स्मार्ट कोट्स, डैश आदि सक्षम करें});// Intlayer को बताएं कि जब भी उसे मार्कडाउन को HTML में बदलना हो तो md.render() का उपयोग करेinstallIntlayerMarkdown(app, (markdown) => { const html = md.render(markdown); return h("div", { innerHTML: html });});
एक बार पंजीकृत होने के बाद, आप सीधे मार्कडाउन सामग्री दिखाने के लिए कंपोनेंट-आधारित सिंटैक्स का उपयोग कर सकते हैं:
vue
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
<template> <div> <myMarkdownContent /> </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("my-component");</script>
1
अपने घटकों की सामग्री निकालें
वैकल्पिक

यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:
intlayer.config.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
```
import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... आपका शेष कॉन्फ़िगरेशन
  compiler: {
    /**
     * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
     */
    enabled: true,

    /**
     * आउटपुट फ़ाइलों का पथ परिभाषित करता है
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
     */
    saveComponents: false,

    /**
     * शब्दकोश कुंजी उपसर्ग
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;
```
अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ

bash
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
npx intlayer extract

intlayerCompiler प्लगइन शामिल करने के लिए अपनी vite.config.ts अपडेट करें:

vite.config.ts
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [ intlayer(), intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है ],});

bash
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
npm run build # या npm run dev

टाइपस्क्रिप्ट कॉन्फ़िगर करें

Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।

Autocompletion

Translation error

सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में ऑटो-जनरेटेड टाइप्स शामिल हैं।

tsconfig.json

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

{  // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन  "include": [    // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन    ".intlayer/**/*.ts", // ऑटो-जनरेटेड टाइप्स शामिल करें  ],}

गिट कॉन्फ़िगरेशन

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की सलाह दी जाती है। इससे आप इन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।

इसके लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

#  Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayer

VS कोड एक्सटेंशन

Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS कोड एक्सटेंशन इंस्टॉल कर सकते हैं।

VS कोड मार्केटप्लेस से इंस्टॉल करें

यह एक्सटेंशन प्रदान करता है:

अनुवाद कुंजियों के लिए ऑटोकंप्लीशन।
गायब अनुवादों के लिए रीयल-टाइम त्रुटि पता लगाना।
अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएं।

अधिक जानकारी के लिए कि एक्सटेंशन का उपयोग कैसे करें, कृपया Intlayer VS Code एक्सटेंशन दस्तावेज़ देखें।

(वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)

Intlayer generateSitemap और getMultilingualUrls उपलब्ध कराता है ताकि आप क्रॉलर-तैयार बहुभाषी sitemap.xml और robots.txt बनाकर public/ में स्वचालित लिख सकें। आमतौर पर Vite से पहले छोटा Node स्क्रिप्ट चलाएँ (जैसे npm predev / prebuild)।

साइटमैप

Intlayer का साइटमैप जनरेटर आपकी लोकेल सेटिंग का सम्मान करता है और क्रॉलर के लिए मेटाडेटा जोड़ता है।

जनरेट साइटमैप xhtml:link (hreflang) नेमस्पेस को सपोर्ट करता है। सपाट URL सूची के बजाय Intlayer हर पृष्ठ के सभी भाषा संस्करणों को दोतरफा जोड़ता है (जैसे /about, /fr/about, या /about?lang=fr - रूटिंग मोड पर निर्भर)।

Robots.txt

getMultilingualUrls का उपयोग करें ताकि Disallow नियम संवेदनशील पथों के सभी बहुभाषी रूपों को कवर करें।

1. प्रोजेक्ट रूट में `generate-seo.mjs` जोड़ें

generate-seo.mjs

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

स्क्रिप्ट को intlayer इम्पोर्ट करने के लिए पैकेज इंस्टॉल होना चाहिए। प्रोडक्शन में SITE_URL सेट करें (जैसे CI में)।

Node ESM के लिए generate-seo.mjs पसंद करें। generate-seo.js के लिए package.json में "type": "module" या अन्य ESM सेटअप करें।

2. Vite से पहले स्क्रिप्ट चलाएँ

package.json

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

{  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

pnpm या yarn हो तो कमांड अनुकूलित करें। CI से भी कॉल कर सकते हैं।

आगे बढ़ें

आगे बढ़ने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या अपनी सामग्री को CMS का उपयोग करके बाहरी कर सकते हैं।

Compiler Nuxt और Vue

{{ msg }}

संस्करण इतिहास

Intlayer के साथ अपना Vite and Vue अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

विकल्पों पर इन्टलेयर क्यों?

Vite और Vue एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

निर्भरताएँ स्थापित करें

अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

अपनी सामग्री घोषित करें

अपने कोड में Intlayer का उपयोग करें

Intlayer में कंटेंट तक पहुंचना

अपनी सामग्री की भाषा बदलें

अपने एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ें

जब स्थानीयता बदलती है तो URL बदलें

HTML भाषा और दिशा विशेषताओं को स्विच करें

एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना

मार्कडाउन रेंडर करें

अपने घटकों की सामग्री निकालें

टाइपस्क्रिप्ट कॉन्फ़िगर करें

गिट कॉन्फ़िगरेशन

VS कोड एक्सटेंशन

(वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)

साइटमैप

Robots.txt

1. प्रोजेक्ट रूट में generate-seo.mjs जोड़ें

2. Vite से पहले स्क्रिप्ट चलाएँ

आगे बढ़ें

1. प्रोजेक्ट रूट में `generate-seo.mjs` जोड़ें