or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mddirectives.mdindex.mdplugin-installation.mdprogrammatic-api.md
tile.json

tessl/npm-vue-lazyload

Vue.js plugin for lazy-loading images and components with directives, components, and programmatic APIs

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-lazyload@3.0.x

To install, run

npx @tessl/cli install tessl/npm-vue-lazyload@3.0.0

index.mddocs/

Vue Lazyload

Vue Lazyload is a Vue.js plugin designed for lazy-loading images and components in Vue 3 applications. It provides directives (v-lazy, v-lazy-container), components (lazy-component, lazy-image), and programmatic APIs for optimizing image loading performance.

Package Information

  • Package Name: vue-lazyload
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vue-lazyload

Core Imports

import VueLazyload from "vue-lazyload";

// Named exports for TypeScript support
import { 
  VueLazyloadOptions, 
  VueLazyloadHandler, 
  VueReactiveListener, 
  loadImageAsyncOption 
} from "vue-lazyload";

For CommonJS:

const VueLazyload = require("vue-lazyload");
const { VueLazyloadOptions, VueLazyloadHandler } = require("vue-lazyload");

Basic Usage

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

const app = createApp(App);

// Install with default options
app.use(VueLazyload);

// Or install with custom options
app.use(VueLazyload, {
  preLoad: 1.3,
  error: "/error.png",
  loading: "/loading.gif",
  attempt: 3,
  observer: true,
  lazyComponent: true,
  lazyImage: true
});

app.mount("#app");

In templates:

<template>
  <div>
    <!-- Basic lazy loading -->
    <img v-lazy="imageUrl" alt="Lazy loaded image">
    
    <!-- Background image lazy loading -->
    <div v-lazy:background-image="backgroundUrl"></div>
    
    <!-- Container-based lazy loading -->
    <div v-lazy-container="{ selector: 'img' }">
      <img data-src="/image1.jpg">
      <img data-src="/image2.jpg">
    </div>
    
    <!-- Lazy component -->
    <lazy-component @show="onComponentShow">
      <img :src="heavyImageUrl" alt="Heavy image">
    </lazy-component>
  </div>
</template>

Architecture

Vue Lazyload is built around several key components:

  • Plugin System: Vue plugin that registers directives, components, and provides global access
  • Lazy Handler: Core lazy loading logic with IntersectionObserver or event-based detection
  • Reactive Listeners: Individual image listeners that manage loading states and rendering
  • Container Manager: Handles lazy loading for multiple images within containers
  • Components: Vue components for lazy loading content and images
  • Event System: Hooks for loading, loaded, and error events

Capabilities

Plugin Installation

Main plugin installation and configuration system for registering directives and components.

interface VueLazyloadPluginObject {
  install(Vue: App, options?: VueLazyloadOptions): void;
}

interface VueLazyloadOptions {
  lazyComponent?: boolean;
  lazyImage?: boolean;
  preLoad?: number;
  error?: string;
  loading?: string;
  cors?: string;
  attempt?: number;
  listenEvents?: string[];
  supportWebp?: boolean;
  adapter?: AdapterOptions;
  filter?: FilterOptions;
  dispatchEvent?: boolean;
  throttleWait?: number;
  observer?: boolean;
  observerOptions?: IntersectionObserverInit;
  silent?: boolean;
  preLoadTop?: number;
  scale?: number;
}

Plugin Installation

Directive Usage

Vue directives for declarative lazy loading of images and background images.

// v-lazy directive
interface LazyDirective {
  beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  beforeUpdate(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  updated(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  unmounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
}

// v-lazy-container directive
interface LazyContainerDirective {
  beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  updated(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  unmounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
}

Directive Usage

Lazy Components

Vue components for lazy loading content and images with full Vue 3 composition API support.

interface LazyComponentProps {
  tag?: string;
}

interface LazyImageProps {
  src: string | VueLazyloadImageOptions;
  tag?: string;
}

interface VueLazyloadImageOptions {
  src: string;
  error?: string;
  loading?: string;
  attempt?: number;
}

Lazy Components

Programmatic API

Direct access to the lazy loading handler for manual control and event handling.

interface VueLazyloadHandler {
  $on(event: string, callback: VueLazyloadListenEvent): void;
  $once(event: string, callback: VueLazyloadListenEvent): void;
  $off(event: string, callback?: VueLazyloadListenEvent): void;
  lazyLoadHandler(): void;
  performance(): VueReactiveListener[];
  add(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void;
  update(el: HTMLElement, binding: DirectiveBinding, vnode?: VNode): void;
  remove(el: HTMLElement): void;
  setMode(mode: string): void;
}

Programmatic API

Types

interface VueReactiveListener {
  el: Element;
  src: string;
  error: string;
  loading: string;
  bindType: string;
  attempt: number;
  naturalHeight: number;
  naturalWidth: number;
  options: VueLazyloadOptions;
  rect: DOMRect;
  $parent: Element;
  elRenderer: Function;
  performanceData: Performance;
}

interface VueLazyloadListenEvent {
  (listener: VueReactiveListener, cache: boolean): void;
}

interface Performance {
  init: number;
  loadStart: number;
  loadEnd: number;
}

interface AdapterOptions {
  [key: string]: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
}

interface FilterOptions {
  [key: string]: (listener: VueReactiveListener, options: VueLazyloadOptions) => void;
}

interface loadImageAsyncOption {
  src: string;
  cors?: string;
}