Vue doesn’t show whole component

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?

Answer

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>`})