How to use global components in VueJs

Components are the piece of legos that you can use to structure your Vue app, you can have a parent component who has a lot of child components, as we can see as is shown below:

<template>
  <div> 
     <MyFirstChild />
     <MySecondChild />
  <div> 

</template>

note: I assume you have created a project with the Vue CLI otherwise I think this might not work, specially if is a Vue project made it from scratch with the basic configuration.

but what if you want to shared the same child components in many components? In order to achieve this, you have to import and register your component in the script section of each parent component, like this:

<script>
import MyFirstChild from '@/components/MyFirstChild'
import MySecondChild from '@/components/MySecondChild'
export default {
   components: {
       MyFirstChild,
       MySecondChild,
 }
}
</script>

with this we are registering each component locally and this is pretty repeatedly, right?
In order to avoid this, we can register MyFirstChild and MySecondChild as global components that you will use them in many components of your app.

to do this, go to your src/main.js file, here the vue instance was set up, import the components and register them as follows:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import MyFirstChild from '@/components/MyFirstChild'
import MySecondChild from '@/components/MySecondChild'

Vue.component('MyFirstChild ',MyFirstChild )
Vue.component('MySecondChild',MySecondChild)

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

with Vue.component we are registering a component to be used in many other components through your app. The first argument is the name of the component and the second is the component itself. Now both components are global and we can used them in other components without importing and registering them locally in each parent component!

But what happens if we have many components and we need to register them as they were global? well we can programmatically register each components that starst with the word My. For example MyCustomButton.vue, MyCustomCard.vue and in general every component that has the following pattern My**.vue

note: you need to install lodash, which is a popular javascript library with a lot of useful functions: npm install lodash --save

now we can add the following in your src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'


const requireComponent = require.context(
  // The relative path of the components folder
  './components',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match component filenames who starts with "My"
  /My[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Here we are using require.context to search every component in the src/components directory that start with My and then using some functions from lodash we create a custom name for the component in the pascalCase format

thats all, leave a comment, let me know if one part was unclear, also this is the first time I write a tutorial and in english, which is not my native language XD