tessl/npm-vuetify-loader

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

—

Pending

Overview

Eval results

Files

Component Importing

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

Automatic Vuetify component importing functionality that analyzes Vue single-file components and automatically injects import statements for used Vuetify components.

Capabilities

VuetifyLoaderPlugin Class

Webpack plugin that integrates vuetify-loader with vue-loader to automatically process Vue components.

/**
 * Webpack plugin for automatic Vuetify component imports
 * @param {VuetifyLoaderPluginOptions} options - Configuration options
 */
class VuetifyLoaderPlugin {
  constructor(options = {});
  
  /**
   * Apply the plugin to webpack compiler
   * @param {webpack.Compiler} compiler - Webpack compiler instance
   */
  apply(compiler);
}

interface VuetifyLoaderPluginOptions {
  /** Array of custom matcher functions for non-Vuetify components */
  match?: MatcherFunction[];
}

Usage Example:

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

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin({
      match: [
        // Custom matcher for project components
        (originalTag, { kebabTag, camelTag, path, component }) => {
          if (kebabTag.startsWith('core-')) {
            return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`];
          }
        }
      ]
    })
  ]
};

Vuetify Loader Function

Main webpack loader function that processes Vue component content and injects import statements.

/**
 * Main webpack loader function for automatic component imports
 * @param {string} content - Vue component source code
 * @param {object} sourceMap - Source map object
 * @returns {void} - Calls this.callback with processed content
 */
function vuetifyLoader(content, sourceMap);

Process Flow:

Parse Vue component template using vue-template-compiler
Extract all HTML tags from the template
Match tags against Vuetify component patterns
Generate import statements and component registrations
Inject generated code into the component

Custom Matcher Functions

Define custom component matching logic for project-specific components.

/**
 * Custom matcher function for component identification
 * @param {string} originalTag - Original tag name from template
 * @param {MatcherContext} context - Additional context data
 * @returns {[string, string] | undefined} - [componentName, importStatement] or undefined
 */
type MatcherFunction = (
  originalTag: string,
  context: MatcherContext
) => [string, string] | undefined;

interface MatcherContext {
  /** Tag name in kebab-case format */
  kebabTag: string;
  /** Tag name in PascalCase format */
  camelTag: string;
  /** Relative path to current Vue file */
  path: string;
  /** Parsed Vue component descriptor */
  component: ComponentDescriptor;
}

Usage Example:

// Custom matcher for UI library components
function customMatcher(originalTag, { kebabTag, camelTag, path, component }) {
  if (kebabTag.startsWith('ui-')) {
    const componentName = camelTag.replace('Ui', '');
    return [componentName, `import { ${componentName} } from '@/ui-library'`];
  }
  
  if (kebabTag.startsWith('icon-')) {
    return [camelTag, `import ${camelTag} from '@/icons/${camelTag}.vue'`];
  }
  
  return undefined;
}

Built-in Vuetify Matcher

Internal matcher that identifies standard Vuetify components.

/**
 * Built-in matcher for Vuetify components
 * @param {string} _ - Unused original tag parameter
 * @param {object} context - Matcher context with kebabTag and camelTag
 * @returns {[string, string] | undefined} - Component match result
 */
function vuetifyMatcher(_, { kebabTag, camelTag });

Behavior:

Only matches tags starting with 'v-' prefix
Checks against dynamically loaded Vuetify component list
Returns import statement from 'vuetify/lib' package
Used automatically by the loader

Utility Functions

String transformation utilities used by the loader for tag processing.

/**
 * Convert kebab-case string to camelCase
 * @param {string} str - Input string in kebab-case
 * @returns {string} - camelCase string
 */
function camelize(str);

/**
 * Capitalize first letter of string
 * @param {string} str - Input string
 * @returns {string} - String with capitalized first letter
 */
function capitalize(str);

/**
 * Convert camelCase string to kebab-case
 * @param {string} str - Input string in camelCase
 * @returns {string} - kebab-case string
 */
function hyphenate(str);

Integration Requirements

Webpack Configuration

The plugin must be added to webpack plugins array and requires vue-loader to be present:

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VuetifyLoaderPlugin()
  ]
};

Dependencies

vue-template-compiler: Required for parsing Vue component templates
vuetify: Required for component definitions and imports
webpack: Required for loader and plugin functionality

Error Handling

Missing vue-loader: Plugin throws error if vue-loader rule not found
Invalid options: Gracefully handles missing or malformed options with defaults
Template parsing errors: Logged but do not break the build process

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