or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-vite-plugin-vuetify

A Vite plugin for treeshaking Vuetify components and more

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/vite-plugin-vuetify@2.1.x

To install, run

npx @tessl/cli install tessl/npm-vite-plugin-vuetify@2.1.0

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:

Import Plugin (vuetify:import) - Handles automatic component and directive imports
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.