tessl/npm-vuetify-loader

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

—

Pending

Overview

Eval results

Files

Vuetify Loader

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

Vuetify Loader is a webpack ecosystem tool that provides automatic Vuetify component imports and progressive image loading capabilities. It automatically injects import statements for Vuetify components as they are used in Vue.js templates, eliminating manual imports and enabling optimal tree shaking for smaller bundle sizes.

Package Information

Package Name: vuetify-loader
Package Type: npm
Language: JavaScript
Installation: npm install vuetify-loader

Core Imports

// Main loader function (default export)
const vuetifyLoader = require('vuetify-loader');

// Webpack plugin
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

// Progressive module
const { VuetifyProgressiveModule } = require('vuetify-loader');

For progressive loading:

// Progressive loader (use in webpack rules)
'vuetify-loader/progressive-loader'

Basic Usage

Webpack Plugin Setup (Recommended)

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ]
};

Manual Loader Configuration

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          {
            loader: 'vuetify-loader',
            options: {
              match: [] // Custom matcher functions
            }
          }
        ]
      }
    ]
  }
};

Component Auto-Import Example

Before (manual imports):

<template>
  <v-app>
    <v-card>
      <v-card-title>Hello World</v-card-title>
    </v-card>
  </v-app>
</template>

<script>
import { VApp, VCard, VCardTitle } from 'vuetify/lib';

export default {
  components: {
    VApp,
    VCard,
    VCardTitle
  }
};
</script>

After (automatic imports):

<template>
  <v-app>
    <v-card>
      <v-card-title>Hello World</v-card-title>
    </v-card>
  </v-app>
</template>

<script>
// Components are automatically imported and registered
export default {
  // No manual imports needed
};
</script>

Architecture

Vuetify Loader consists of several key components:

Main Loader: Analyzes Vue single-file components and injects Vuetify component imports
Webpack Plugin: Integrates the loader into the webpack build process automatically
Component Matcher: Identifies Vuetify components by analyzing template tags
Progressive Module: Vue template compiler module for transforming image sources
Progressive Loader: Webpack loader that generates low-resolution image placeholders

Capabilities

Automatic Component Importing

Core functionality that automatically imports Vuetify components based on template usage, enabling tree shaking and eliminating manual import statements.

// Main loader function
function vuetifyLoader(content, sourceMap);

// Webpack plugin class
class VuetifyLoaderPlugin {
  constructor(options);
  apply(compiler);
}

Component Importing

Progressive Image Loading

Advanced image optimization that generates low-resolution placeholders for v-img components, providing smooth loading experiences with lazy loading support.

// Vue compiler module
const VuetifyProgressiveModule = {
  postTransformNode: Function
};

// Progressive loader function
function progressiveLoader(contentBuffer);

Progressive Loading

Types

// Plugin options
interface VuetifyLoaderPluginOptions {
  match?: MatcherFunction[];
}

// Matcher function signature
type MatcherFunction = (
  originalTag: string,
  context: {
    kebabTag: string;
    camelTag: string;
    path: string;
    component: ComponentDescriptor;
  }
) => [string, string] | undefined;

// Progressive loader options
interface ProgressiveLoaderOptions {
  size?: number;           // Preview image size (default: 9)
  sharp?: boolean;         // Use sharp library (default: false)
  graphicsMagick?: boolean; // Use GraphicsMagick (default: false)
}

Install with Tessl CLI

npx tessl i tessl/npm-vuetify-loader

docs

component-importing.md

index.md

progressive-loading.md

tile.json