Lazy Loading Components in VueJS Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report Lazy Loading, fundamentally, is a design principle that delays the initialization of an object or a resource until the point at which it is genuinely required. The purpose of lazy loading is to postpone downloading parts of the application that are not needed by the user on the initial page load which ends up in much better loading time. As a app scales, the compiled JavaScript bundle file will keeps on increasing and thus affect the page load time. With the help of the defineAsyncComponent method, we can only load a component if and when needed. Setting Up the Project EnvironmentStep 1: Create a Vue.js applicationnpm create vue@latestStep 2: Navigate to your project directory and install dependenciescd your-project-name && npm installProject Structure:Project StructureExample: Lazy Loading a Component, We can use the new defineAsyncComponent function. We need to do is pass a function that loads the components. As we are loading the GFG component later there may be a short delay while the lazy-loaded part of UI is being requested and rendered for that pass in a loading component property which will be displayed while the component is being loaded. JavaScript <script setup> // lazy load the component import Loading from './components/Loading.vue' import { defineAsyncComponent } from 'vue'; import { ref } from 'vue'; const GFG = defineAsyncComponent({ loader: () => import('./components/GFG.vue'), loadingComponent: Loading }); const show = ref(false); const toggle = () => show.value = !show.value; </script> <template> <div> <button @click="toggle">Toggle</button> <GFG v-if="show" /> </div> </template> JavaScript <!-- GFG.vue --> <template> <!-- a centered align image --> <img src= "https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="GeeksforGeeks" style="display: block; margin-left: auto; margin-right: auto;"> </template> JavaScript <!-- Loading.vue --> <template> <div class="loading"> <div class="loading__spinner"></div> </div> </template> <style> .loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .loading__spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #2f8d46; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> Output: Comment More infoAdvertise with us Next Article VueJS Component B bijitmoni1oj Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Similar Reads Vue.js Reusing Components Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 4 min read VueJS Component Vue.js components are essential for creating adaptable and organized web applications. They let you divide your user interface into separate, self-sufficient sections, each handling its own specific part of the UI. This modular structure enhances the management and organization of complex applicatio 4 min read Vue.js Dynamic Components Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read ReactJS Onsen UI LazyList Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. LazyList components are used when millions of items are to be rendered without a drop in performance. We can use the follo 2 min read How to Create Functional Components using Vue Loader ? Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. Functional components, in particular, provide a lightweight and efficient way 3 min read Lazy Loading in React and How to Implement it ? Lazy Loading in React is used to initially load and render limited data on the webpage. It helps to optimize the performance of React applications. The data is only rendered when visited or scrolled it can be images, scripts, etc. Lazy loading helps to load the web page quickly and presents the limi 4 min read Like