Creating a component mixin

There are times when you will find yourself rewriting the same code over and over. However, there is a way to prevent this and make yourself far more productive.

For this, you can use what is called a mixin, a special code import in Vue that joins code parts from outside your component to your current component.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for his recipe are as follows:

• @vue/cli
• @vue/cli-service-global

To complete this recipe, we will use our Vue project and the Vue CLI, as we did in the Creating a dependency injection component recipe.

How to do it...

Follow these steps to create a component mixin:

1. Open the StarRating.vue component.
2. In the <script> part, we need to extract the props property into a new file called starRatingDisplay.js that we need to create in the mixins folder. This new file will be our first mixin, and will look like this:

export default {
  props...