Using mixins in your components

In Vue and in JavaScript in general, there is no general way to have inheritance as intended in programming. Vue nonetheless has some means of recycling the same features for more components. In this recipe, you will give superpowers to your components, but you will write the powers only once.

Getting ready

This recipe is fairly advanced; it uses some nasty tricks that are very useful to understand how Vue works and may be helpful as a workaround in some situations. Anyway, it is not recommended if you don't already have some experience with Vue.

How to do it...

First, we will create two regular elements: the first will represent a man--you can use the man emoji:

Vue.component('man', { 
  template: '<p>
man</p>' 
})

Well, that was simple. Next, we will create a cat component:

Vue.component('cat', { 
  template: '<p>
cat</p>' 
})

After those, you can instantiate Vue like this:

new Vue({ 
  el: '#app' 
})

In your HTML, you compose all the three with...