En aplicaciones medianas/grandes es más que posible que podamos tener componentes globales que no queremos estar llamando en cada sitio donde los tengamos que utilizar, un Input, un Button, un Alert etcétera. Además, es más que probable que tampoco queramos cargarlos todos en un único sitio y registrarlos haciendo uso de Vue.component ya que podemos quedarnos con un archivo realmente grande.
Para solucionar este problema, desde la versión 3 de Vue CLI podemos utilizar require.context y cargar todos nuestros componentes base con pocas líneas de código de forma óptima, sólo debemos utilizar el siguiente código en nuestro archivo main.js.
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// mapeamos el directorio src/components
'./components',
// Si debe buscar o no en subcarpetas
false,
// buscamos archivos que empiezan con Base y tienen la extensión .vue o .js
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(
camelCase(
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// Registramos el componente de forma global
Vue.component(
componentName,
componentConfig.default || componentConfig
)
})
Puedes encontrar más información al respecto en la documentación de Vue.
Sigue aprendiendo
Rutas de aprendizaje
