in-vue v1.0.1

in-vue

A lightweight Vue.js tool that loads components when they enter the viewport.

it uses IntersectionObserver to track when component comes into viewport

Why Use in-vue?

• Reduce initial page load time by loading components only when they enter the viewport
• Prevent unnecessary component and asset loading for off-screen content
• Ideal for:
  • Long scrolling pages
  • Image-heavy websites
  • Complex dashboards
  • Single-page applications with multiple sections
  • Infinite scroll implementations
  • Dynamic content-heavy applications

Features

• Lazy-load Vue components when they enter the viewport
• Retry mechanism for failed component loads
• Fallback loading component support
• Flexible IntersectionObserver configuration
• Exponential backoff with jitter for retries

Installation

npm install in-vue

Usage

<script setup lang="ts">
import { defineInVueComponent } from 'in-vue'

const InVueComponent = defineInVueComponent(() => import('./MyComponent'))
</script>

<template>
  <div>
    <InVueComponent />
  </div>
</template>

Load component 200px before entering viewport

import { defineInVueComponent } from 'in-vue'

const InVueComponent = defineInVueComponent(() => import('./MyComponent'), {
  // Optional configuration
  observerOptions: {
    rootMargin: '0px 200px 0px 0px', // Load 200px before entering viewport
  },
})

Props and Options

Additional Async Component Options

You can pass all standard defineAsyncComponent options:

• delay
• errorComponent
• loadingComponent
• onError
• And more...

Heads Up!

• It's highly recommended to pass loadingComponent that has same width and height to have better user experience, otherwise it renders a simple div instead of loadingComponent.

• SEO Caution: Might not be ideal for pages that need strong search engine visibility

• Minimum Vue Version: Vue 3.2.25
• Browser Support: Requires IntersectionObserver
  • For older browsers, include a polyfill:

    npm install intersection-observer

  • Then import in your main entry file:

    import 'intersection-observer'

Inspiration

Inspired by react-in-viewport for React ecosystem.