Frontend Academy · पाठ

प्लगइन सिस्टम: app.use()

install मेथड वाले ऑब्जेक्ट के रूप में Vue प्लगइन बनाएँ, वैश्विक कंपोनेंट और डायरेक्टिव पंजीकृत करें, और पूरे ऐप्लिकेशन को मान प्रदान करें।

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

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

Vue Plugin क्या है?

Plugin ऐसी पुनः उपयोग योग्य कार्यक्षमता है जिसे आप Vue app में install करते हैं: global components, directives, provide किए गए मान और prototype-जैसे helpers (router, i18n, pinia)। Libraries के Vue के साथ एकीकृत होने का तरीका plugins हैं।

Plugin का स्वरूप

Plugin एक ऐसा object होता है जिसमें install(app, options) method होता है — या ऐसा function जो install method की तरह काम करता है।

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

Plugin install करना

Vue app instance पर app.use(plugin, options) कॉल करें।

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

Plugin का उपयोग: Global Components

कई छोटे components को वैश्विक रूप से पंजीकृत करें, ताकि users को हर component अलग-अलग import न करना पड़े।

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

Plugin का उपयोग: Global Directives

Custom directives को एक बार पंजीकृत करें, ताकि वे पूरे app में उपलब्ध रहें।

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

Plugin का उपयोग: provide()

पूरे app में उपलब्ध मान provide करें, जिन्हें कोई भी component inject कर सकता है — यह API clients और configuration के लिए सामान्य है।

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

वास्तविक Plugins: Pinia, Vue Router, i18n

Vue ecosystem की प्रमुख libraries plugins हैं।

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

Plugin options

Plugins install के समय अपने व्यवहार को कॉन्फ़िगर करने के लिए options स्वीकार करते हैं।

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

TypeScript augmentation

globalProperties या injection helpers के लिए Vue के types को augment करें, ताकि users को autocompletion मिल सके।

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — पुराना pattern

app.config.globalProperties.$foo किसी मान को Options API वाले components और templates में this.$foo के रूप में उपलब्ध कराता है। Composition API inject() को प्राथमिकता देता है।

Idempotent install

दो बार install होने पर crash न करें — कोई flag जाँचें या Symbol-आधारित provide keys का उपयोग करें, जो स्वाभाविक रूप से दोहराव रोकती हैं।

अपना Plugin लिखना

यदि कई app एक ही config (auth wrapper, telemetry setup, design tokens) का पुनः उपयोग करते हैं, तो उन्हें plugin के रूप में पैकेज करें। साफ़ install(app, options) signature के साथ npm पर प्रकाशित करना पुनः उपयोग योग्य functionality उपलब्ध कराने का Vue-संगत तरीका है।

त्वरित जाँच

Plugin install करने के लिए Vue app instance पर कौन-सा method कॉल करते हैं?

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

पुनरावलोकन: Vue Plugins

Plugin = install(app, options) वाला object। app.use(plugin, options) के माध्यम से install करें। Global components और directives पंजीकृत करने, मान provide करने और libraries को कॉन्फ़िगर करने के लिए इनका उपयोग करें। Pinia, Vue Router और i18n सभी plugins हैं। $ prefix वाली properties के लिए ComponentCustomProperties को augment करें। install को idempotent रखें।

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

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

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

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

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

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

क्या “प्लगइन सिस्टम: app.use()” पाठ निःशुल्क है?

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

“प्लगइन सिस्टम: app.use()” में मैं क्या सीखूँगा?

install मेथड वाले ऑब्जेक्ट के रूप में Vue प्लगइन बनाएँ, वैश्विक कंपोनेंट और डायरेक्टिव पंजीकृत करें, और पूरे ऐप्लिकेशन को मान प्रदान करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“प्लगइन सिस्टम: app.use()” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

निर्भरता इंजेक्शन के लिए provide() और inject()
असिंक्रोनस कंपोनेंट और Suspense
कस्टम डायरेक्टिव
प्लगइन सिस्टम: app.use()

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