0
# Global API Methods
1

2
Vue 2 global API methods including plugin system, component registration, directive registration, and deprecated utilities for maintaining backward compatibility during migration.
3

4
## Capabilities
5

6
### Plugin System
7

8
#### use Method
9

10
Installs plugins into the Vue instance.
11

12
```javascript { .api }
13
/**
14
 * Install a plugin into Vue
15
 * @param plugin - Plugin object with install method
16
 * @param options - Plugin options
17
 * @returns Vue constructor for chaining
18
 */
19
use<Options>(plugin: Plugin<Options>, ...options: Options[]): CompatVue;
20
use<Options>(plugin: Plugin<Options>, options: Options): CompatVue;
21

22
interface Plugin<Options = any> {
23
  install(app: CompatVue, ...options: Options[]): void;
24
}
25
```
26

27
**Usage Example:**
28

29
```javascript
30
import Vue from "@vue/compat";
31

32
// Install plugin with options
33
Vue.use(MyPlugin, { 
34
  option1: true, 
35
  option2: "value" 
36
});
37

38
// Plugin definition
39
const MyPlugin = {
40
  install(Vue, options) {
41
    Vue.prototype.$myMethod = function() {
42
      // Plugin functionality
43
    };
44
  }
45
};
46
```
47

48
### Component Registration
49

50
#### component Method
51

52
Registers or retrieves global components.
53

54
```javascript { .api }
55
/**
56
 * Get registered global component
57
 * @param name - Component name
58
 * @returns Component definition or undefined
59
 */
60
component(name: string): Component | undefined;
61

62
/**
63
 * Register global component
64
 * @param name - Component name
65
 * @param component - Component definition
66
 * @returns Vue constructor for chaining
67
 */
68
component(name: string, component: Component): CompatVue;
69
```
70

71
**Usage Examples:**
72

73
```javascript
74
// Register global component
75
Vue.component('my-component', {
76
  template: '<div>My Component</div>'
77
});
78

79
// Retrieve component
80
const MyComponent = Vue.component('my-component');
81
```
82

83
### Directive Registration
84

85
#### directive Method
86

87
Registers or retrieves global directives.
88

89
```javascript { .api }
90
/**
91
 * Get registered global directive
92
 * @param name - Directive name
93
 * @returns Directive definition or undefined
94
 */
95
directive<T = any, V = any>(name: string): Directive<T, V> | undefined;
96

97
/**
98
 * Register global directive
99
 * @param name - Directive name
100
 * @param directive - Directive definition
101
 * @returns Vue constructor for chaining
102
 */
103
directive<T = any, V = any>(name: string, directive: Directive<T, V>): CompatVue;
104

105
interface Directive<T = any, V = any> {
106
  beforeMount?(el: T, binding: DirectiveBinding<V>): void;
107
  mounted?(el: T, binding: DirectiveBinding<V>): void;
108
  beforeUpdate?(el: T, binding: DirectiveBinding<V>): void;
109
  updated?(el: T, binding: DirectiveBinding<V>): void;
110
  beforeUnmount?(el: T, binding: DirectiveBinding<V>): void;
111
  unmounted?(el: T, binding: DirectiveBinding<V>): void;
112
}
113
```
114

115
**Usage Example:**
116

117
```javascript
118
// Register global directive
119
Vue.directive('focus', {
120
  mounted(el) {
121
    el.focus();
122
  }
123
});
124

125
// Use in template: <input v-focus>
126
```
127

128
### Global Mixins
129

130
#### mixin Method
131

132
Applies a mixin globally to all components.
133

134
```javascript { .api }
135
/**
136
 * Apply a global mixin to all components
137
 * @param mixin - Mixin object with component options
138
 * @returns Vue constructor for chaining
139
 */
140
mixin(mixin: ComponentOptions): CompatVue;
141
```
142

143
**Usage Example:**
144

145
```javascript
146
// Apply global mixin
147
Vue.mixin({
148
  created() {
149
    console.log('Component created via global mixin');
150
  },
151
  methods: {
152
    $log(message) {
153
      console.log(`[${this.$options.name}] ${message}`);
154
    }
155
  }
156
});
157
```
158

159
### Template Compilation
160

161
#### compile Method
162

163
Compiles template strings into render functions.
164

165
```javascript { .api }
166
/**
167
 * Compile template string into render function
168
 * @param template - Template string or DOM element
169
 * @returns Compiled render function
170
 */
171
compile(template: string): RenderFunction;
172

173
interface RenderFunction {
174
  (context: any): VNode;
175
  _rc?: boolean; // Runtime compiled marker
176
}
177
```
178

