To start our component, we can create our Vue project with Vue-CLI, as we did in the recipe 'Creating Your First Project with Vue CLI' in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Creating a dependency injection component' recipe.
Let's follow these steps to create a component mixin:
- Open the StarRating.vue component.
- 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: { maxRating: { type: Number, required: false, default: 5, }, rating: { type: Number, required: false, default: 0, }, votes: { type: Number, required: false, default: 0, }, }, };
- Back in the StarRating.vue component, we need to import this newly created file and add...