g0shed/lazy-hydration

Lazy Hydration for Vue SSR

Introduction

Lazy hydration for Vue SSR.

NOTE: This project uses @znck/prop-types which generates tree shakeable component prop definitions but it requires process.env.NODE_ENV to replaced with "production" to work effectively. See @znck/prop-types's documentation to know more.

Usage

Installation

npm install --save lazy-hydration

Examples

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.

Prior Art

• vue-lazy-hydration by Markus Oberlehner

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Author

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