Sistema de plugins: app.use()
Cree un plugin de Vue como un objeto con un método install, registre componentes y directivas globales y proporcione valores a toda la aplicación.
Sistema de plugins: app.use() es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es un plugin de Vue?
Un plugin es una funcionalidad reutilizable que se instala en una aplicación Vue: componentes globales, directivas, valores proporcionados y helpers de estilo prototype (router, i18n, pinia). Los plugins son la forma en que las bibliotecas se integran con Vue.
Estructura de un plugin
Un plugin es un objeto con un método install(app, options) o una función que actúa como método de instalación.
// MyPlugin.ts
export default {
install(app, options) {
// Configure things here
}
};Instalar un plugin
Llame a app.use(plugin, options) en la instancia de la aplicación 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 de uso de plugin: componentes globales
Registre globalmente muchos componentes pequeños para que los consumidores no tengan que importar cada 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 de uso de plugin: directivas globales
Registre las directivas personalizadas una sola vez para que estén disponibles en toda la aplicación.
export default {
install(app) {
app.directive('focus', { mounted: (el) => el.focus() });
app.directive('click-outside', clickOutsideDirective);
}
};Caso de uso de plugin: provide()
Proporcione valores para toda la aplicación que cualquier componente pueda inyectar; es habitual para clientes de API y configuración.
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 reales: Pinia, Vue Router e i18n
Las principales bibliotecas del ecosistema Vue son 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({ /* ... */ }));Opciones de los plugins
Los plugins aceptan opciones para configurar su comportamiento durante la instalación.
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');
}Ampliación de TypeScript
Para globalProperties o helpers de inyección, amplíe los tipos de Vue para que los consumidores obtengan autocompletado.
// types.d.ts
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$api: ApiClient;
}
}
// In plugin:
install(app) {
app.config.globalProperties.$api = new ApiClient();
}globalProperties — Patrón antiguo
app.config.globalProperties.$foo expone un valor como this.$foo en componentes y plantillas de Options API. La Composition API prefiere inject().
Instalación idempotente
No produzca un error si se instala dos veces: compruebe una marca o use claves de provide basadas en Symbols, que se deduplican de forma natural.
Escribir su propio plugin
Si varias aplicaciones reutilizan una configuración (un wrapper de autenticación, una configuración de telemetría o tokens de diseño), agrúpelas en un plugin. Publicarlo en npm con una firma limpia install(app, options) es la forma idiomática de Vue de distribuir funcionalidad reutilizable.
Comprobación rápida
¿Qué método debe llamar en una instancia de aplicación Vue para instalar un plugin?
Resumen: plugins de Vue
Plugin = objeto con install(app, options). Se instala mediante app.use(plugin, options). Se usa para registrar componentes globales, directivas, valores proporcionados y configurar bibliotecas. Pinia, Vue Router e i18n son plugins. Amplíe ComponentCustomProperties para las propiedades con prefijo $. Mantenga install idempotente.
Preguntas frecuentes
¿La lección «Sistema de plugins: app.use()» es gratis?
Sí — el texto completo de «Sistema de plugins: app.use()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Sistema de plugins: app.use()»?
Cree un plugin de Vue como un objeto con un método install, registre componentes y directivas globales y proporcione valores a toda la aplicación. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Sistema de plugins: app.use()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- provide() e inject() para la inyección de dependencias
- Componentes asíncronos y Suspense
- Directivas personalizadas
- Sistema de plugins: app.use()