Unable to import/export vuejs components

5
votes

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

4
javascriptnpmvue.jsvuejs2vue-component

4 Answers

5
votes

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

2
votes

The setup you have is fine.

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree = {
  Classic,
  Modern
}
export VueTree

The problem is your components. I can see you're using a Treeview so, it is a recursive component. You should be extra careful about how you create them because it can create a infinite loop.

Take a look at my github for a example on how your VueTree should work.

Ps: Don't forget to add a key and a name to a recursive component.

Components can recursively invoke themselves in their own template. However, they can only do so with the name option. Vue Docs.

If what i said does not work. Feel free to send me a github link to the issue and i will be happy to help.

1
votes

Another way

index.js

export { default as Classic } from './components/Classic.vue'
export { default as Modern } from './components/Modern.vue'

Modern.vue

import { Classic } from './components/index';

export default {
   components: { Classic }
}

NOTICE: Chlidren component must by exported just BEFORE parent component in index.js.

0
votes

I think it's better to do this 🤔

index.js / index.ts

import ParentName from './ParentName.vue'
import ChildName from './ChildName.vue'

export default ParentName

export { ChildName }

ComponentName.vue

import ParentName, { ChildName } from '~/components/abstractName'

export default {
   components: {
       ParentName,
       ChildName
   }
}