179
**Usage Example:**
180

181
```javascript
182
const render = Vue.compile('<div>{{ message }}</div>');
183

184
// Use compiled render function
185
const component = new Vue({
186
  data() {
187
    return { message: 'Hello' };
188
  },
189
  render
190
});
191
```
192

193
### Version Information
194

195
#### version Property
196

197
Returns the Vue version string.
198

199
```javascript { .api }
200
/**
201
 * Vue version string
202
 */
203
version: string;
204
```
205

206
### Utility Properties
207

208
#### nextTick Method
209

210
Access to Vue's nextTick utility for DOM updates.
211

212
```javascript { .api }
213
/**
214
 * Next tick utility for DOM updates
215
 */
216
nextTick: typeof nextTick;
217
```
218

219
#### config Property
220

221
Global configuration object combining Vue 3 app config and legacy Vue 2 config.
222

223
```javascript { .api }
224
/**
225
 * Global configuration object
226
 */
227
config: AppConfig & LegacyConfig;
228
```
229

230
## Deprecated Global APIs
231

232
These APIs are maintained for backward compatibility but deprecated in Vue 3:
233

234
### extend Method
235

236
Creates a "subclass" of the base Vue constructor.
237

238
```javascript { .api }
239
/**
240
 * Create a subclass of Vue constructor
241
 * @param options - Component options for the subclass
242
 * @returns Extended Vue constructor
243
 * @deprecated Use defineComponent or extends option instead
244
 */
245
extend(options?: ComponentOptions): CompatVue;
246
```
247

248
**Usage Example:**
249

250
```javascript
251
// Vue 2 pattern (deprecated)
252
const MyComponent = Vue.extend({
253
  data() {
254
    return { count: 0 };
255
  },
256
  template: '<div>{{ count }}</div>'
257
});
258

259
// Vue 3 equivalent
260
import { defineComponent } from 'vue';
261
const MyComponent = defineComponent({
262
  data() {
263
    return { count: 0 };
264
  },
265
  template: '<div>{{ count }}</div>'
266
});
267
```
268

269
### set Method
270

271
Reactively sets a property on an object.
272

273
```javascript { .api }
274
/**
275
 * Reactively set a property on an object
276
 * @param target - Target object
277
 * @param key - Property key
278
 * @param value - Value to set
279
 * @deprecated No longer needed in Vue 3 reactivity system
280
 */
281
set(target: any, key: PropertyKey, value: any): void;
282
```
283

284
### delete Method
285

286
Reactively deletes a property from an object.
287

288
```javascript { .api }
289
/**
290
 * Reactively delete a property from an object
291
 * @param target - Target object
292
 * @param key - Property key to delete
293
 * @deprecated No longer needed in Vue 3 reactivity system
294
 */
295
delete(target: any, key: PropertyKey): void;
296
```
297

298
### observable Method
299

300
Makes an object reactive.
301

302
```javascript { .api }
303
/**
304
 * Make an object reactive
305
 * @deprecated Use reactive() from Vue 3 instead
306
 */
307
observable: typeof reactive;
308
```
309

310
**Migration Example:**
311

312
```javascript
313
// Vue 2 pattern (still works in compat)
314
const state = Vue.observable({ count: 0 });
315

316
// Vue 3 equivalent
317
import { reactive } from 'vue';
318
const state = reactive({ count: 0 });
319
```
320

321
### filter Method
322

323
Register or retrieve filters (deprecated and non-functional).
324

325
```javascript { .api }
326
/**
327
 * Register or retrieve filters
328
 * @param name - Filter name
329
 * @param arg - Filter function (when registering)
330
 * @returns null (filters are removed in Vue 3)
331
 * @deprecated Filters are removed in Vue 3
332
 */
333
filter(name: string, arg?: any): null;
334
```
335

336
## Internal Properties
337

338
These properties exist for compatibility but should not be used in application code:
339

340
### cid Property
341

342
Internal component identifier.
343

344
```javascript { .api }
345
/**
346
 * Internal component identifier
347
 */
348
cid: number;
349
```
350

351
### options Property
352

353
Global options object.
354

355
```javascript { .api }
356
/**
357
 * Global options object
358
 */
359
options: ComponentOptions;
360
```
361

362
### util Property
363

364
Internal utilities (deprecated and unavailable).
365

366
```javascript { .api }
367
/**
368
 * Internal utilities
369
 * @deprecated Private APIs are no longer available
370
 */
371
util: any;
372
```
373

374
### super Property
375

376
Reference to parent constructor.
377

378
```javascript { .api }
379
/**
380
 * Reference to parent constructor
381
 */
382
super: CompatVue;
383
```