I'am a newbie to Vue.
I want to put whole page to component besides header and footer
Vue.component('main-block', {template: `
<section id="first-block">...</section>
<section id="second-block">...</section>
<section id="third-block">...</section>`})
When I write <main-page></main-page> inside #app block, it shows only the first section. Why?
Following the documentation: A-Single-Root-Element
You can't have more than one root element in your component.
every component must have a single root element
Which means that you have to wrap your template in a root element, ex. a div element
For instance:
Vue.component('main-block', {template: `
<div>
<section id="first-block">...</section>
<section id="second-block">...</section>
<section id="third-block">...</section>
</div>`})