0
# Vuetify Loader
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: vuetify-loader
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install vuetify-loader`
10

11
## Core Imports
12

13
```javascript
14
// Main loader function (default export)
15
const vuetifyLoader = require('vuetify-loader');
16

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

20
// Progressive module
21
const { VuetifyProgressiveModule } = require('vuetify-loader');
22
```
23

24
For progressive loading:
25

26
```javascript
27
// Progressive loader (use in webpack rules)
28
'vuetify-loader/progressive-loader'
29
```
30

31
## Basic Usage
32

33
### Webpack Plugin Setup (Recommended)
34

35
```javascript
36
// webpack.config.js
37
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
38

39
module.exports = {
40
  plugins: [
41
    new VuetifyLoaderPlugin()
42
  ]
43
};
44
```
45

46
### Manual Loader Configuration
47

48
```javascript
49
// webpack.config.js
50
module.exports = {
51
  module: {
52
    rules: [
53
      {
54
        test: /\.vue$/,
55
        use: [
56
          'vue-loader',
57
          {
58
            loader: 'vuetify-loader',
59
            options: {
60
              match: [] // Custom matcher functions
61
            }
62
          }
63
        ]
64
      }
65
    ]
66
  }
67
};
68
```
69

70
### Component Auto-Import Example
71

72
Before (manual imports):
73

74
```vue
75
<template>
76
  <v-app>
77
    <v-card>
78
      <v-card-title>Hello World</v-card-title>
79
    </v-card>
80
  </v-app>
81
</template>
82

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

86
export default {
87
  components: {
88
    VApp,
89
    VCard,
90
    VCardTitle
91
  }
92
};
93
</script>
94
```
95

96
After (automatic imports):
97

98
```vue
99
<template>
100
  <v-app>
101
    <v-card>
102
      <v-card-title>Hello World</v-card-title>
103
    </v-card>
104
  </v-app>
105
</template>
106

107
<script>
108
// Components are automatically imported and registered
109
export default {
110
  // No manual imports needed
111
};
112
</script>
113
```
114

115
## Architecture
116

117
Vuetify Loader consists of several key components:
118

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

125
## Capabilities
126

127
### Automatic Component Importing
128

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

131
```javascript { .api }
132
// Main loader function
133
function vuetifyLoader(content, sourceMap);
134

135
// Webpack plugin class
136
class VuetifyLoaderPlugin {
137
  constructor(options);
138
  apply(compiler);
139
}
140
```
141

142
[Component Importing](./component-importing.md)
143

144
### Progressive Image Loading
145

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

148
```javascript { .api }
149
// Vue compiler module
150
const VuetifyProgressiveModule = {
151
  postTransformNode: Function
152
};
153

154
// Progressive loader function
155
function progressiveLoader(contentBuffer);
156
```
157

158
[Progressive Loading](./progressive-loading.md)
159

160
## Types
161

162
```javascript { .api }
163
// Plugin options
164
interface VuetifyLoaderPluginOptions {
165
  match?: MatcherFunction[];
166
}
167

168
// Matcher function signature
169
type MatcherFunction = (
170
  originalTag: string,
171
  context: {
172
    kebabTag: string;
173
    camelTag: string;
174
    path: string;
175
    component: ComponentDescriptor;
176
  }
177
) => [string, string] | undefined;
178

179
// Progressive loader options
180
interface ProgressiveLoaderOptions {
181
  size?: number;           // Preview image size (default: 9)
182
  sharp?: boolean;         // Use sharp library (default: false)
183
  graphicsMagick?: boolean; // Use GraphicsMagick (default: false)
184
}
185
```