Vuejs template inheritance

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>

If you know Chinses, please look it

// Base Component<template>  <div class="base-thing special-class">    <Button />  </div></template><script>import Button from './ButtonClick'export default {  components: { Button }}</script>// Inheriting Component<script>import BaseComponent from './BaseComponent'import Button from './OtherButton'export default {  extends: BaseComponent  components: {    Button  }} </script>

The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton