<div id="app" v-cloak>
  <div class="container">
    <card class="item left">
      <p>We can easily fill this sidemenu from the components on the right</p>
      <portal-target name="sidebar"></portal-target>      
    </card>

    <card class="item right">
      <span><a href="#" @click.preven="show = 'A'">Show Component A</a></span> | 
      <span><a href="#" @click.preven="show = 'B'">Show component B</a></span>
      <component-a v-if="show === 'A'"></component-a>
      <component-b v-if="show === 'B'"></component-b>
    </card>
  </div>
</div>

<template id="A">
  <div>
    <p>This is the content for Componen A that should be displayed here, on the right side</p>
    <portal to="sidebar">
      <ul>
        <li>and this list</li>
        <li>came from Component A</li>
        <li>on the right side</li>
      </ul>
    </portal>
  </div>
</template>

<template id ="B">
  <div>
    <p>The content for Componen B will be displayed on the here as well...</p>
    <portal to="sidebar">
      <div>
        ...and Component B can send something different to the sidebar!
      </div>
    </portal>
  </div>
</template>
#app {
  height: 100 vh;
}
.container {
  display: flex;
  padding: 20px;
}
.item {
  background-color: white;
  border: 1px solid #DDD;
  border-radius: 3px;
  // flex: 1 1 50%;
  padding: 20px;
}

.item.left {
  flex: 0 1 250px;
}

.item.right {
  flex: 1 0 200px;
  margin-left: 20px;
}

.red {
  color: red;
}

[v-cloak] {
  display: none;
}
View Compiled
/* this component is only used for illustration purposes */
Vue.component('card', {
  template: `
  <div class="item left">
    <slot />
  </div>
  `,
})

Vue.component('component-a', {
  template: '#A',
})
Vue.component('component-b', {
  template: '#B',
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    show: 'A',
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js
  2. https://unpkg.com/portal-vue