Skip to content
Advertisement

How to import all global Vue components in single file

I have a pretty big Vuejs app. I had imported all my components in the app.js file globally. It’s working just fine but for a better structure, I want to separate all my component imports in a single other file.
Is it possible?
Here is my app.js file example:

window.Vue = require('vue');
Vue.component('loading', require('./components/global-components/Loading.vue').default);
Vue.component('carousel', require('./components/global-components/Carousel.vue').default);
Vue.component('dropdown', require('./components/global-components/Dropdown.vue').default);
Vue.component('tab', require('./components/global-components/Tab.vue').default);
...
...
...
...
More than 50 components here.

Advertisement

Answer

you can safely make a globalComponents.js

where are you doing yours

Vue.component ('loading', require ('./ components / global-components / Loading.vue'). Default);

and in the main.js or app.js you do

import 'path/to/globalComponents.js'
Advertisement