javascript - Vuejs template inheritance -

how can use template inheritance (like jade has, extends file.jade , blocks same name overwritten)?

i know can composition, components footer , header appear on every single page except 1 or 2 (e.g.login page) must write them on every single component. in app have 2 level navigation , seems painful repeat them on every 1 of child components :(

i know can use jade , inherit jade file within components, seems wrong because have jade , vue files, there other way this?

// component.vue  <template lang="jade">   extends ./standardlayout   block content   router-view </template> 

// standardlayout.vue  <template lang="jade">   div     navbar     div.container       div.spacer       div.row         block content <template> 

what i've settled for, layouts folder filled jade layouts , use them extend components. used vue-cli webpack template.

in most general case if have repeat same html on , over, 1 option use <partial>s.

<partial name="header"></partial> <div>my content content</div> <partial name="footer"></partial> 

where declare partials as

vue.partial('header', '<h3>this title: {{title}}</h3>') vue.partial('footer', '<footer>mini footer</footer>') 

however if building single page application strategy follow have header , footer around <router-view>, here jsfiddle demonstrates how do.

https://jsfiddle.net/gurghet/vdqutw2y/

<header><h1> title: {{title}} </h1></header> <p>   <a v-link="{ path: '/foo' }">go foo</a>   <a v-link="{ path: '/bar' }">go bar</a> </p> <router-view></router-view> <footer>such footer, many links, wow!</footer>