Set the main layout for the "App" component.

[Eric-Durr]

I've made my research and on the frontend is use to follow a layout component division where the header and the footer shouldnt change on the same layout. -the view is contained and changed on it

[delirial]

i understand that this issue is for create header and footer components for later reuse

[Eric-Durr]

the layout shoold look like:

<template>
  <div id="app">
    <section class="header">this is a header</section>
    <hr />
    <section class="content">
      <router-view />
    </section>
    <hr />
    <section class="footer">
      <footer-var></footer-var>
    </section>
  </div>
</template>

where the only part should change is the "content section" in order to domain the router view as the showable component

[delirial]

Ok , yes, i encorauge you to quit the dependency of router-view, creating a component like <Content props/> with the props to change the contents of the component

[pabloderivia]

Ok , yes, i encorauge you to quit the dependency of router-view, creating a component like <Content props/> with the props to change the contents of the component

Yes, maybe it would be more attached with Vue's philosofy

[Eric-Durr]

idk if you are catching the idea. after theory class ill show you what i mean

[pabloderivia]

In addition, the header could change depend on the page (for example, the Main Page has a newsbar, unlike the portal one

[delirial]

I understand that, for optimizations approachs this idea is the same that use big CMS like wordpress or drupal, allow render less content and separate the concern in code, also you can add semantic properties on dom hierarchy and improve the SEO on page.