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 component mixin' recipe.

Now, follow these steps to import your component with a lazy loading technique:

1. Open the App.vue file.
2. In the <script> part of the component, we will take the imports at the top of the script and transform them into lazy load functions for each component:

<script>
export default {
  name: 'App',
  components: {
    StarRating: () => import('./components/StarRating.vue'),
    MaterialButton: () => import('./components/MaterialButton.vue'),
    MaterialCardBox: () => 
      import('./components/MaterialCardBox.vue'),
  },
  methods: {
    resetVote() {
      this.$refs.starRating.rank = 0;
      this.$refs.starRating.voted = false;
  ...