Lazy loading your auto imported components in Nuxt

With Nuxt auto importing our components is easy by just having components: true in your nuxt.config but what about Lazy loading your components. Well that can be done by just prefixing with the word Lazy.

[@i_am_a_real_cat1443]

You are an amazing teacher debbie.

[@jacktcunningham]

Hi this is great for off-screen components but what if you want to delay hydration for a component? For example in a product listing that is important for users to see straight away and for search engines to see, the SSG content is there straight from load, but maybe you only want to make it reactive when users interact with the filters?

[@jllastrilla]

i’m learning a lot from you! keep it going. can’t wait for vuex series of yours =)

[@DebbieOBrien]

thanks. haha no pressure then

[@justvj4190]

thanks, Debbie! just a very organized n simple explanation

[@chaderenyore1748]

Is there a way I can load my components only after the resolves? I want to use it in my layout but I want to load the footer only after the page has been loaded? is there a way I can do that?

[@DebbieOBrien]

not sure there is

[@captainalpha4853]

since it's a good practice to use Lazy loading, why isn't Nuxt setting it as default for all components??

[@ya2138]

I do recreate your senerio and find out if you only use v-if without Lazy prefix for the component. It has the same behavior like having Lazy prefix. What's the different?

[@ya2138]

When I build the project and see the result. It does has different. It does lazy load for the specific component. But your demo is in dev mode. Very werid...

[@DebbieOBrien]

emm need to rewatch the video to see

[@phojie6868]

Hey Debbie I have a question here. What are the differences between having LazyComponents vs Having not? I mean the components will still not render if "v-if=false" though. I am active in your channel. I hope you will answer this soon. God bless

[@DebbieOBrien]

Good question! It's to do with performance. So its good for components that might not ever need to be rendered. Webpack puts it in another bundle and downloads it if needed such as when the user clicks etc. v-if will show or hide it but it will still be in the bundle. you can also lazy load components that are not in the first view such as footer component so similar to lazy loading images for example

[@justvj4190]

had the same problem! cheers

[@phojie6868]

@@DebbieOBrien great answers there, hope to see more videos from yours 🙏

[@jobinga8774]

Hi Debbie, for background images, can I apply the same technique?

[@DebbieOBrien]

no, background images are css not components

[@matmarlow7380]

Thanks for the videos. Is this supposed to work when running in dev? I can only get it to work after building and running npm run start. In dev, it is bundled into app.js and not loaded separately.

[@DebbieOBrien]

yeah i think its only for production so running in start is the way to go

[@mzko6174]

Learning so many cool things!

[@DebbieOBrien]

yeahhh, glad to hear it

[@happynak6109]

I have lazy loaded component like this with images, and open/close button, its working but images are always redownloaded in network tab when i close and open that component again, is it normal behavior? Js file is downloaded only once.. its weird, btw great vid :)

[@DebbieOBrien]

thanks did you try adding the lazy loading to the image. for chrome for example

[@happynak6109]

@@DebbieOBrien yes i did, but it was not my desired result, finally element helped me, thanks for reply

[@DebbieOBrien]

ah ok, now I understand what you wanted to achieve. yes keep-alive will keep the images there without keep-alive it is always unmounted and remounted back to the page

[@VoyceAtlas]

will you marry me?? lol thank you for all you are doing please don't stop it will blow up soon. no way nuxt doesn't with you doing this.

[@DebbieOBrien]

thank's for the compliment. Don't worry I won't stop 😃

[@karombekhusanov7603]

This is not lazy loading, at all,

[@DebbieOBrien]

should be. if you click on the the component it doesnt load as in js doesnt get fetched until its needed