How it works...

Mixins add a lot of flexibility to our components, and it is a way to reuse a piece of functionality in different components.

The basic mechanism is that you define an object that mimics the options of a component. You then put the object in an array inside the mixins option inside the real component. Vue will look for mixins when it's time to create the component and will mix the options of the components with the one you defined.

What will happen in our recipe is that the created hook will encapsulate the component in a <div> by modifying the template. It will add a button to the creation hook; it will then add a superMe method that turns on the superPowers mixed state variable and add the CSS super class.

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.