0Pricing
Frontend Academy · Lezione

Sistema di plugin: app.use()

Creare un plugin Vue come oggetto con un metodo install, registrare componenti e direttive globali e fornire valori all’intera applicazione

Sistema di plugin: app.use() è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Cos'è un plugin Vue?

Un plugin è una funzionalità riutilizzabile che si installa in un'app Vue: componenti globali, direttive, valori forniti tramite provide, helper in stile prototype (router, i18n, pinia). I plugin sono il modo in cui le librerie si integrano con Vue.

Struttura di un plugin

Un plugin è un oggetto con un metodo install(app, options) oppure una funzione che svolge il ruolo del metodo install.

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

Installare un plugin

Chiami app.use(plugin, options) sull'istanza dell'app Vue.

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');

Caso d'uso di un plugin: componenti globali

Registri globalmente molti componenti piccoli, così chi li utilizza non deve importarli uno per uno.

// 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);

Caso d'uso di un plugin: direttive globali

Registri una volta sola le direttive personalizzate, rendendole disponibili in tutta l'app.

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

Caso d'uso di un plugin: provide()

Fornisca valori a livello di app che qualsiasi componente può iniettare: è una soluzione comune per client API e configurazione.

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)!;

Plugin reali: Pinia, Vue Router, i18n

Le principali librerie dell'ecosistema Vue sono plugin.

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({ /* ... */ }));

Opzioni dei plugin

I plugin accettano opzioni per configurarne il comportamento al momento dell'installazione.

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');
}

Estensione dei tipi TypeScript

Per globalProperties o gli helper di injection, estenda i tipi di Vue in modo che chi utilizza il plugin disponga del completamento automatico.

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

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

globalProperties — Pattern precedente

app.config.globalProperties.$foo espone un valore come this.$foo nei componenti e nei template che utilizzano l'Options API. La Composition API predilige inject().

Installazione idempotente

Non generi un errore se il plugin viene installato due volte: controlli un flag oppure utilizzi chiavi provide basate su Symbol, che evitano naturalmente i duplicati.

Scrivere il proprio plugin

Se più app riutilizzano una configurazione (wrapper di autenticazione, configurazione della telemetria, design token), la raggruppi in un plugin. Pubblicarlo su npm con una firma pulita install(app, options) è il modo idiomatico di Vue per distribuire funzionalità riutilizzabili.

Verifica rapida

Quale metodo si chiama sull'istanza di un'app Vue per installare un plugin?

Riepilogo: plugin Vue

Plugin = oggetto con install(app, options). Installazione tramite app.use(plugin, options). Utilizzi i plugin per registrare componenti globali e direttive, fornire valori e configurare librerie. Pinia, Vue Router e i18n sono tutti plugin. Estenda ComponentCustomProperties per le proprietà con prefisso $. Mantenga install idempotente.

Domande Frequenti

La lezione «Sistema di plugin: app.use()» è gratuita?

Sì — il testo completo di «Sistema di plugin: app.use()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Sistema di plugin: app.use()»?

Creare un plugin Vue come oggetto con un metodo install, registrare componenti e direttive globali e fornire valori all’intera applicazione Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Sistema di plugin: app.use()»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. provide() e inject() per la dependency injection
  2. Componenti asincroni e Suspense
  3. Direttive personalizzate
  4. Sistema di plugin: app.use()
← Torna a Frontend Academy