or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-importing.mdindex.mdprogressive-loading.md
tile.json

tessl/npm-vuetify-loader

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vuetify-loader@1.0.x

To install, run

npx @tessl/cli install tessl/npm-vuetify-loader@1.0.0

index.mddocs/

Vuetify Loader

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)
}