0
# Vuetify
1

2
Vuetify is a comprehensive Vue.js component framework that implements Google's Material Design specification. It provides a rich collection of pre-built, customizable UI components including buttons, forms, navigation elements, data tables, and layout components, along with a powerful theming system that supports custom color palettes, typography scales, and responsive breakpoints.
3

4
## Package Information
5

6
- **Package Name**: vuetify
7
- **Package Type**: npm
8
- **Language**: TypeScript/Vue.js
9
- **Installation**: `npm install vuetify`
10

11
## Core Imports
12

13
```typescript
14
import { createVuetify } from 'vuetify';
15
import * as components from 'vuetify/components';
16
import * as directives from 'vuetify/directives';
17
```
18

19
For individual component imports:
20

21
```typescript
22
import { VApp, VBtn, VCard } from 'vuetify/components';
23
import { Ripple, ClickOutside } from 'vuetify/directives';
24
```
25

26
CommonJS (not recommended for Vue 3):
27

28
```javascript
29
const { createVuetify } = require('vuetify');
30
```
31

32
## Basic Usage
33

34
```typescript
35
import { createApp } from 'vue';
36
import { createVuetify } from 'vuetify';
37
import { VApp, VBtn } from 'vuetify/components';
38

39
// Create Vuetify instance
40
const vuetify = createVuetify({
41
  components: {
42
    VApp,
43
    VBtn,
44
  },
45
  theme: {
46
    defaultTheme: 'light'
47
  }
48
});
49

50
// Create and mount app
51
const app = createApp({
52
  template: `
53
    <v-app>
54
      <v-btn color="primary">Click me</v-btn>
55
    </v-app>
56
  `
57
});
58

59
app.use(vuetify);
60
app.mount('#app');
61
```
62

63
## Architecture
64

65
Vuetify is built around several key architectural patterns:
66

67
- **Plugin System**: Uses Vue 3's plugin architecture for framework integration via `createVuetify()`
68
- **Component Library**: 94+ Material Design components with consistent APIs and styling
69
- **Composables**: Reactive utilities for theme, display, locale, and other framework features
70
- **Directive System**: 8 built-in directives for common UI behaviors (ripple, click-outside, etc.)
71
- **Theming Engine**: Comprehensive theming system with Material Design color palettes and responsive breakpoints
72
- **Internationalization**: Built-in i18n support with 44+ locale modules
73
- **TypeScript Integration**: Full TypeScript support with comprehensive type definitions
74

75
## Capabilities
76

77
### Framework Core
78

79
Core Vuetify framework initialization and configuration functionality.
80

81
```typescript { .api }
82
function createVuetify(options?: VuetifyOptions): VuetifyInstance;
83

84
interface VuetifyOptions {
85
  aliases?: Record<string, any>;
86
  blueprint?: Blueprint;
87
  components?: Record<string, any>;
88
  date?: DateOptions;
89
  directives?: Record<string, any>;
90
  defaults?: DefaultsOptions;
91
  display?: DisplayOptions;
92
  goTo?: GoToOptions;
93
  theme?: ThemeOptions;
94
  icons?: IconOptions;
95
  locale?: LocaleOptions & RtlOptions;
96
  ssr?: SSROptions;
97
}
98

99
interface VuetifyInstance {
100
  install(app: App): void;
101
  unmount(): void;
102
  defaults: DefaultsInstance;
103
  display: DisplayInstance;
104
  theme: ThemeInstance;
105
  icons: IconSet;
106
  locale: LocaleInstance;
107
  date: DateInstance;
108
  goTo: GoToInstance;
109
}
110
```
111

112
[Framework Core](./framework-core.md)
113

114
### UI Components
115

116
Comprehensive collection of Material Design components for building user interfaces.
117

118
```typescript { .api }
119
// Core UI Components
120
const VApp: Component;
121
const VBtn: Component;
122
const VCard: Component;
123
const VTextField: Component;
124
const VSelect: Component;
125
const VCheckbox: Component;
126
const VIcon: Component;
127
const VImg: Component;
128

129
// Layout Components  
130
const VContainer: Component;
131
const VRow: Component;
132
const VCol: Component;
133
const VSheet: Component;
134
const VMain: Component;
135
```
136

