vue lazy componennt

lazy-component.vue

<template>
  <component
    :is="tag"
    ref="wrapper"
    :style="{
      minWidth: '1px',
      minHeight: '1px',
    }"
  >
    <slot v-if="show" />
    <slot v-if="!show" name="placeholder" />
  </component>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
const props = defineProps({
  tag: {
    type: String,
    default: 'div',
  },
})
const show = ref(false)
const wrapper = ref(null)

const { stop, isSupported } = useIntersectionObserver(
  wrapper,
  ([{ isIntersecting }]) => {
    console.log('isIntersecting', isIntersecting)
    if (isIntersecting) {
      show.value = true
      // observerElement.unobserve(wrapper.value)
      stop()
    }
  },
)

onMounted(() => {
  if (!isSupported)
    show.value = true
})
</script>