Plug-insysteem: app.use()
Maak een Vue-plug-in als object met een install-methode, registreer globale componenten en directives en geef waarden door aan de hele applicatie.
Plug-insysteem: app.use() is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat is een Vue-plugin?
Een plugin is herbruikbare functionaliteit die je in een Vue-app installeert: globale componenten, directives, aangeboden waarden en hulpmiddelen in prototypestijl, zoals router, i18n en pinia. Plugins zijn de manier waarop bibliotheken met Vue integreren.
Vorm van een plugin
Een plugin is een object met een install(app, options)-methode — of een functie die als installatiemethode fungeert.
// MyPlugin.ts
export default {
install(app, options) {
// Configure things here
}
};Een plugin installeren
Roep app.use(plugin, options) aan op de instantie van de Vue-app.
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');Gebruikssituatie voor plugins: globale componenten
Registreer veel kleine componenten globaal, zodat gebruikers ze niet allemaal afzonderlijk hoeven te importeren.
// 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);Gebruikssituatie voor plugins: globale directives
Registreer aangepaste directives één keer, zodat ze in de hele app beschikbaar zijn.
export default {
install(app) {
app.directive('focus', { mounted: (el) => el.focus() });
app.directive('click-outside', clickOutsideDirective);
}
};Gebruikssituatie voor plugins: provide()
Bied waarden voor de hele app aan, zodat elke component ze kan injecteren — gebruikelijk voor API-clients en configuratie.
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)!;Praktijkplugins: Pinia, Vue Router, i18n
De belangrijkste bibliotheken in het Vue-ecosysteem zijn 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({ /* ... */ }));Pluginopties
Plugins accepteren opties om hun gedrag tijdens de installatie te configureren.
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-uitbreiding
Breid de typen van Vue uit voor globalProperties of injectiehulpmiddelen, zodat gebruikers automatisch aanvullen krijgen.
// types.d.ts
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$api: ApiClient;
}
}
// In plugin:
install(app) {
app.config.globalProperties.$api = new ApiClient();
}globalProperties — Oud patroon
app.config.globalProperties.$foo stelt een waarde in Options API-componenten en templates beschikbaar als this.$foo. De Composition API geeft de voorkeur aan inject().
Idempotente installatie
Laat de app niet crashen als de plugin twee keer wordt geïnstalleerd — controleer een vlag of gebruik Symbol-gebaseerde provide-sleutels die automatisch ontdubbelen.
Je eigen plugin schrijven
Als meerdere apps dezelfde configuratie hergebruiken, zoals een authenticatiewrapper, telemetrieconfiguratie of ontwerptokens, verpak je die als plugin. Publiceren naar npm met een duidelijke handtekening install(app, options) is de Vue-manier om herbruikbare functionaliteit te verspreiden.
Korte controle
Welke methode roep je aan op een instantie van een Vue-app om een plugin te installeren?
Samenvatting: Vue-plugins
Plugin = object met install(app, options). Installeer via app.use(plugin, options). Gebruik plugins om globale componenten en directives te registreren, waarden aan te bieden en bibliotheken te configureren. Pinia, Vue Router en i18n zijn allemaal plugins. Breid ComponentCustomProperties uit voor eigenschappen met een $-voorvoegsel. Houd install idempotent.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Plug-insysteem: app.use()” gratis?
Ja — de volledige tekst van “Plug-insysteem: app.use()” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Plug-insysteem: app.use()”?
Maak een Vue-plug-in als object met een install-methode, registreer globale componenten en directives en geef waarden door aan de hele applicatie. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Plug-insysteem: app.use()”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- provide() en inject() voor dependency injection
- Asynchrone componenten en Suspense
- Aangepaste directives
- Plug-insysteem: app.use()