`.\n\n```html\n
\n \n\n```\n\n### Intersection Observer options\n\nInternally the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) is used to determine if a component is visible or not. You can provide Intersection Observer options to the `when-visible` property to configure the Intersection Observer.\n\n```html\n
\n \n\n```\n\nFor a list of possible options please [take a look at the Intersection Observer API documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver).\n\n## Import Wrappers\n\nAdditionally to the `
` wrapper component you can also use Import Wrappers to lazy load and hydrate certain components.\n\n```html\n\n \n\n\n\n```\n\n## Benchmarks\n\n### Without lazy hydration\n\n\n\n### With lazy hydration\n\n\n\n## Caveats\n\n**This plugin will not work as advertised if you're not using it in combination with SSR.** Although it should work with every pre-rendering approach (like [Prerender SPA Plugin](https://github.com/chrisvfritz/prerender-spa-plugin), [Gridsome](https://gridsome.org/), ...) I've only tested it with [Nuxt.js](https://nuxtjs.org) so far.\n\n## Upgrade v1.x to v2.x\n\nBreaking changes:\n\n- `ssr-only` was renamed to `never` (as in \"Hydrate this? Never!\").\n\n```diff\n-\n+\n \n \n```\n\n- Specyfing `ignored-props` on Import Wrappers is not necessary anymore.\n\n```diff\n components: {\n- ArticleContent: hydrateNever(() => import('./ArticleContent.vue'), { ignoredProps: ['content'] }),\n+ ArticleContent: hydrateNever(() => import('./ArticleContent.vue')),\n }\n```\n\n## Articles\n\n- [Partial Hydration Concepts: Lazy and Active](https://markus.oberlehner.net/blog/partial-hydration-concepts-lazy-and-active/)\n- [abomination: a Concept for a Static HTML / Dynamic JavaScript Hybrid Application](https://markus.oberlehner.net/blog/abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application/)\n- [How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications](https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/)\n\n## Credits\n\nThe code of the v1 version of this package was based on a [similar package created by **Rahul Kadyan**](https://github.com/znck/lazy-hydration).\n\n## Testing\n\nBecause the core functionality of `vue-lazy-hydration` heavily relies on browser APIs like `IntersectionObserver` and `requestIdleCallback()`, it is tough to write meaningful unit tests without having to write numerous mocks. Because of that, we mostly use integration tests and some performance benchmarks to test the functionality of this package.\n\n### Integration tests\n\nExecute the following commands to run the integration tests:\n\n```bash\nnpm run test:integration:build\nnpm run test:integration\n```\n\n### Performance tests\n\nExecute the following commands to run the performance benchmark:\n\n```bash\nnpm run test:perf:build\nnpm run test:perf\n```\n\n## About\n\n### Author\n\nMarkus Oberlehner \nWebsite: https://markus.oberlehner.net \nTwitter: https://twitter.com/MaOberlehner \nPayPal.me: https://paypal.me/maoberlehner \nPatreon: https://www.patreon.com/maoberlehner\n\n### License\n\nMIT\n","readmeFilename":"README.md"}