I have a folder like this.
VueTree components Classic.vue Modern.vue index.js
Classic and Modern are simple components with template
, export default {}
and a style
.
I am calling both inside index.js
as:
import Classic from './components/Classic.vue' import Modern from './components/Modern.vue' const VueTree= { Classic , Modern } export default VueTree
So, when I import this module as:
import {Classic , Modern } from '../../modules/VueTree/index.js'
I get this error
Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.
I have name: "Classic"
inside my components and I am including the in the current file using components: { Classic },
but I get the same error.
It only works if I export only one component as:
import Classic from './components/Classic.vue' import Modern from './components/Modern.vue' export default Classic
this will work and include the classic, but I can’t export both of them like seen in this example https://github.com/greyby/vue-spinner/blob/master/src/index.js
Advertisement
Answer
You need to use export
for named exports, not export default
:
import Classic from './components/Classic.vue' import Modern from './components/Modern.vue' export { Classic , Modern }
See: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export