Unable to import/export vuejs components

Question

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

Answer 1

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