Plugin Installation

/**
 * Vue Lazyload plugin object with install method
 */
interface VueLazyloadPluginObject {
  /**
   * Installs the plugin into Vue application
   * @param Vue - Vue 3 App instance
   * @param options - Optional configuration options
   */
  install(Vue: App, options?: VueLazyloadOptions): void;
}

/**
 * Configuration options for Vue Lazyload plugin
 */
interface VueLazyloadOptions {
  /** Enable lazy-component registration (default: false) */
  lazyComponent?: boolean;
  /** Enable lazy-image component registration (default: false) */
  lazyImage?: boolean;
  /** Proportion of pre-loading height (default: 1.3) */
  preLoad?: number;
  /** Error image URL fallback */
  error?: string;
  /** Loading placeholder image URL */
  loading?: string;
  /** CORS setting for image loading */
  cors?: string;
  /** Maximum loading attempt count (default: 3) */
  attempt?: number;
  /** DOM events to listen for scroll detection */
  listenEvents?: string[];
  /** WebP format support detection */
  supportWebp?: boolean;
  /** Element adapter callbacks for lifecycle events */
  adapter?: AdapterOptions;
  /** Image listener filters for URL modification */
  filter?: FilterOptions;
  /** Dispatch DOM events on state changes (default: false) */
  dispatchEvent?: boolean;
  /** Throttle delay for scroll events in ms (default: 200) */
  throttleWait?: number;
  /** Use IntersectionObserver instead of scroll events (default: false) */
  observer?: boolean;
  /** IntersectionObserver configuration options */
  observerOptions?: IntersectionObserverInit;
  /** Suppress debug console output (default: true) */
  silent?: boolean;
  /** Top offset for pre-loading (default: 0) */
  preLoadTop?: number;
  /** Device pixel ratio scale factor */
  scale?: number;
}

/**
 * Element adapter callbacks for handling lifecycle events
 */
interface AdapterOptions {
  /** Called when image loading starts */
  loading?: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
  /** Called when image successfully loads */
  loaded?: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
  /** Called when image loading fails */
  error?: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
  /** Called before image loading starts */
  beforeLoad?: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
}

/**
 * Image listener filters for modifying image URLs
 */
interface FilterOptions {
  [filterName: string]: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
}

import { createApp } from "vue";
import VueLazyload from "vue-lazyload";
import App from "./App.vue";

const app = createApp(App);

// Basic installation
app.use(VueLazyload);

// Installation with configuration
app.use(VueLazyload, {
  preLoad: 1.3,
  error: "/images/error.png",
  loading: "/images/loading.gif",
  attempt: 3,
  observer: true,
  observerOptions: {
    rootMargin: "0px",
    threshold: 0.1,
  },
  lazyComponent: true,
  lazyImage: true,
});

// Advanced configuration with adapters and filters
app.use(VueLazyload, {
  adapter: {
    loaded({ el, naturalHeight, naturalWidth, src }) {
      console.log("Image loaded:", src, { naturalHeight, naturalWidth });
      el.style.opacity = "1";
    },
    loading(listener) {
      console.log("Loading image:", listener.src);
    },
    error(listener) {
      console.error("Failed to load image:", listener.src);
    },
  },
  filter: {
    progressive(listener, options) {
      const isCDN = /cdn\.example\.com/.test(listener.src);
      if (isCDN) {
        listener.loading = listener.src + "?w=10&h=10";
      }
    },
    webp(listener, options) {
      if (options.supportWebp) {
        const isCDN = /cdn\.example\.com/.test(listener.src);
        if (isCDN) {
          listener.src += "?format=webp";
        }
      }
    },
  },
});

app.mount("#app");

/**
 * Global properties added to Vue component instances
 */
interface ComponentPublicInstance {
  /** Access to the lazy loading handler instance */
  $Lazyload: VueLazyloadHandler;
}

/**
 * Global properties added to Vue app config
 */
interface AppConfig {
  globalProperties: {
    /** Global access to lazy loading handler */
    $Lazyload: VueLazyloadHandler;
  };
}

<script setup>
import { getCurrentInstance } from "vue";

// Access via composition API
const instance = getCurrentInstance();
const lazyload = instance?.appContext.config.globalProperties.$Lazyload;

// Listen for events
lazyload?.$on("loaded", (listener, cache) => {
  console.log("Image loaded:", listener.src, "from cache:", cache);
});

// Manually trigger lazy load check
lazyload?.lazyLoadHandler();

// Get performance metrics
const metrics = lazyload?.performance();
console.log("Performance data:", metrics);
</script>

<script>
export default {
  mounted() {
    // Access via options API
    this.$Lazyload.$on("error", (listener) => {
      console.error("Failed to load:", listener.src);
    });
  },
};
</script>

/**
 * Injection key for accessing lazy loading handler
 */
const LazyloadInjectionKey: InjectionKey<VueLazyloadHandler>;

<script setup>
import { inject } from "vue";

// Inject the lazyload handler
const lazyload = inject("Lazyload");

// Use the injected handler
lazyload?.$on("loaded", (listener) => {
  console.log("Loaded:", listener.src);
});
</script>