Frontend Academy · पाठ

Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n

अनुकूलित इमेज के लिए @nuxt/image, प्रमाणीकरण के लिए @nuxtjs/auth-next, और अंतर्राष्ट्रीयकरण के लिए @nuxtjs/i18n इंस्टॉल तथा कॉन्फ़िगर करें।

पाठ 3, कुल 4 में से15 चरण

Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Nuxt मॉड्यूल क्या हैं

मॉड्यूल Nuxt के आधिकारिक विस्तार तंत्र हैं। इन्हें nuxt.config.ts में इंस्टॉल किया जाता है और ये बिल्ड, रनटाइम तथा डेवलपमेंट सर्वर से जुड़ते हैं। पारिस्थितिकी तंत्र की अधिकांश सुविधाएँ मॉड्यूल होती हैं।

मॉड्यूल इंस्टॉल करना

npm से मॉड्यूल इंस्टॉल करें, फिर उसे nuxt.config.ts में modules में जोड़ें।

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
    '@sidebase/nuxt-auth',
    '@nuxtjs/i18n'
  ]
});

@nuxt/image

<img> को अनुकूलित <NuxtImg> से बदलता है — स्वचालित प्रारूप (WebP/AVIF), प्रतिक्रियाशील srcset, आलसी लोडिंग और CDN एकीकरण।

<template>
  <NuxtImg
    src="/photos/sunset.jpg"
    alt="Sunset"
    width="800"
    height="600"
    format="webp"
    loading="lazy"
    sizes="sm:100vw md:50vw lg:800px"
  />
</template>

आर्ट डायरेक्शन के लिए NuxtPicture

<NuxtPicture> आर्ट डायरेक्शन के लिए कई <source> टैग वाला <picture> एलिमेंट बनाता है।

<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />

इमेज प्रोवाइडर कॉन्फ़िगरेशन

CDN प्रोवाइडर (Cloudinary, imgix, Vercel आदि) कॉन्फ़िगर करें, ताकि सभी इमेज उसी के माध्यम से भेजी जाएँ।

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'cloudinary',
    cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
  }
});

@sidebase/nuxt-auth (प्रमाणीकरण)

कई प्रोवाइडर वाला प्रमाणीकरण मॉड्यूल: NextAuth-संगत OAuth, स्थानीय क्रेडेंशियल और कस्टम प्रवाह।

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth'],
  auth: {
    baseURL: process.env.AUTH_ORIGIN,
    provider: { type: 'authjs' }
  }
});

पृष्ठों में प्रमाणीकरण का उपयोग करना

useAuth() कंपोज़ेबल सत्र, स्थिति और signIn/signOut उपलब्ध कराता है।

<script setup>
const { data: session, status, signIn, signOut } = useAuth();
</script>

<template>
  <button v-if="status === 'unauthenticated'" @click="signIn('github')">
    Sign in with GitHub
  </button>
  <div v-else>
    Welcome, {{ session.user.name }}
    <button @click="signOut">Sign out</button>
  </div>
</template>

मिडलवेयर से रूट सुरक्षित करना

प्रमाणीकरण आवश्यक करने के लिए किसी पृष्ठ पर auth मिडलवेयर का उपयोग करें।

<script setup>
definePageMeta({ middleware: 'auth' });
</script>

@nuxtjs/i18n (अंतरराष्ट्रीयकरण)

आधिकारिक i18n मॉड्यूल कई भाषाओं, स्थानीय-भाषा उपसर्ग वाले रूट, मांग पर लोड होने वाली अनुवाद फ़ाइलों और SEO-अनुकूल hreflang का समर्थन करता है।

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'tr', file: 'tr.json' }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'locales/'
  }
});

कंपोनेंट में अनुवाद करना

टेम्पलेट में $t या setup में useI18n का उपयोग करें।

<script setup>
const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ $t('welcome') }}</h1>
  <p>{{ t('greeting', { name: 'Alice' }) }}</p>
  <button @click="locale = locale === 'en' ? 'tr' : 'en'">
    {{ $t('switch_lang') }}
  </button>
</template>

स्थानीय-भाषा उपसर्ग वाले रूट

URL /en/about और /tr/about जैसे हो जाते हैं। सही उपसर्ग वाले लिंक बनाने के लिए localePath('/about') का उपयोग करें।

<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>

अन्य लोकप्रिय मॉड्यूल

@pinia/nuxt (स्टेट प्रबंधन), @vueuse/nuxt (200 से अधिक कंपोज़ेबल), @nuxtjs/tailwindcss (Tailwind सेटअप), @nuxtjs/color-mode (डार्क मोड), @nuxt/content (फ़ाइल-आधारित CMS)।

कस्टम मॉ्यूल लिखना

आंतरिक मोनोरेपो कार्यक्षमता के लिए ऐसा मॉड्यूल लिखें, जो Nuxt लाइफ़साइकल से जुड़े। मॉड्यूल शक्तिशाली होते हैं: कंपोनेंट, रनटाइम कॉन्फ़िगरेशन, सर्वर रूट और बिल्ड चरण रजिस्टर कर सकते हैं।

त्वरित जाँच

कौन-सा Nuxt 3 मॉड्यूल स्वचालित WebP/AVIF और प्रतिक्रियाशील srcset के साथ अनुकूलित इमेज लोडिंग उपलब्ध कराता है?

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

पुनरावलोकन: Nuxt मॉड्यूल

मॉड्यूल Nuxt का विस्तार करते हैं — इन्हें nuxt.config.ts में modules ऐरे के माध्यम से इंस्टॉल किया जाता है। अनुकूलित चित्रों (स्वचालित प्रारूप, srcset, आलसी लोडिंग) के लिए @nuxt/image। प्रमाणीकरण के लिए @sidebase/nuxt-auth (या nuxt-auth)। अनुवादों और स्थानीय-भाषा उपसर्ग वाले रूट के लिए @nuxtjs/i18n। इसके अलावा: @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss, @nuxt/content। आंतरिक पुनःउपयोग के लिए कस्टम मॉड्यूल लिखें।

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

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

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

पाठ्यक्रम: 41
पाठ: 163

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

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

क्या “Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n” पाठ निःशुल्क है?

हाँ—“Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n” में मैं क्या सीखूँगा?

अनुकूलित इमेज के लिए @nuxt/image, प्रमाणीकरण के लिए @nuxtjs/auth-next, और अंतर्राष्ट्रीयकरण के लिए @nuxtjs/i18n इंस्टॉल तथा कॉन्फ़िगर करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“Nuxt मॉड्यूल: इमेज, प्रमाणीकरण, i18n” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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