🌿 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.