[Vuejs]-Nested components in app.vue not pulling content through

I fixed it by moving LeftSide and RightSide into the Parent.vue, instead of having the LeftSide and RightSide inside the Parent in the app.vue.

As you already figured out yourself you should move those components into the Parent component.

But there are situations where you want to have a reusable component as decorator (something like a panel) and place elements inside of it. In this case you are looking for slots. Using slot you can indeed write this:

<Parent>
  <LeftSide />
  <RightSide />
</Parent>

And in the Parent component you would need to define where those components have to be placed using <slot></slot>

<template>
<div class="parent">
    <slot></slot>
</div>
</template>


<script>
</script>


<style>
.parent
{
  display: flex;
}
</style>