Registering Components Globally in Vue

Hi, I needed a global component in a Vue.js project. Because I didn't want to import that component each time. I know, this isn't the best approach. But, I needed this one.

Talk is cheap, show me your code! Okay, calm down, let me show you :P

First Step

I created a vue component called spinner.vue.

spinner.vue

<template><b-colcols="12 text-center"><i:class="'fa fa-circle-o-notch fa-spin fa-' + size"></i><!-- your other cool stuff --></b-col></template><script>exportdefault{props:{size:{type:String,default:'lg'}}}</script>

Now, I have to register the spinner component globally.

Creating Global Component Container

Actually, I don't have any idea about "container". But, I'll say container :P Because all global components will be here. Anyway, I created a file called globalComponents.js under the root folder (src)

importVuefrom'vue'importspinnerfrom'./views/util/spinner.vue'Vue.component('spinner',()=>import('./views/util/spinner.vue'))

After, I imported globalComponents file from main.js file.

importVuefrom'vue'importBootstrapVuefrom'bootstrap-vue'importstorefrom'@/store/store'importAppfrom'./App'importrouterfrom'./router'import'@/globalComponents'

That's all :)

Now, I can use the spinner component in every component.

I hope this will help you. Thanks for reading :)