Refactorización de Importaciones en Vue.js con Plugins

Nuestro proyecto va creciendo, poco a poco, con librerías, configuraciones y demás contenido.
El fichero de arranque main.js está haciéndose un poco difícil de manejar debido a todo el contenido que le estamos metiendo.

Una buena idea puede ser llevarse todo el código de librerías de terceros a una carpeta externa. Esta carpeta ya la tenemos creada y se llama /plugins. Vamos a meter ahí el código de Bootstrap-Vue y de FontAwesome. Luego lo importaremos en el main.js y así quedará mas limpio y legible nuestro código.

Empezamos creando el fichero BootstrapVue.js dentro de /plugins, y le damos el siguiente contenido:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Tal y como dice la documentación, importamos BootstrapVue, nos traemos el CSS y después hacemos 'uso' de BootstrapVue desde Vue.

Hacemos lo mismo con FontAwesome, creamos el fichero fontAwesome.js dentro de /plugins y movemos todo el contenido que había en main.js a este fichero:

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSkull, faCrown, faDungeon, faHatWizard, faHammer, faGem } from '@fortawesome/free-solid-svg-icons'
import { faVuejs, faBootstrap, faFontAwesome, faGithub, faBattleNet } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
 faSkull,
 faCrown,
 faDungeon,
 faHatWizard,
 faHammer,
 faGem,
 faVuejs,
 faBootstrap,
 faFontAwesome,
 faGithub,
 faBattleNet
)

// Esta es la forma de registrar un componente global con Vue
// El primer parámetro es cómo queremos que se use/llame nuestro componente desde el HTML
// El segundo parámetro es la referencia al componente (que acabamos de importar)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Tu carpeta de /plugins se vería así:

📂 /plugins
   ├── bootstrapVue.js
   └── fontAwesome.js

Lo que hemos hecho es mover el todo el contenido de dichas librerías fuera del main.js y ponerlo en archivos independientes. Ahora queda hacer referencia a estos archivos desde el main.js para que todo siga funcionando tal y como estaba antes. Lo puedes hacer de la siguiente forma:

// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

Ya que estamos en el apartado de refactorizar y estamos tocando el main.js, podemos quitar el console.log('Hola 🌝') que pusimos al principio, que ya no nos sirve para nada.
Tu fichero main.js completo se vería así:

import Vue from 'vue'
// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

import App from './App.vue'
import router from './router'
import store from './store'

// CSS global
import './assets/css/main.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  methods: {
    // Nuestra función
    init () {
      store.dispatch('oauth/getToken')
    }
  },
  // Hook created
  created () {
    this.init()
  },
  render: h => h(App)
}).$mount('#app')

Te habrás dado cuenta de que hemos importado Vue 2 veces, una para el fichero de BootstrapVue.js y otra vez para el de fontAwesome.js. No te preocupes, no vamos a tener código duplicado y nuestra aplicación no va a ser el doble de grande. De esto se encarga Webpack, solo lo incluirá una vez en el bundle final.

¡Fíjate!, ahora nuestro archivo queda más limpio y legible 👏. Hemos agrupado contenido por funcionalidad. A partir de ahora, todas las librerías que vayamos metiendo las podemos dejar dentro de la carpeta /plugins para tener nuestro código más ordenado.