Vuejs template inheritance

Question

How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?

I know that I can do everything with composition, but for components like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single component. In my app I have a two level navigation and it seems painful to repeat them on every one of those child components :(

I know that I can use jade and then inherit a jade file within my components, but it seems wrong because I would have some jade and some Vue files, is there any other way to do 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, is a layouts folder filled with jade layouts and I use them to extend my components. I used vue-cli with webpack template.

Answer 1

In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.

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

Where you declare partials as

Vue.partial('header', '<h3>This is the title: {{title}}</h3>')
Vue.partial('footer', '<footer>Mini footer</footer>')

However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.

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

<header><h1>
My title: {{title}}
</h1></header>
<p>
  <a v-link="{ path: '/foo' }">Go to Foo</a>
  <a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>