{"id":14313,"library":"vue3-lazy-hydration","title":"Vue 3 Lazy Hydration","description":"vue3-lazy-hydration is a library designed for Vue 3 applications utilizing Server-Side Rendering (SSR) to improve initial page load performance by delaying the hydration of pre-rendered HTML components. Instead of immediately making all components interactive on the client, it allows developers to specify conditions under which hydration should occur, such as when the browser is idle, when a component becomes visible in the viewport, or upon user interaction (e.g., click, focus). The library provides a flexible API including a renderless component (`LazyHydrationWrapper`), composables like `useLazyHydration`, and import wrappers for controlling hydration. The current stable version is 1.2.1. While the project saw several updates in 2022, its release cadence has since become dormant, with the last update in September 2022. It distinguishes itself by offering multiple hydration strategies and direct Vue 3 compatibility, building upon concepts from its Vue 2 predecessor.","status":"maintenance","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/freddy38510/vue3-lazy-hydration","tags":["javascript","vue","vue3","lazy","hydration","ssr","typescript"],"install":[{"cmd":"npm install vue3-lazy-hydration","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-lazy-hydration","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-lazy-hydration","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all Vue 3 applications. Required at runtime.","package":"vue","optional":false}],"imports":[{"note":"CommonJS `require` syntax is not recommended for modern Vue 3 projects which primarily use ESM. Use named import for the component.","wrong":"const { LazyHydrationWrapper } = require('vue3-lazy-hydration');","symbol":"LazyHydrationWrapper","correct":"import { LazyHydrationWrapper } from 'vue3-lazy-hydration';"},{"note":"A composable used to manually trigger or control hydration logic within a setup script. First mentioned in v1.0.0 features.","wrong":null,"symbol":"useLazyHydration","correct":"import { useLazyHydration } from 'vue3-lazy-hydration';"},{"note":"Since v1.2.0, type declarations are provided. Types should be imported using `import type` to ensure they are stripped from the JavaScript bundle.","wrong":"import { LazyHydrationOptions } from 'vue3-lazy-hydration';","symbol":"LazyHydrationOptions","correct":"import type { LazyHydrationOptions } from 'vue3-lazy-hydration';"}],"quickstart":{"code":"// App.vue\n<template>\n  <div id=\"app\">\n    <h1>Vue 3 Lazy Hydration Example</h1>\n\n    <p>Component below will hydrate when the browser is idle (or after 4 seconds).</p>\n    <LazyHydrationWrapper :when-idle=\"4000\" @hydrated=\"onIdleHydrated\">\n      <div class=\"card\">\n        <h3>Idle Hydrated Component</h3>\n        <p>This content was server-rendered and will become interactive when the browser is idle or after a 4s timeout.</p>\n        <button @click=\"showMessage('Idle Button Clicked!')\">Click Me</button>\n      </div>\n    </LazyHydrationWrapper>\n\n    <p>Component below will hydrate when it becomes visible in the viewport.</p>\n    <div style=\"height: 100vh;\">Scroll down to see the next component</div>\n    <LazyHydrationWrapper :when-visible=\"{ rootMargin: '50px' }\" @hydrated=\"onVisibleHydrated\">\n      <div class=\"card\">\n        <h3>Visible Hydrated Component</h3>\n        <p>This content was server-rendered and will become interactive when it enters the viewport.</p>\n        <button @click=\"showMessage('Visible Button Clicked!')\">Click Me</button>\n      </div>\n    </LazyHydrationWrapper>\n\n    <p>Component below will hydrate on interaction (click or touchstart).</p>\n    <LazyHydrationWrapper :on-interaction=\"['click', 'touchstart']\" @hydrated=\"onInteractionHydrated\">\n      <div class=\"card\">\n        <h3>Interaction Hydrated Component</h3>\n        <p>Click or touch this area to hydrate and make the button interactive.</p>\n        <button @click=\"showMessage('Interaction Button Clicked!')\">Click Me</button>\n      </div>\n    </LazyHydrationWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { LazyHydrationWrapper } from 'vue3-lazy-hydration';\n\nfunction onIdleHydrated() {\n  console.log('Idle Hydration: Component is now interactive!');\n  alert('Idle Component Hydrated!');\n}\n\nfunction onVisibleHydrated() {\n  console.log('Visible Hydration: Component is now interactive!');\n  alert('Visible Component Hydrated!');\n}\n\nfunction onInteractionHydrated() {\n  console.log('Interaction Hydration: Component is now interactive!');\n  alert('Interaction Component Hydrated!');\n}\n\nfunction showMessage(msg: string) {\n  console.log(msg);\n  alert(msg);\n}\n</script>\n\n<style>\n.card {\n  border: 1px solid #ccc;\n  padding: 20px;\n  margin-bottom: 20px;\n  border-radius: 8px;\n}\n</style>","lang":"typescript","description":"This example demonstrates various lazy hydration strategies using the `LazyHydrationWrapper` component. It shows how to delay hydration until the browser is idle, when the component becomes visible in the viewport, or upon specific user interactions like click or touchstart. Each method logs a message and triggers an alert when the component successfully hydrates."},"warnings":[{"fix":"Upgrade to `vue3-lazy-hydration@1.2.1` or newer using `npm install vue3-lazy-hydration@latest` or `yarn add vue3-lazy-hydration@latest`.","message":"Package installation failed due to problematic pre/post install scripts. Versions before 1.2.1 included scripts that could cause npm/yarn installation failures when used as a dependency.","severity":"breaking","affected_versions":">=1.0.0 <1.2.1"},{"fix":"Evaluate if the current feature set meets your needs and consider the lack of ongoing support when planning for future updates or specific bug fixes. Keep an eye on the GitHub repository for any unexpected activity.","message":"The `vue3-lazy-hydration` package has not seen active development since September 2022. While functional for its intended purpose, long-term compatibility with newer Vue 3 versions or ecosystem changes is not guaranteed, and new features or bug fixes are unlikely.","severity":"gotcha","affected_versions":">=1.2.1"},{"fix":"Always provide at least one condition prop (e.g., `:when-idle`, `:when-visible`, `:on-interaction`) to ensure your component eventually hydrates and becomes interactive. If manual control is desired, use the `:manual` prop.","message":"Using `LazyHydrationWrapper` without any `when-idle`, `when-visible`, `on-interaction`, or `manual` props will result in the component *never* hydrating. The content will remain static and non-interactive.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.1':107 '2':149 '2022':115,129 '3':2,15,141 'allow':50 'api':87 'applic':16 'becom':70,121 'browser':64 'build':143 'cadenc':118 'click':80 'client':48 'compat':142 'compon':38,44,69,91 'compos':93 'concept':145 'condit':54 'control':100 'current':103 'delay':30 'design':12 'develop':51 'direct':139 'distinguish':131 'dormant':122 'e.g':79 'flexibl':86 'focus':81 'html':37 'hydrat':4,8,32,57,101,136,155 'idl':66 'immedi':41 'import':97 'improv':24 'includ':88 'initi':25 'instead':39 'interact':45,78 'javascript':151 'last':125 'lazi':3,7,154 'lazyhydrationwrapp':92 'librari':11,83 'like':94 'load':27 'make':42 'multipl':135 'occur':59 'offer':134 'page':26 'perform':28 'pre':35 'pre-rend':34 'predecessor':150 'project':110 'provid':84 'releas':117 'render':21,36 'renderless':90 'saw':111 'septemb':128 'server':19 'server-sid':18 'sever':112 'side':20 'sinc':120 'specifi':53 'ssr':22,156 'stabl':104 'strategi':137 'typescript':157 'updat':113,126 'upon':76,144 'uselazyhydr':95 'user':77 'util':17 'version':105 'viewport':74 'visibl':71 'vue':1,14,140,148,152 'vue3':6,153 'vue3-lazy-hydration':5 'wrapper':98","created_at":"2026-04-20T01:59:03.697003+00:00","updated_at":"2026-04-20T01:59:03.697003+00:00","problems":[{"fix":"Update to `vue3-lazy-hydration@1.2.1` or newer by running `npm install vue3-lazy-hydration@latest` or `yarn add vue3-lazy-hydration@latest`.","cause":"Malformed pre/post install scripts in earlier versions of the package (prior to v1.2.1).","error":"npm ERR! Lifecycle: `vue3-lazy-hydration@X.Y.Z install`"},{"fix":"Ensure you provide a hydration trigger prop like `:when-idle`, `:when-visible`, `:on-interaction`, or `:manual` to the `LazyHydrationWrapper` component. Without these, the component will not hydrate and remain static.","cause":"The `LazyHydrationWrapper` component was used without any hydration condition, leading to it never being hydrated and its setup function not being called on the client side.","error":"[Vue warn]: A component that exports a `setup()` function must be called."},{"fix":"Verify the import statement `import { ... } from 'vue3-lazy-hydration';` is correct. Ensure the package is properly installed by running `npm install vue3-lazy-hydration` or `yarn add vue3-lazy-hydration`.","cause":"The package `vue3-lazy-hydration` is either not installed, or there's a typo in the import path.","error":"Can't resolve 'vue3-lazy-hydration' in '...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/freddy38510/vue3-lazy-hydration","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue3-lazy-hydration","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}