[Vuejs]-How do you import components having same name but in different folder in app.js?

by

0👍

You should just allocate the components a new name during import as follows:

Vue.component('header-one', require('./components/Header.vue').default);
Vue.component('header-two', require('./components/site1/Header.vue').default);
Vue.component('header-three', require('./components/site2/Header.vue').default);

Better, to improve performance of your app, you can lazy load your components as follows:

Vue.component('header-one', () => import('./components/Header.vue'));
Vue.component('header-two', () => import('./components/site1/Header.vue'));
Vue.component('header-three', () => import('./components/site2/Header.vue'));

Leave a comment