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:
- Open the App.vue file.
- 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; ...