← Back
vue

Vue component aliases

I want to rename a component that is ubiquitously used in our application. To make things easier I'd like to keep the old component as an alias.

First try #

Let's say you have a file src/components/MyOldComponent.vue:

export default {
  name: 'MyOldComponent' 
  ...
}

And you want to rename to src/components/MyNewComponent.vue. What I tried: rename the vue file and add a src/components/MyOldComponent.js with:

export * from './MyNewComponent.js'

But unfortunately doesn't work:

export 'default' (imported as 'MyOldComponent') was not found in '@/components/src/MyNewComponent' (module has no exports)

I don't know why it works

The solution #

I've changed the above code to this:

import MyNewComponent from './MyNewComponent'

const MyOldComponent = MyNewComponent
export default  MyOldComponent

And everything worked again.

What happens with the name? #

Okey, in the new component I've changed the name field to match the new name. Is this an issue? It looks like it's not: https://forum.vuejs.org/t/why-we-need-to-name-vue-component/30909/2