Vue Academy · पाठ

vue-i18n सेटअप और संदेश फ़ाइलें

createI18n(), लोकल JSON फ़ाइलें, संदेश सिंटैक्स {name}, नेस्टेड कुंजियाँ और fallback locale

पाठ 1, कुल 4 में से13 चरण

vue-i18n सेटअप और संदेश फ़ाइलें, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

i18n क्या है?

अंतरराष्ट्रीयकरण (i18n) का अर्थ है अपने app को इस तरह बनाना कि वह पाठ को कई भाषाओं में प्रस्तुत कर सके। Vue I18n Vue app का अनुवाद करने वाली आधिकारिक शैली की लाइब्रेरी है।

अंग्रेज़ी स्ट्रिंग को सीधे लिखने के बजाय, आप ऐसी कुंजियाँ खोजते हैं जो सक्रिय भाषा के पाठ तक पहुँचाती हैं।

Vue I18n इंस्टॉल करना

पैकेज जोड़ें। Vue 3 के लिए आप संस्करण 9 या उसके बाद का संस्करण उपयोग करते हैं, जो Composition API पर आधारित है।

// terminal
// npm install vue-i18n

संदेश फ़ाइलें

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

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

तुर्की locale जोड़ना

प्रत्येक locale में कुंजियों की वही संरचना होनी चाहिए, ताकि हर भाषा में हर कुंजी मौजूद हो।

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

i18n इंस्टेंस बनाना

createI18n इंस्टेंस बनाता है। locale (सक्रिय भाषा), fallbackLocale (कुंजी न मिलने पर उपयोग की जाने वाली भाषा) और messages मानचित्र सेट करें।

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

legacy: false क्यों?

legacy: false सेट करने से Composition API मोड सक्षम होता है, जिसका उपयोग आधुनिक Vue 3 app करते हैं। इससे useI18n कंपोज़ेबल उपलब्ध होता है, जिससे आप अगले पाठ में परिचित होंगे।

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

app के साथ पंजीकरण

app.use(i18n) से इंस्टेंस को प्लगइन के रूप में इंस्टॉल करें। इससे पूरे घटक ट्री में अनुवाद सहायक उपलब्ध हो जाते हैं।

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

टेम्पलेट में $t का उपयोग

इंस्टॉल करने के बाद, प्रत्येक टेम्पलेट सक्रिय locale में अनुवाद खोजने के लिए $t(key) कॉल कर सकता है।

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

fallbackLocale कैसे काम करता है

यदि सक्रिय locale में कोई कुंजी नहीं मिलती, तो Vue I18n कच्ची कुंजी दिखाने के बजाय fallbackLocale पर चला जाता है। अनुवाद का काम चलने के दौरान इससे UI उपयोगी बना रहता है।

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

प्लेसहोल्डर के साथ मान भरना

संदेशों में घुंघराले कोष्ठकों के भीतर नामित प्लेसहोल्डर हो सकते हैं। उन्हें भरने के लिए दूसरे आर्ग्युमेंट के रूप में मान पास करें।

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

संदेश फ़ाइलों को व्यवस्थित करना

वास्तविक app में प्रत्येक locale को अपनी फ़ाइल (en.json, tr.json) में रखें और उन्हें इम्पोर्ट करें। इससे अनुवादों को सँभालना आसान रहता है और अनुवादक स्वतंत्र रूप से काम कर सकते हैं।

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

त्वरित जाँच

Vue I18n सेटअप की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने Vue I18n सेट अप किया:

i18n का अर्थ कुंजियाँ खोजकर पाठ को कई भाषाओं में प्रस्तुत करना है।
प्रत्येक locale के लिए समान कुंजी संरचना वाला संदेश ऑब्जेक्ट परिभाषित करें।
createI18n में locale, fallbackLocale और messages दिए जाते हैं; Composition मोड के लिए legacy: false का उपयोग करें।
app.use(i18n) से इंस्टॉल करें और टेम्पलेट में $t(key) से अनुवाद करें।
{name} जैसे प्लेसहोल्डर दूसरे आर्ग्युमेंट के माध्यम से भरे जाते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “vue-i18n सेटअप और संदेश फ़ाइलें” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “vue-i18n सेटअप और संदेश फ़ाइलें” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“vue-i18n सेटअप और संदेश फ़ाइलें” में मैं क्या सीखूँगा?

createI18n(), लोकल JSON फ़ाइलें, संदेश सिंटैक्स {name}, नेस्टेड कुंजियाँ और fallback locale आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“vue-i18n सेटअप और संदेश फ़ाइलें” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Vue Academy पर वापस जाएँ