How to do it...

To start our component, we can create our Vue project with Vue-CLI, as we did in the 'Creating Your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Creating a dynamic injected component' recipe.

Now, follow these steps to create a dependency injection component:

1. Open the StarRating.vue component.
2. In the <script> part of the component, add a new property called provide. In our case, we will just be adding a key-value to check whether the component is a child of the specific component. Create an object in the property with the starRating key and the true value:

<script>
import StarRatingInput from './StarRatingInput.vue';
import StarRatingDisplay from './StarRatingDisplay.vue';

export default {
  name: 'StarRating',
  components: { StarRatingDisplay, StarRatingInput },
  provide: {
    starRating: true,
  },
  props: {
    maxRating...