Lazy hydration for Vue SSR.
npm install --save lazy-hydration
import Hydrate from 'lazy-hydration';
export default {
...
components: { Hydrate }
...
}
Examples of using Hydrate in a Vue component, which also documents the different options provided:
<template>
<div>
<!-- Hydrate when user clicks. -->
<Hydrate on-click>
<MyComponent />
<MyComponent />
<MyComponent />
</Hydrate>
<!-- Just in time hydration. When user hovers over content -->
<Hydrate on-hover>
...
</Hydrate>
<!-- Hydrate on any event -->
<Hydrate on="fullscreen">
...
</Hydrate>
<!-- or events -->
<Hydrate :on="['fullscreen', 'mousedown']">
...
</Hydrate>
<!-- When user hover over or keyboard focus into. -->
<Hydrate on-interaction>
...
</Hydrate>
<!-- Requires IntersectionObserver. Polyfill not included. -->
<Hydrate when-visible>
...
</Hydrate>
<!-- Requires requestIdleCallback. Polyfill not included. -->
<Hydrate when-idle>
...
</Hydrate>
<!-- Only in SSR. -->
<Hydrate ssr-only>
...
</Hydrate>
<!-- Scheduled hydration. In 2s of initial render. -->
<Hydrate :with-delay="2000">
...
</Hydrate>
<!-- Controlled hydration -->
<Hydrate :force="isItReady">
...
</Hydrate>
</div>
</template>
Programmatic approach:
<template>
<Hydrate ref="child">
...
</Hydrate>
</template>
<script>
export default {
methods: {
foo() {
this.$refs.child.hydrate()
}
}
}
</script>
NOTE: Consider BETA until v1.0 release.
- vue-lazy-hydration by Markus Oberlehner
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
lazy-hydration © Rahul Kadyan, Released under the MIT License.
Authored and maintained by Rahul Kadyan with help from contributors (list).
znck.me · GitHub @Rahul Kadyan · Twitter @znck0