vue-intersection-observer
vue-intersection-observer copied to clipboard
prop types for server side
Resolves #33
@rderks88
Tried vue-intersection-observer
Not compatible with SSR
See: https://github.com/BiYuqi/vue-intersection-observer/issues/33
Workaround: downgrade to 0.1.8
Inline Handlers
this.$emit("on-change", entries[0], this.unobserve);
leads to inconveniences with v-for
:
$event
is bound to entries[0]
and this.unobserve
is lost when using Inline Handlers:
<template v-for="(item, index) in items">
<observer :key="index" @on-change="onObserveChange(item, $event)">
</observer>
</template>
See: https://v2.vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers
Workaround:
(...params) => onObserveChange(item, ...params)
Has dependencies
core-js vue vue-router
Using vue-intersect
- Better wrapping. Does not create additional
div
- More events
change
+enter
,leave
,destroyed
- SSR compatible
- No dependencies
- Covered with tests
- Supports event modifiers: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
But has issues with dynamic components: https://github.com/heavyy/vue-intersect/pull/32
Need to be transpiled
See nuxt.config.js
.build
.transpile
Thank you ulcuber for your swift reply.