Vue Academy · Lección

Arquitectura de plugins y app.use()

Objeto de plugin { install(app, options) }, acceso a app.component, app.directive y app.provide

Lección 1 de 413 pasos

Arquitectura de plugins y app.use() es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Qué es un plugin de Vue

Un plugin de Vue es código reutilizable que añade funcionalidad a nivel de aplicación: componentes globales, directivas, servicios inyectados o configuración. Algunos ejemplos son Vue Router, Pinia y las bibliotecas de i18n.

Registra un plugin una sola vez con app.use(plugin).

El contrato de install

Un plugin es un objeto con un método install(app, options) o una función que se utiliza directamente como install. Vue lo llama con la instancia de la aplicación y las opciones que proporcione.

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

Registro de componentes globales

Dentro de install, use app.component(name, definition) para registrar un componente disponible en todas las plantillas sin necesidad de importarlo.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

Registro de directivas globales

Use app.directive(name, definition) para registrar globalmente una directiva personalizada, como v-focus o v-tooltip.

const focusPlugin = {
  install(app) {
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
  }
}

// usage in any template: <input v-focus />

Proporcionar servicios inyectables

app.provide(key, value) expone un valor que cualquier componente descendiente puede leer con inject(key). Esta es la forma moderna de compartir servicios, como un cliente de API o la configuración, sin utilizar variables globales.

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

Consumir el servicio proporcionado

Cualquier componente puede usar inject para leer lo que el plugin haya proporcionado. Para mayor seguridad, prefiera una clave de inyección tipada (un Symbol), aunque las claves de texto también funcionan.

<script setup>
import { inject } from 'vue'

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

Pasar opciones a un plugin

El segundo argumento de app.use se reenvía como el parámetro options de install. Úselo para configurar el comportamiento en el momento del registro.

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

Los plugins se ejecutan antes de mount

Todas las llamadas a app.use se realizan antes de app.mount. Cuando llega el momento de montar la aplicación, todos los componentes globales, las directivas y los valores proporcionados ya están registrados, por lo que la primera renderización puede acceder a ellos.

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

Instalación idempotente

Vue evita instalar el mismo plugin dos veces en una aplicación: la segunda llamada a app.use con un plugin idéntico se ignora. Aun así, diseñe install de forma segura y evite efectos secundarios fuera de la instancia de la aplicación.

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

Un plugin mínimo completo

En conjunto, un plugin puede registrar un componente, una directiva y proporcionar un servicio, todo ello en un único método install.

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

Plugin frente a composable

Use un plugin para la configuración de toda la aplicación que se ejecuta una sola vez, como registrar componentes globales o proporcionar un servicio singleton. Use un composable para la lógica con estado reutilizable que consume cada componente. Los plugins suelen configurar aquello que los composables leen posteriormente mediante inject.

Comprobación rápida

Compruebe su comprensión de la arquitectura de plugins.

Responde en la lección interactiva

Resumen

Ha aprendido sobre la arquitectura de plugins:

Un plugin expone install(app, options) o es una función
app.component y app.directive registran elementos globales
app.provide expone servicios inyectables que se leen mediante inject
app.use(plugin, options) lo registra antes de mount
La instalación es idempotente: una segunda instalación se ignora

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Arquitectura de plugins y app.use()» es gratis?

Sí — el texto completo de «Arquitectura de plugins y 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Arquitectura de plugins y app.use()»?

Objeto de plugin { install(app, options) }, acceso a app.component, app.directive y app.provide Practicas Vue 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 Vue Academy?

No se requiere experiencia previa. Vue 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 1 de 4.

¿Cuánto tiempo toma la lección «Arquitectura de plugins y 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 Vue Academy?

Sí. Cada lección de Vue 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

Arquitectura de plugins y app.use()
Propiedades globales y provide/inject en plugins
Ejemplo de plugin de notificaciones y toasts
Publicación y tipado de plugins de Vue

← Volver a Vue Academy