0
# Component Importing
1

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

4
## Capabilities
5

6
### VuetifyLoaderPlugin Class
7

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

10
```javascript { .api }
11
/**
12
 * Webpack plugin for automatic Vuetify component imports
13
 * @param {VuetifyLoaderPluginOptions} options - Configuration options
14
 */
15
class VuetifyLoaderPlugin {
16
  constructor(options = {});
17
  
18
  /**
19
   * Apply the plugin to webpack compiler
20
   * @param {webpack.Compiler} compiler - Webpack compiler instance
21
   */
22
  apply(compiler);
23
}
24

25
interface VuetifyLoaderPluginOptions {
26
  /** Array of custom matcher functions for non-Vuetify components */
27
  match?: MatcherFunction[];
28
}
29
```
30

31
**Usage Example:**
32

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

37
module.exports = {
38
  plugins: [
39
    new VuetifyLoaderPlugin({
40
      match: [
41
        // Custom matcher for project components
42
        (originalTag, { kebabTag, camelTag, path, component }) => {
43
          if (kebabTag.startsWith('core-')) {
44
            return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`];
45
          }
46
        }
47
      ]
48
    })
49
  ]
50
};
51
```
52

53
### Vuetify Loader Function
54

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

57
```javascript { .api }
58
/**
59
 * Main webpack loader function for automatic component imports
60
 * @param {string} content - Vue component source code
61
 * @param {object} sourceMap - Source map object
62
 * @returns {void} - Calls this.callback with processed content
63
 */
64
function vuetifyLoader(content, sourceMap);
65
```
66

67
**Process Flow:**
68

69
1. Parse Vue component template using vue-template-compiler
70
2. Extract all HTML tags from the template
71
3. Match tags against Vuetify component patterns
72
4. Generate import statements and component registrations
73
5. Inject generated code into the component
74

75
### Custom Matcher Functions
76

77
Define custom component matching logic for project-specific components.
78

79
```javascript { .api }
80
/**
81
 * Custom matcher function for component identification
82
 * @param {string} originalTag - Original tag name from template
83
 * @param {MatcherContext} context - Additional context data
84
 * @returns {[string, string] | undefined} - [componentName, importStatement] or undefined
85
 */
86
type MatcherFunction = (
87
  originalTag: string,
88
  context: MatcherContext
89
) => [string, string] | undefined;
90

91
interface MatcherContext {
92
  /** Tag name in kebab-case format */
93
  kebabTag: string;
94
  /** Tag name in PascalCase format */
95
  camelTag: string;
96
  /** Relative path to current Vue file */
97
  path: string;
98
  /** Parsed Vue component descriptor */
99
  component: ComponentDescriptor;
100
}
101
```
102

103
**Usage Example:**
104

105
```javascript
106
// Custom matcher for UI library components
107
function customMatcher(originalTag, { kebabTag, camelTag, path, component }) {
108
  if (kebabTag.startsWith('ui-')) {
109
    const componentName = camelTag.replace('Ui', '');
110
    return [componentName, `import { ${componentName} } from '@/ui-library'`];
111
  }
112
  
113
  if (kebabTag.startsWith('icon-')) {
114
    return [camelTag, `import ${camelTag} from '@/icons/${camelTag}.vue'`];
115
  }
116
  
117
  return undefined;
118
}
119
```
120

121
### Built-in Vuetify Matcher
122

123
Internal matcher that identifies standard Vuetify components.
124

125
```javascript { .api }
126
/**
127
 * Built-in matcher for Vuetify components
128
 * @param {string} _ - Unused original tag parameter
129
 * @param {object} context - Matcher context with kebabTag and camelTag
130
 * @returns {[string, string] | undefined} - Component match result
131
 */
132
function vuetifyMatcher(_, { kebabTag, camelTag });
133
```
134

135
**Behavior:**
136

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

142
### Utility Functions
143

144
String transformation utilities used by the loader for tag processing.
145

146
```javascript { .api }
147
/**
148
 * Convert kebab-case string to camelCase
149
 * @param {string} str - Input string in kebab-case
150
 * @returns {string} - camelCase string
151
 */
152
function camelize(str);
153

154
/**
155
 * Capitalize first letter of string
156
 * @param {string} str - Input string
157
 * @returns {string} - String with capitalized first letter
158
 */
159
function capitalize(str);
160

161
/**
162
 * Convert camelCase string to kebab-case
163
 * @param {string} str - Input string in camelCase
164
 * @returns {string} - kebab-case string
165
 */
166
function hyphenate(str);
167
```
168

169
## Integration Requirements
170

171
### Webpack Configuration
172

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

175
```javascript
176
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
177

178
module.exports = {
179
  module: {
180
    rules: [
181
      {
182
        test: /\.vue$/,
183
        loader: 'vue-loader'
184
      }
185
    ]
186
  },
187
  plugins: [
188
    new VuetifyLoaderPlugin()
189
  ]
190
};
191
```
192

193
### Dependencies
194

195
- **vue-template-compiler**: Required for parsing Vue component templates
196
- **vuetify**: Required for component definitions and imports
197
- **webpack**: Required for loader and plugin functionality
198

199
## Error Handling
200

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