CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-vuetify

A Vite plugin for treeshaking Vuetify components and more

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Vite Plugin Vuetify

Vite Plugin Vuetify is a Vite plugin that provides tree-shaking optimization for Vuetify 3 components and automatic import functionality. It enables automatic imports of Vuetify components and directives while providing flexible style customization options including SASS variable overrides and conditional style imports.

Package Information

  • Package Name: vite-plugin-vuetify
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vite-plugin-vuetify

Core Imports

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

For CommonJS:

const vuetify = require("vite-plugin-vuetify").default;
const { transformAssetUrls } = require("vite-plugin-vuetify");

Basic Usage

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    vuetify({
      autoImport: true,
      styles: true
    })
  ]
});
// plugins/vuetify.js
import "vuetify/styles";
import { createVuetify } from "vuetify";

export default createVuetify();

Capabilities

Main Plugin Function

Creates a Vite plugin configuration for Vuetify optimization.

/**
 * Creates Vite plugins for Vuetify component optimization and style processing
 * @param options - Configuration options for the plugin
 * @returns Array of Vite Plugin instances
 */
declare function vuetify(options?: Options): Plugin[];

Usage Examples:

// Basic usage with default options
vuetify()

// Enable labs components and ignore specific components
vuetify({
  autoImport: {
    labs: true,
    ignore: ["VAlert", "Ripple"]
  }
})

// Custom SASS configuration
vuetify({
  styles: {
    configFile: "src/settings.scss"
  }
})

// Disable all style imports
vuetify({ styles: "none" })

// Use SASS source files instead of CSS
vuetify({ styles: "sass" })

Asset URL Transformation

Provides configuration for transforming asset URLs in Vuetify component templates.

/**
 * Configuration object for transforming asset URLs in Vuetify components
 * Used with @vitejs/plugin-vue for proper asset handling
 */
declare const transformAssetUrls: Record<string, string[]>;

Static Property:

/**
 * Static property on the main vuetify function providing asset URL transformation config
 */
declare namespace vuetify {
  const transformAssetUrls: Record<string, string[]>;
}

Usage Examples:

// With @vitejs/plugin-vue
import vue from "@vitejs/plugin-vue";
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    vuetify()
  ]
});

// Using static property
vue({
  template: { transformAssetUrls: vuetify.transformAssetUrls }
})

Configuration Types

Options Interface

Main configuration interface for the Vuetify plugin.

interface Options {
  /** Controls automatic import behavior for Vuetify components and directives */
  autoImport?: ImportPluginOptions;
  /** Controls style loading and processing behavior */
  styles?: StylesOptions;
}

Import Plugin Options

Configuration for automatic import functionality.

/** Configuration for auto-import functionality */
type ImportPluginOptions = boolean | ObjectImportPluginOptions;

interface ObjectImportPluginOptions {
  /** Include Vuetify Labs components in auto-imports */
  labs?: boolean;
  /** Array of component or directive names to ignore during auto-import */
  ignore?: (keyof typeof Components | keyof typeof Directives)[];
}

Styles Options

Configuration for style loading and processing.

/** Style loading configuration */
type StylesOptions = 
  | true                          // Load default CSS styles
  | "none"                        // Disable all style imports
  | "sass"                        // Use SASS source files instead of CSS
  | StylesConfigObject;           // Custom SASS configuration

interface StylesConfigObject {
  /** Path to SASS configuration file for variable overrides */
  configFile: string;
}

Plugin Architecture

The vuetify function returns an array containing up to two Vite plugins:

  1. Import Plugin (vuetify:import) - Handles automatic component and directive imports
  2. Styles Plugin (vuetify:styles) - Processes style imports and SASS configuration

Import Plugin Features:

  • Automatic detection of Vuetify components and directives in Vue templates
  • Tree-shaking support for optimal bundle size
  • Labs component support
  • Selective component/directive ignoring

Styles Plugin Features:

  • CSS to SASS file resolution
  • Custom SASS variable configuration
  • Virtual module handling for custom styles
  • Support for different style loading modes

Error Handling

The plugin will throw errors in the following cases:

  • When Vuetify plugin is loaded before the Vue plugin (import plugin will throw)
  • When SASS configuration file is not accessible
  • When invalid style configuration is provided

TypeScript Support

The plugin provides full TypeScript support with:

  • Complete type definitions for all configuration options
  • Generic type preservation in internal APIs
  • Integration with Vuetify's component and directive types
  • Proper inference for import and style options

Asset URL Transformation Details

The transformAssetUrls configuration includes mappings for Vuetify components that use image assets:

  • VAppBar: ['image']
  • VAvatar: ['image']
  • VCard: ['image', 'prependAvatar', 'appendAvatar']
  • VImg: ['src', 'lazySrc', 'srcset']
  • VParallax: ['src', 'lazySrc', 'srcset']
  • And many more component-to-attribute mappings

This ensures proper asset URL resolution for both kebab-case and PascalCase component names.

docs

index.md

tile.json