Why i have to use ".default" when require some Vue component to work?

For example, i have a component and i use this code to render the component:

Vue.component('sidebar', require('./components/Sidebar').default);

but if i remove the ".default" like that:

Vue.component('sidebar', require('./components/Sidebar'));

It just returns a error:

"Failed to mount component: template or render function not defined"

So, what this ".default" property really does?

Here is my component:

<template>
	<div>
		Hello world
	</div>
</template>

Note: It's just curiosity, i havent any issue here, i just would like to know why i have to put ".default" at the end of the require function.

ahmeddabak

5 years ago

Best Answer

Level 47

When using ES6 imports export default Sidebar, the exported module is of the format {"default" : Sidebar}.

The import statement import * from Sidebar handles this assignment for you, however, you have to do the require("./components/Sidebar").default conversion yourself.

If you want to avoid that, use module.exports instead of export default.

Please or to participate in this conversation.