How to Implement Lazy Loading of PDFs with vue-pdf-embed?

[GuocaiL]

Hello, I'm currently using the vue-pdf-embed library in my project and I'm having some difficulties regarding lazy loading of PDFs.
I've been trying to figure out the best way to load PDFs in a lazy manner, meaning that the PDF should only start loading when it comes into the viewport or when some specific condition is met (for example, a user clicks on a certain button related to that PDF). However, I couldn't find clear documentation or examples on how to achieve this with vue-pdf-embed.
Could the author or anyone familiar with this library please provide some guidance on how to set up lazy loading for PDFs using vue-pdf-embed? Any code examples or detailed steps would be extremely helpful.
Thank you very much in advance for your assistance!

[hrynko]

Hi @GuocaiL,

To load a PDF when a component enters the viewport, you can use IntersectionObserver for conditional rendering. Alternatively, you can load the document using a composable function and then render specific pages as they enter the viewport. Both approaches are outside the library's functionality, but I’ve prepared an example to demonstrate how this can be implemented: https://jsfiddle.net/hrynko/u149my7h/