Vue Academy · Lección

Desarrollo de plugins

Cree plugins de Vue instalables.

Desarrollo de plugins es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. 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 3 lecciones en total.

¿Qué es un plugin?

Un plugin encapsula funcionalidades a nivel de aplicación que puede instalar con una sola llamada: componentes globales, directivas, propiedades o integraciones de terceros. Los plugins son la forma en que bibliotecas como Vue Router y Pinia se integran en su aplicación.

La función install

Un plugin es un objeto con un método install (o simplemente una función). Vue lo llama con la instancia de la aplicación y las opciones que proporcione.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

Instalar un plugin

Registre un plugin mediante app.use, pasando opcionalmente un objeto de opciones. Vue ejecuta la función de instalación una sola vez.

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

Registrar componentes globales

Dentro de install, registre componentes globalmente para que cualquier parte de la aplicación pueda utilizarlos sin importarlos.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

Registrar directivas globales

Un plugin también puede registrar directivas globalmente y reunir comportamientos relacionados del DOM en un único paquete instalable.

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

Proporcionar propiedades globales

Use app.config.globalProperties para añadir una propiedad disponible en todas las instancias de componentes, algo práctico para utilidades como un formateador o un cliente HTTP.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

Usar provide con Composition API

Para facilitar la compatibilidad con Composition API, use app.provide en su plugin para que los componentes puedan inject el valor en setup.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

Pasar opciones

El argumento options permite a los usuarios configurar su plugin. Léalo dentro de install para personalizar el comportamiento.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

Un plugin basado en una función

Un plugin puede ser una función simple en lugar de un objeto con install; Vue trata la propia función como el instalador.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

Un ejemplo completo de plugin

Un plugin real suele combinar varios de estos elementos: registrar un componente, una directiva y una propiedad global en una sola función install.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

Cuándo crear un plugin

Recurra a un plugin cuando la funcionalidad sea realmente global para toda la aplicación: un kit de interfaz, una capa HTTP, i18n o analíticas. Para la lógica local de una funcionalidad, un composable suele ser la opción más adecuada y ligera.

Comprobación rápida

Compruebe sus conocimientos sobre los plugins.

Recapitulación

Un plugin expone una función install(app, options) y se registra con app.use. Dentro de install puede registrar componentes y directivas globales, añadir propiedades globales mediante config.globalProperties y usar provide para proporcionar valores que se inyectarán. Use plugins para funcionalidades globales de la aplicación y composables para la lógica local. A continuación, estructurará un proyecto escalable.

Preguntas frecuentes

¿La lección «Desarrollo de plugins» es gratis?

Sí — el texto completo de «Desarrollo de plugins» 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 3 lecciones en total.

¿Qué aprenderé en «Desarrollo de plugins»?

Cree plugins de Vue instalables. 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 2 de 3.

¿Cuánto tiempo toma la lección «Desarrollo de plugins»?

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

← Volver a Vue Academy