Integrate vue-lazy-hydration

[atinux]

Would be great to support https://github.com/maoberlehner/vue-lazy-hydration attributes right inside the components.

[reinoldus]

For those waiting:

//visible component
<template>
  <div class="visible-observer">
    <slot :visible="visible"></slot>
    <slot v-if="!visible" name="skeleton"> </slot>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: undefined,
    },
  },
  data: () => ({
    observer: null,
    visible: false,
  }),
  mounted() {
    const options = this.options || {}
    this.observer = new IntersectionObserver(([entry]) => {
      if (entry && entry.isIntersecting) {
        this.$emit('intersect')
        this.visible = true
      }
    }, options)

    this.observer.observe(this.$el)
  },
  destroyed() {
    this.observer.disconnect()
  },
}
</script>

      <visible>
        <template v-slot:default="{ visible }">
          <lazy-large-thing
            v-if="visible"
          ></lazy-large-thing>
        </template>
<template #skeleton>xxxxxxxx</template>
      </visible>

Can probably be greatly improved, but this is the only way I found that allowed me to lazy-load on "visibility" + add a skeleton in the meantime

options props can be used to fine tune the intersection observer to your needs

[ghost]

is it currently possible to use lazy hydration for when the component becomes visible, without additional magic?