tessl/npm-vuetify-loader

A webpack loader for automatic Vuetify component imports and progressive image generation

—

Pending

Overview

Eval results

Files

Progressive Loading

Name: tessl/npm-vuetify-loader
Author: tessl

Progressive image loading functionality that generates low-resolution placeholders for Vuetify image components, providing smooth loading experiences and perceived performance improvements.

Capabilities

VuetifyProgressiveModule

Vue template compiler module that transforms image source attributes to enable progressive loading.

/**
 * Vue compiler module for progressive image loading
 * Transforms v-img, v-card-media, and v-carousel-item components
 */
const VuetifyProgressiveModule = {
  /** Post-transform function for Vue template compilation */
  postTransformNode: Function
};

/**
 * Transform function for image components
 * @param {VNode} node - Vue template node
 * @returns {VNode} - Transformed node with progressive loading
 */
function postTransformNode(node);

Usage Example:

// webpack.config.js
const { VuetifyProgressiveModule } = require('vuetify-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            modules: [VuetifyProgressiveModule]
          }
        }
      }
    ]
  }
};

Progressive Loader Function

Webpack loader that processes image files and generates low-resolution placeholders.

/**
 * Webpack loader for generating progressive image placeholders
 * @param {Buffer} contentBuffer - Image file buffer
 * @returns {void} - Calls callback with processed result
 */
function progressiveLoader(contentBuffer);

// Loader properties
progressiveLoader.raw = true; // Handles binary data

Webpack Rule Configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        resourceQuery: /vuetify-preload/,
        use: [
          {
            loader: 'vuetify-loader/progressive-loader',
            options: {
              size: 9,                    // Preview size in pixels
              sharp: false,               // Use sharp library
              graphicsMagick: false       // Use GraphicsMagick
            }
          },
          {
            loader: 'url-loader',
            options: { limit: 8000 }
          }
        ]
      }
    ]
  }
};

Configuration Options

Options for controlling progressive image generation behavior.

interface ProgressiveLoaderOptions {
  /**
   * Minimum dimensions of preview images in pixels
   * @default 9
   */
  size?: number;
  
  /**
   * Use sharp library instead of GraphicsMagick
   * Better for environments without ImageMagick
   * @default false
   */
  sharp?: boolean;
  
  /**
   * Use GraphicsMagick instead of ImageMagick
   * @default false
   */
  graphicsMagick?: boolean;
}

Image Processing Workflow

The progressive loader follows this process:

Input Detection: Determines if content is already a data URL or file export
Library Selection: Uses either Sharp or GraphicsMagick based on configuration
Placeholder Generation: Creates low-resolution version of the image
Aspect Ratio Calculation: Preserves original image proportions
Output Creation: Generates module with both original source and lazy placeholder

Generated Output Format

The loader produces modules with both original and placeholder data:

// Generated module structure
interface ProgressiveImageModule {
  /** Original image source (URL or data URI) */
  src: string;
  /** Low-resolution placeholder as data URI */
  lazySrc: string;
  /** Aspect ratio (width/height) for layout */
  aspect: number;
}

Example Usage in Templates:

<template>
  <!-- Automatic transformation by VuetifyProgressiveModule -->
  <v-img src="@/assets/hero-image.jpg"></v-img>
  
  <!-- Manual progressive loading -->
  <v-img :src="require('@/assets/product.jpg?vuetify-preload')"></v-img>
  
  <!-- Selective lazy loading -->
  <v-img src="@/assets/background.jpg?lazy"></v-img>
</template>

Advanced Usage Patterns

Combining with URL Loader

Use Rule.oneOf to prevent conflicts with other image loaders:

{
  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.*)?$/,
  oneOf: [
    {
      test: /\.(png|jpe?g|gif)$/,
      resourceQuery: /vuetify-preload/,
      use: [
        'vuetify-loader/progressive-loader',
        {
          loader: 'url-loader',
          options: { limit: 8000 }
        }
      ]
    },
    {
      loader: 'url-loader',
      options: { limit: 8000 }
    }
  ]
}

Dynamic Image Loading

For dynamic paths or loops, manual require statements are needed:

<template>
  <!-- Dynamic images in loops -->
  <v-img 
    v-for="i in imageCount" 
    :key="i"
    :src="require(`@/images/gallery-${i}.jpg?vuetify-preload`)"
  ></v-img>
  
  <!-- Conditional progressive loading -->
  <v-img 
    :src="lazy ? require(`@/assets/${image}?vuetify-preload`) : require(`@/assets/${image}`)"
  ></v-img>
</template>

Selective Progressive Loading

Apply progressive loading only to specific images using query parameters:

// Webpack rule for selective loading
{
  test: /\.(png|jpe?g|gif)$/,
  resourceQuery: /lazy\?vuetify-preload/,
  use: ['vuetify-loader/progressive-loader']
}

<template>
  <!-- Only images with ?lazy will get progressive loading -->
  <v-img src="@/assets/hero.jpg?lazy"></v-img>
  <v-img src="@/assets/icon.jpg"></v-img> <!-- No progressive loading -->
</template>

Dependencies and Requirements

System Requirements

ImageMagick or GraphicsMagick: Required for image processing (unless using Sharp)
Sharp (optional): Alternative image processing library for environments without ImageMagick

npm Dependencies

// Required dependencies
"gm": "^1.23.1"           // GraphicsMagick/ImageMagick bindings
"loader-utils": "^1.1.0"  // Webpack loader utilities

// Optional dependencies
"sharp": "^0.x.x"         // Alternative image processing

Supported Image Components

The progressive module automatically transforms these Vuetify components:

v-img: Primary image component
v-card-media: Deprecated card media component
v-carousel-item: Carousel slide images

Error Handling

Image Processing Errors

Missing ImageMagick: Logged to console, does not break build
Invalid image format: Gracefully handled with error logging
File system errors: Logged but build continues

Configuration Errors

Invalid options: Uses default values for missing or invalid options
Missing loader configuration: Falls back to standard file processing

Error Logging Example:

// Errors are logged to console but don't break the build
gm(path).size(function(err, info) {
  if (err) console.error(err);
  // Process continues with error handling
});

Install with Tessl CLI

npx tessl i tessl/npm-vuetify-loader

docs

component-importing.md

index.md

progressive-loading.md

tile.json

tessl/npm-vuetify-loader