Vue.js

# Plugins

Los Plugins son códigos autocontenidos que usualmente agregan funcionalidades de nivel global a Vue. Es o un objeto que expone un método install(), o una function.

No hay un alcance estrictamente definido para un Plugin, pero los escenarios comunes dónde los plugins son útiles incluyen:

  1. Agregar algunos métodos o propiedades globales. Por ejemplo, vue-custom-element (opens new window).

  2. Agregar uno o más recursos globales: directivas/transiciones, etc. (p. ej. vue-touch (opens new window)).

  3. Agregar algunas opciones de componentes mediante mixines globales (p. ej. vue-router (opens new window)).

  4. Agregar algunos métodos globales de instancias mediante adjuntarlos a config.globalProperties.

  5. Una librería que proporciona una API propia, mientras que al mismo tiempo inyecta alguna combinación de lo anterior (e.g. vue-router (opens new window)).

# Escribir un Plugin

Para mejor comprender cómo crear sus propios plugins de Vue.js, crearémos una versión de un plugin muy simplificada que mostra cadenas de caracteres que se han prepadado para i18n.

Cuando este plugin es agregado a la aplicación, el método install será llamado si es un objeto. Si es una función, la misma función será llamado. En ambos casos, recibirá dos parámetros, el objeto app resultante de createApp de Vue, y las opciones pasadas por el usuario.

Empecemos por establecer el objeto de plugin. Es recomendado crearlo en un archivo separado y exportarlo, como mostrado a continuación para mantener la lógica contenida y separada.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // El código del _plugin_ code va aquí
  }
}
1
2
3
4
5
6

Queremos realizar una función para traducir las claves disponibles a la aplicación entera, por lo tanto, exponerémoslo utilizando app.config.globalProperties.

Esta función recibirá una cadena de caracteres key, la que utilizarémos para buscar la cadena de caracteres traducida en las opciones proporcionadas por el usuario.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}
1
2
3
4
5
6
7
8
9
10

Asumimos que nuestros usuarios pasarán un objeto que contenga las claves traducidas en el parámetro options cuando utilicen el plugin. Nuestra función $translate tomará una cadena de caracteres como por ejemplo, greetings.hello, y mirará dentro de la configuración proporcionada por el usuario y retornará el valor traducido, en este caso, Bonjour!

Por ejemplo:

greetings: {
  hello: 'Bonjour!',
}
1
2
3

Los plugins también nos permiten utilizar inject para proporcionar una función o atributo a los usuarios del plugin. Por ejemplo, podemos dejar la aplicación tener acceso al parámetro options para que sea capaz de utilizar el objeto de las traducciones.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

Los usuarios del plugin ahora son capaz de inject['i18n'] en sus componentes y acceder el objeto.

Adicionalmente, debido a que tenemos acceso al objeto app, todas otras capacidades como utilizar mixin y directive son disponibles al plugin. Para aprender más sobre createApp y la instancia de la aplicación, Consulte la documentación de API de la aplicación.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, options)
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // unas lógicas ...
      }
      ...
    })

    app.mixin({
      created() {
        // unas lógicas ...
      }
      ...
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Utilizar un Plugin

Desupés de que una aplicación Vue se haya iniciado con createApp(), puede agregar un plugin a su aplicación mediante llamar el método use().

Utilizarémos el i18nPlugin creado por nosotros en la sección Escribir un Plugin para propósitos de demostración.

El método use() toma dos parámetros. Lo primero es el plugin para instalarse, en este caso es i18nPlugin.

También automáticamente le impide de utilizar el mismo plugin más de una vez, así que llamarlo múltiples veces al mismo plugin solo lo instalará una vez.

El segundo parámetro es opcional, y depiende de cada plugin particular. En el caso de la demostración i18nPlugin, es un objeto con las cadenas de caracteres traducidas.

INFO

Si está utilizando plugins de terceros, como Vuex o Vue Router, simepre revisar la documentación para comprender qué cosa como el parámetro segundo espere recibir el plugin particular.

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

Consulte awesome-vue (opens new window) para una enorme colección de plugins y librerías aportados por la comunidad.

← Vue y Componentes Web →