VueJS left menu list that updates main content panel - vue.js

Question

I have a VueJS application where I have the need to create a component that will have a left menu and a main content like the following image:
Once the view is loaded, on create method I will load left menu json and the items content json. By that time no item is going to be rendered in the main content.
Once the user selects an item from the left menu, the json for the items content is going to be filtered so that the main component renders the squares (each item component that is actually separate component).
My question here is about how many components should I build?
I guess I will have to create a component container that will hold the left menu component and the right component. Then right component will have the header and a v-for element that will render each of the item component. Is that the way to go?
Any advice?

Answer 1

You can create one container component that lays out all three areas using CSS grid. Then you can have a component for each area: left-menu, header-thing, and main-content.
There's a bit of a learning curve with grid layout, but it's immensely useful. Modern browsers support it, but not IE.
new Vue({
el: '#app',
components: {
leftMenu: {
template: '#left-menu-template'
},
mainContent: {
template: '#main-content-template'
},
headerThing: {
template: '<div class="header-thing"><div>one</div><div>two</div></div>'
}
}
});
html,
body {
height: 100%;
}
#app {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
'lm h'
'lm mc'
;
width: 100%;
height: 100%;
}
.header-thing {
background-color: #eef;
grid-area: h;
display: grid;
grid-auto-flow: column;
justify-content: start;
padding: 0.7em;
grid-gap: 1.4em;
}
.left-menu {
background-color: #efe;
grid-area: lm;
padding: 0.7em;
}
.main-content {
background-color: #fee;
grid-area: mc;
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
grid-auto-rows: 1fr;
}
.content-item {
background-color: white;
border: thin solid black;
border-radius: 0.2em;
display: grid;
align-items: center;
justify-items: center;
padding: 2em 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<header-thing></header-thing>
<left-menu></left-menu>
<main-content></main-content>
</div>
<template id="left-menu-template">
<nav class="left-menu">
<div>First item</div>
<div>Second item</div>
</nav>
</template>
<template id="main-content-template">
<div class="main-content">
<div class="content-item">item</div>
<div class="content-item">another</div>
<div class="content-item">another</div>
<div class="content-item">more</div>
<div class="content-item">still more</div>
<div class="content-item">another</div>
</div>
</template>