Question: I am refactoring some code in my app and turns out,the below logic it is repeated in many many components.

```
import component1 from '...'
import component2 from '...'
import component3 from '...'
//...many others

export default {
    //other data
  components: {
    component1,
    component2,
    component3
    //...
  }
}

```

Does exists a shorter approach in order to clean my code?
Thanks for your time

Answer: 
**Below are 3 ways**.I prefer method 3 by the way.

> 
> **Method 1**
> 
> 
> 

**Create a `js` file in my case `dynamic_imports.js`:**

```
export default function (config) {
    let registered_components = {}
    for (let component of config.components) {
        registered_components[component.name] = () => System.import(`../${config.path}/${component.file_name}.vue`)
    }
    return registered_components
}

```

**In the component in which you have many component imports and registrations**

```
import dynamic_import from '@/services/dynamic_imports' //importing the above file
let components = dynamic_import({
    path: 'components/servers',
    components: [
        { name: 'server-one', file_name: 'serverOne' },
        { name: 'server-two', file_name: 'serverTwo' },
    ]
})

export default {
//...other code
    components: components
}

```

As a result you will import and register your components with "clean code".
But **note** that this worked for me,maybe it has to modified a lit bit to fit your needs,to understand:

The property `path` means that will look at this path for the names specified in `file_name`.The `name` property is the name you register the component

> 
> **Method 2**
>  If you don't like the above look below to another way:
> 
> 
> 

```
function import_component(cmp_name){
    return System.import(`@/components/${cmp_name}.vue`); 
}

export default{
    components: {
        'component1': () => import_component('componentOne'),
        'component2': () => import_component('componentTwo'),
        'component3': () => import_component('componentThree')
    }
}

```

> 
> **Method 3**
>  If again you are saying: This is not a cleaner way,take a look below but keep in mind that if you are working in team and skills differ,then some programmers will be a little bit confused.
> 
> 
> 

**dynamic\_imports.js**

```
export default function ({path, file_names, component_names}) {
    let registered_components = {}
    for (let [index, file_name] of file_names.entries()) {
        registered_components[component_names[index]] = () => System.import(`../${path}/${file_name}.vue`)
    }
    return registered_components
}

```

**In your component**

```
import dynamic_import from '@/services/dynamic_imports'

let components = dynamic_import({
    path: 'components/servers',
    file_names: ['serverOne', 'serverTwo'],
    component_names: ['server-one', 'server-two']
})

export default {
    components: components
}

```
You can automatically register such repeated base components globally using the pattern described in the official docs

<https://v2.vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components>

[Chris Fritz](https://twitter.com/chrisvfritz?lang=en) also talks about this pattern in his [awesome video](https://www.youtube.com/watch?v=7lpemgMhi0k) where he mentions 7 secret patterns for cleaner code and productivity boost while working with [Vue.js](https://vuejs.org/)

The disadvantage of this approach, however, is that the components that you autoregister this way always end up in the main bundle and therefore cannot be lazy loaded/code-splitted. So make sure you do this only for the base components that are very generic.

---