🌿 Nuxt.js
Intermediate
How do you implement lazy loading in Nuxt.js?
Answer
Nuxt.js supports lazy loading at multiple levels. For components, prefix the component name with Lazy in the template: <LazyModal v-if="showModal" /> — this generates a dynamic import so the component's code is only loaded when it's first rendered. For images, <NuxtImg loading="lazy" /> uses native browser lazy loading. For routes, Nuxt already splits each page into its own chunk automatically. For data, useFetch(url, { lazy: true }) defers the fetch until after navigation instead of blocking it. You can also manually lazy-load components using Vue's defineAsyncComponent() with custom loading and error states.
Previous
What are Nuxt.js server middleware vs route middleware?
Next
What is the `app/` directory structure in Nuxt.js 3?