Component inside vue component?

Question

Vue.js

I have a Main component. It has a Sidebar component. For each page, the contents of the Sidebar should be different, so I created separate components for each to place them on the right pages.
In the main component, I register them:

import MiddleBar from '@/components/Main/MiddleBar/MiddleBar'
import Streams from '@/components/Main/MiddleBar/Elements/Streams'

export default {
  components: {
    MiddleBar,
    Streams
  }
}

And I try to insert them (Pug syntax): Nothing works. I can't figure out what's wrong. I didn't find anything in the documentation about component nesting. :( Especially on pug.
| <MiddleBar> <Streams></Streams> </MiddleBar>

Answer 1

https://en.vuejs.org/v2/guide/components.html#Spread...

Answer 2

you need to leave in the main component like this

import MiddleBar from '@/components/Main/MiddleBar/MiddleBar'

export default {
  components: {
    MiddleBar
  }
}

and in the MiddleBar component do like this

import Streams from '@/components/Main/MiddleBar/Elements/Streams'

export default {
  components: {
    Streams
  }
}

and so you can invest indefinitely