0
# Framework Core
1

2
Core Vuetify framework initialization, configuration, and plugin functionality for Vue 3 applications.
3

4
## Capabilities
5

6
### Framework Initialization
7

8
Creates and configures a Vuetify instance for use with Vue applications.
9

10
```typescript { .api }
11
/**
12
 * Creates a Vuetify instance with the specified configuration
13
 * @param options - Configuration options for the Vuetify instance
14
 * @returns Configured Vuetify instance with install method
15
 */
16
function createVuetify(options?: VuetifyOptions): VuetifyInstance;
17

18
interface VuetifyOptions {
19
  /** Component aliases for custom component names */
20
  aliases?: Record<string, any>;
21
  /** Blueprint configuration for pre-defined theme and component settings */
22
  blueprint?: Blueprint;
23
  /** Components to register globally */
24
  components?: Record<string, any>;
25
  /** Date adapter configuration */
26
  date?: DateOptions;
27
  /** Directives to register globally */
28
  directives?: Record<string, any>;
29
  /** Default component prop values */
30
  defaults?: DefaultsOptions;
31
  /** Display/responsive configuration */
32
  display?: DisplayOptions;
33
  /** Smooth scrolling configuration */
34
  goTo?: GoToOptions;
35
  /** Theme configuration */
36
  theme?: ThemeOptions;
37
  /** Icon system configuration */
38
  icons?: IconOptions;
39
  /** Locale and RTL configuration */
40
  locale?: LocaleOptions & RtlOptions;
41
  /** Server-side rendering configuration */
42
  ssr?: SSROptions;
43
}
44

45
interface VuetifyInstance {
46
  /** Vue plugin install method */
47
  install(app: App): void;
48
  /** Cleanup method for unmounting */
49
  unmount(): void;
50
  /** Component defaults manager */
51
  defaults: DefaultsInstance;
52
  /** Display/responsive utilities */
53
  display: DisplayInstance;
54
  /** Theme management instance */
55
  theme: ThemeInstance;
56
  /** Icon system instance */
57
  icons: IconSet;
58
  /** Locale management instance */
59
  locale: LocaleInstance;
60
  /** Date handling instance */
61
  date: DateInstance;
62
  /** Smooth scrolling instance */
63
  goTo: GoToInstance;
64
}
65
```
66

67
**Usage Examples:**
68

69
```typescript
70
import { createApp } from 'vue';
71
import { createVuetify } from 'vuetify';
72
import * as components from 'vuetify/components';
73
import * as directives from 'vuetify/directives';
74

75
// Basic setup
76
const vuetify = createVuetify({
77
  components,
78
  directives,
79
});
80

81
const app = createApp(App);
82
app.use(vuetify);
83

84
// Custom configuration
85
const vuetify = createVuetify({
86
  theme: {
87
    defaultTheme: 'dark',
88
    themes: {
89
      light: {
90
        colors: {
91
          primary: '#1976D2',
92
          secondary: '#424242',
93
          accent: '#82B1FF',
94
        }
95
      }
96
    }
97
  },
98
  display: {
99
    mobileBreakpoint: 'sm',
100
    thresholds: {
101
      xs: 0,
102
      sm: 600,
103
      md: 960,
104
      lg: 1264,
105
      xl: 1904,
106
    },
107
  },
108
  icons: {
109
    defaultSet: 'mdi',
110
  },
111
});
112
```
113

114
### Blueprint System
115

116
Pre-configured theme and component configurations following Material Design specifications.
117

118
```typescript { .api }
119
/**
120
 * Blueprint interface for pre-defined configurations
121
 * Extends VuetifyOptions without the blueprint property to prevent recursion
122
 */
123
interface Blueprint extends Omit<VuetifyOptions, 'blueprint'> {}
124

125
// Available blueprints
126
const md1: Blueprint;  // Material Design 1
127
const md2: Blueprint;  // Material Design 2  
128
const md3: Blueprint;  // Material Design 3
129
```
130

131
**Usage Examples:**
132

133
```typescript
134
import { createVuetify } from 'vuetify';
135
import { md3 } from 'vuetify/blueprints';
136

137
// Using Material Design 3 blueprint
138
const vuetify = createVuetify({
139
  blueprint: md3,
140
  // Override specific blueprint settings
141
  theme: {
142
    defaultTheme: 'light',
143
  },
144
});
145
```
146

147
### Version Information
148

149
Framework version information for compatibility checking.
150

151
```typescript { .api }
152
/** Current Vuetify version string */
153
const version: string;
154

155
/** Version property on createVuetify function */
156
createVuetify.version: string;
157
```
158

159
**Usage Examples:**
160

161
```typescript
162
import { createVuetify, version } from 'vuetify';
163

164
console.log('Vuetify version:', version); // "3.9.5"
165
console.log('Function version:', createVuetify.version); // "3.9.5"
166
```
167

168
### Injection Symbols
169

170
Vue injection keys for accessing Vuetify services in components.
171

172
```typescript { .api }
173
/** Injection keys for Vuetify services */
174
const DefaultsSymbol: InjectionKey<DefaultsInstance>;
175
const DisplaySymbol: InjectionKey<DisplayInstance>;
176
const ThemeSymbol: InjectionKey<ThemeInstance>;
177
const IconSymbol: InjectionKey<IconSet>;
178
const LocaleSymbol: InjectionKey<LocaleInstance>;
179
const DateAdapterSymbol: InjectionKey<DateInstance>;
180
const DateOptionsSymbol: InjectionKey<DateOptions>;
181
const GoToSymbol: InjectionKey<GoToInstance>;
182
```
183

184
**Usage Examples:**
185

186
```typescript
187
import { inject } from 'vue';
188
import { ThemeSymbol, DisplaySymbol } from 'vuetify';
189

190
export default defineComponent({
191
  setup() {
192
    const theme = inject(ThemeSymbol);
193
    const display = inject(DisplaySymbol);
194
    
195
    return {
196
      theme,
197
      display,
198
    };
199
  },
200
});
201
```
202

203
## Types
204

205
```typescript { .api }
206
// Vue app instance type
207
interface App {
208
  use(plugin: any, ...options: any[]): App;
209
  component(name: string, component: any): App;
210
  directive(name: string, directive: any): App;
211
  provide<T>(key: InjectionKey<T> | string, value: T): App;
212
  mount(rootContainer: any): any;
213
  onUnmount(callback: () => void): void;
214
}
215

216
// Vue injection key type
217
interface InjectionKey<T> extends Symbol {}
218

219
// Component public instance type
220
interface ComponentPublicInstance {
221
  $: any;
222
}
223
```