137
[UI Components](./components.md)
138

139
### Navigation Components
140

141
Components for creating navigation structures and user flows.
142

143
```typescript { .api }
144
const VAppBar: Component;
145
const VNavigationDrawer: Component;
146
const VBottomNavigation: Component;
147
const VTabs: Component;
148
const VBreadcrumbs: Component;
149
const VMenu: Component;
150
const VToolbar: Component;
151
const VSystemBar: Component;
152
```
153

154
[Navigation Components](./navigation.md)
155

156
### Data Display Components
157

158
Components for displaying and managing data in various formats.
159

160
```typescript { .api }
161
const VDataTable: Component;
162
const VDataIterator: Component;
163
const VList: Component;
164
const VTable: Component;
165
const VTreeview: Component;
166
const VTimeline: Component;
167
const VVirtualScroll: Component;
168
const VInfiniteScroll: Component;
169
```
170

171
[Data Display](./data-display.md)
172

173
### Form Components
174

175
Input components and form management utilities.
176

177
```typescript { .api }
178
const VForm: Component;
179
const VTextField: Component;
180
const VTextarea: Component;
181
const VSelect: Component;
182
const VCombobox: Component;
183
const VAutocomplete: Component;
184
const VCheckbox: Component;
185
const VRadio: Component;
186
const VRadioGroup: Component;
187
const VSwitch: Component;
188
const VSlider: Component;
189
const VRangeSlider: Component;
190
const VFileInput: Component;
191
const VNumberInput: Component;
192
const VOtpInput: Component;
193
```
194

195
[Form Components](./forms.md)
196

197
### Feedback Components
198

199
Components for providing user feedback and displaying status.
200

201
```typescript { .api }
202
const VAlert: Component;
203
const VSnackbar: Component;
204
const VProgressLinear: Component;
205
const VProgressCircular: Component;
206
const VSkeletonLoader: Component;
207
const VTooltip: Component;
208
const VDialog: Component;
209
const VBottomSheet: Component;
210
```
211

212
[Feedback Components](./feedback.md)
213

214
### Directives
215

216
Vue directives for adding interactive behaviors to DOM elements.
217

218
```typescript { .api }
219
const ClickOutside: Directive;
220
const Intersect: Directive;
221
const Mutate: Directive;
222
const Resize: Directive;
223
const Ripple: Directive;
224
const Scroll: Directive;
225
const Touch: Directive;
226
const Tooltip: Directive;
227
```
228

229
[Directives](./directives.md)
230

231
### Composables
232

233
Reactive composition functions for accessing Vuetify's framework features.
234

235
```typescript { .api }
236
function useTheme(): ThemeInstance;
237
function useDisplay(): DisplayInstance;
238
function useLocale(): LocaleInstance;
239
function useRtl(): RtlInstance;
240
function useDefaults(): DefaultsInstance;
241
function useDate(): DateInstance;
242
function useGoTo(): GoToInstance;
243
function useLayout(): LayoutInstance;
244
function useHotkey(): HotkeyInstance;
245
```
246

247
[Composables](./composables.md)
248

249
### Theming System
250

251
Comprehensive theming and design system functionality.
252

253
```typescript { .api }
254
interface ThemeDefinition {
255
  dark: boolean;
256
  colors: Record<string, string>;
257
  variables: Record<string, string | number>;
258
}
259

260
interface ThemeOptions {
261
  defaultTheme?: string;
262
  themes?: Record<string, ThemeDefinition>;
263
  variations?: {
264
    colors: string[];
265
    lighten: number;
266
    darken: number;
267
  };
268
}
269
```
270

271
[Theming](./theming.md)
272

273
### Icon System
274

275
Icon management and display system with multiple icon set support.
276

277
```typescript { .api }
278
interface IconOptions {
279
  defaultSet?: string;
280
  aliases?: IconAliases;
281
  sets?: Record<string, IconSet>;
282
}
283

284
interface IconSet {
285
  component: Component;
286
  props?: IconProps;
287
}
288
```
289

290
[Icons](./icons.md)
291

292
### Internationalization
293

