title: Sub-class a vue component
body: <p>I have some repeating functionality that many components will use. So my first thought is I should create a base component and have my components inherit/subclass from this.</p>
  
  <p>But maybe this is not possible in vue.js and maybe its not the vue.js way to do things? If I explain my use-case can you suggest how best I implement this in vue.js?</p>
  
  <p>BasePage.vue</p>
  
  <pre><code>&lt;template&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'animated-page',
  
    watch: {
      '$route' (to, from) {
        // conditionally choose animations depending on route
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth &lt; fromDepth ? 'slide-right' : 'slide-left'
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  ... my animations
  &lt;/style&gt;
  </code></pre>
  
  <p>About.vue</p>
  
  <pre><code>&lt;template&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    // somehow inherit from BasePage
    name: 'about-page',
  
    ... 'about' specific code
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>