Cómo crear complementos personalizados de Vue.js

Introducción

Los complementos de Vue.js son una forma sencilla y poderosa de agregar funciones globales a su aplicación. Tienen una variedad de usos, desde distribuir componentes para toda la aplicación hasta agregar capacidades adicionales, como enrutamiento y almacenamiento de datos inmutables a su aplicación.

En este artículo, creará un ejemplo de complemento personalizado de Vue.

Prerrequisitos

Para seguir este artículo necesitarás:

• Algunos conocimientos sobre la configuración de un proyecto Vue.js.

Este tutorial fue verificado con Node v16.5.0, npmv6.14.8 y vuev2.6.11.

Creando tu primer complemento

Como introducción al mundo de los complementos de Vue, vamos a escribir un complemento que escribe en la consola cada vez que se monta un componente en el DOM.

mi-vue-plugin.js

const MyPlugin = {  // eslint-disable-next-line no-unused-vars  install(Vue, options) {    Vue.mixin({      mounted() {        console.log('Mounted!');      }    });  }};export default MyPlugin;

Un complemento de Vue es un objeto con un installmétodo que toma dos parámetros:

• El Vueobjeto global
• y un objeto que contiene información definida por el usuariooptions

Vue.mixin()Se utiliza para inyectar funcionalidad en todos los componentes. En este caso, el mounted()método se ejecuta cuando el componente se agrega al DOM.

Ahora tu complemento se puede usar en una aplicación Vue importándolo y llamándolo Vue.use(MyPlugin):

principal.js

import Vue from 'vue'import MyPlugin from './my-vue-plugin.js'import App from './App.vue'Vue.use(MyPlugin)new Vue({  el: '#app',  render: h = h(App)});

Quizás te preguntes por qué no puedo hacer esto simplemente llamando Vue.mixin()a main.js? La razón es que, dado que estamos agregando una funcionalidad global a Vue que no modifica la aplicación directamente, casi siempre es mejor dividirla en un módulo separado que se pueda agregar o quitar a voluntad. También hace que los complementos sean increíblemente fáciles de distribuir.

Añadiendo capacidades

Cómo agregar propiedades o ganchos del ciclo de vida de los componentes

Como se muestra arriba en el ejemplo “Su primer complemento”, puede agregar ganchos de ciclo de vida y realizar otras modificaciones a los componentes de Vue usando un Mixin .

Nota: Los mixins son un tema bastante avanzado que queda fuera del alcance de este artículo. Por ahora, una explicación suficiente es que son, en esencia, definiciones de componentes que se combinan (“se mezclan”) con otros componentes.

mi-vue-plugin.js

const MyPlugin = {  // eslint-disable-next-line no-unused-vars  install(Vue, options) {    Vue.mixin({      mounted() {        console.log('Mounted!');      }    });  }};export default MyPlugin;

Instalación de directivas y componentes para toda la aplicación

Si desea empaquetar componentes o directivas para distribuirlos como complemento, puede escribir algo como esto:

mi-vue-plugin.js

import MyComponent from './components/MyComponent.vue'import MyDirective from './directives/MyDirective.js'const MyPlugin {  // eslint-disable-next-line no-unused-vars  install(Vue, options) {    Vue.component(MyComponent.name, MyComponent)    Vue.directive(MyDirective.name, MyDirective)  }};export default MyPlugin;

Modificación del objeto Vue global

Puedes modificar el Vueobjeto global desde un complemento:

mi-vue-plugin.js

const MyPlugin {  // eslint-disable-next-line no-unused-vars  install(Vue, options) {    Vue.myAddedMethod = function() {      return Vue.myAddedProperty    }  }};export default MyPlugin;

Modificación de instancias de Vue

Para agregar una propiedad o método directamente a las instancias de componentes sin ningún mecanismo de inyección, puede modificarlo Vue prototypecomo se muestra aquí:

mi-vue-plugin.js

const MyPlugin {  // eslint-disable-next-line no-unused-vars  install(Vue, options) {    Vue.prototype.$myAddedProperty = 'Example Property'    Vue.prototype.$myAddedMethod = function() {      return this.$myAddedProperty    }  }};export default MyPlugin;

Esas propiedades ahora se agregarán a todos los componentes e instancias de Vue.

Nota: Dentro de la comunidad de Vue, generalmente se espera que los complementos que modifican el prototipo de Vue antepongan un signo de dólar ( $) a cualquier propiedad agregada.

Admite instalación automática

Para las personas que usan su complemento fuera de un sistema de módulos, a menudo se espera que si su complemento se incluye después de la etiqueta de script de Vue, se instale automáticamente sin la necesidad de llamar a Vue.use(). Puede implementar esto agregando estas líneas al final de my-vue-plugin.js:

if (typeof window !== 'undefined'  window.Vue) {  window.Vue.use(MyPlugin)}

Instalación automática si Vuese ha agregado al ámbito global.

Distribuyendo su complemento

Una vez que hayas escrito un complemento, puedes distribuirlo a la comunidad. Si aún no estás familiarizado con el proceso, aquí tienes algunos pasos habituales para ayudar a que la gente descubra tu complemento:

1. Publica el código fuente y los archivos distribuibles en npmGitHub . ¡Asegúrate de elegir una licencia adecuada para tu código!
2. Abra una solicitud de extracción al repositorio oficial de descubrimiento de cosas interesantes de Vue: awesome-vue. Mucha gente viene aquí para buscar complementos.
3. (Opcional) Publique sobre ello en el foro de Vue , el canal de Vue Gitter y en Twitter con el hashtag #vuejs.

¡Vaya y haga algunos complementos!

Conclusión

En este artículo creaste un ejemplo de complemento personalizado de Vue.

Continúe su aprendizaje con la documentación de Vue para complementos y mixins .