294
Locale and right-to-left text direction support.
295

296
```typescript { .api }
297
interface LocaleOptions {
298
  locale?: string;
299
  fallback?: string;
300
  messages?: Record<string, LocaleMessages>;
301
  rtl?: Record<string, boolean>;
302
}
303

304
interface LocaleInstance {
305
  current: Ref<string>;
306
  fallback: Ref<string>;
307
  messages: Ref<Record<string, LocaleMessages>>;
308
  t(key: string, ...params: unknown[]): string;
309
  n(value: number): string;
310
  provide: Record<string, any>;
311
}
312
```
313

314
[Internationalization](./internationalization.md)
315

316
### Lab Components
317

318
Experimental components for testing new features and functionality.
319

320
```typescript { .api }
321
const VCalendar: Component;
322
const VColorInput: Component;
323
const VDateInput: Component;
324
const VFileUpload: Component;
325
const VHotkey: Component;
326
const VPie: Component;
327
const VPullToRefresh: Component;
328
const VVideo: Component;
329
```
330

331
[Lab Components](./lab-components.md)
332

333
### Utilities
334

335
Helper functions and utility modules for common operations.
336

337
```typescript { .api }
338
// Color utilities
339
function parseColor(color: string): Record<string, number>;
340
function colorToHex(color: string): string;
341
function colorToRgb(color: string): { r: number; g: number; b: number };
342

343
// Animation utilities
344
const easings: Record<string, string>;
345
function genericComponent(options: ComponentOptions): Component;
346
```
347

348
[Utilities](./utilities.md)
349

350
### Transitions
351

352
Built-in transition components for smooth animations between states and elements.
353

354
```typescript { .api }
355
const VFadeTransition: Component;
356
const VSlideYTransition: Component;
357
const VSlideXTransition: Component;
358
const VExpandTransition: Component;
359
const VDialogTransition: Component;
360
const VScaleTransition: Component;
361
```
362

363
[Transitions](./transitions.md)
364

365
## Types
366

367
```typescript { .api }
368
// Core framework types
369
type Anchor = 
370
  | 'top' | 'bottom' | 'left' | 'right' 
371
  | 'center' | 'top left' | 'top right' 
372
  | 'bottom left' | 'bottom right';
373

374
interface JSXComponent {
375
  [key: string]: any;
376
}
377

378
// Display system types
379
interface DisplayBreakpoint {
380
  xs: boolean;
381
  sm: boolean;
382
  md: boolean;
383
  lg: boolean;
384
  xl: boolean;
385
  xxl: boolean;
386
}
387

388
interface DisplayThresholds {
389
  xs: number;
390
  sm: number;
391
  md: number;
392
  lg: number;
393
  xl: number;
394
  xxl: number;
395
}
396

397
// Validation types
398
type ValidationRule<T = any> = 
399
  | true 
400
  | string 
401
  | ((value: T) => true | string);
402

403
// Data table types
404
interface DataTableHeader {
405
  key: string;
406
  value?: string;
407
  title?: string;
408
  colspan?: number;
409
  rowspan?: number;
410
  fixed?: boolean;
411
  align?: 'start' | 'center' | 'end';
412
  width?: string | number;
413
  minWidth?: string | number;
414
  maxWidth?: string | number;
415
  sortable?: boolean;
416
  sort?: DataTableCompareFunction;
417
}
418

419
type DataTableCompareFunction<T = any> = (a: T, b: T) => number;
420

421
// Strategy types for nested components
422
type SelectStrategy = 'single-leaf' | 'leaf' | 'independent' | 'single-independent' | 'multiple-leaf' | 'multiple-independent';
423
type OpenStrategy = 'single' | 'multiple' | 'list';
424
type ActiveStrategy = 'single-leaf' | 'leaf' | 'independent' | 'single-independent';
425

426
// Location and scroll strategies for overlays
427
type LocationStrategyFunction = (
428
  data: StrategyProps,
429
  props: LocationStrategyData,
430
  contentStyles: Ref<Record<string, string>>
431
) => void;
432

433
type ScrollStrategyFunction = (
434
  data: StrategyProps,
435
  props: ScrollStrategyData
436
) => void;
437
```