0
# Vue Demi
1

2
Vue Demi (half in French) is a developing utility that allows you to write Universal Vue Libraries that work seamlessly across both Vue 2 and Vue 3 ecosystems. It provides intelligent version detection and API redirection, automatically exporting appropriate APIs from either vue@2 + @vue/composition-api or vue@3 based on the user's environment.
3

4
## Package Information
5

6
- **Package Name**: vue-demi
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install vue-demi`
10
- **Peer Dependencies**: `vue` (^2.6.0 || ^3.0.0), `@vue/composition-api` (^1.0.0-rc.1, optional)
11

12
## Core Imports
13

14
```typescript
15
import { ref, reactive, defineComponent, isVue2, isVue3 } from "vue-demi";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const { ref, reactive, defineComponent, isVue2, isVue3 } = require("vue-demi");
22
```
23

24
## Basic Usage
25

26
```typescript
27
import { ref, reactive, isVue2, isVue3, Vue2, install } from "vue-demi";
28

29
// Version detection
30
if (isVue2) {
31
  // Vue 2 specific logic
32
  console.log("Running on Vue 2");
33
} else {
34
  // Vue 3 specific logic  
35
  console.log("Running on Vue 3");
36
}
37

38
// Use Composition API
39
const count = ref(0);
40
const state = reactive({ name: "Vue Demi" });
41

42
// Access Vue 2 constructor if available
43
if (Vue2) {
44
  Vue2.config.productionTip = false;
45
}
46

47
// Ensure Composition API is installed (safe no-op in Vue 3)
48
install();
49
```
50

51
## Architecture
52

53
Vue Demi acts as an intelligent compatibility layer that:
54

55
- **Version Detection**: Automatically detects Vue version at runtime and build time
56
- **API Redirection**: Routes API calls to the appropriate Vue version implementation
57
- **Universal Export**: Re-exports all Vue APIs with compatibility shims where needed
58
- **Build-time Switching**: Uses postinstall hooks to copy version-specific implementations
59
- **Development Tools**: Provides CLI tools for manual version switching and testing
60

61
The library maintains three separate implementations (Vue 2, Vue 2.7, Vue 3) and automatically selects the correct one based on the detected Vue version.
62

63
## Capabilities
64

65
### Version Detection
66

67
Runtime flags and utilities for detecting the current Vue version and accessing version-specific APIs.
68

69
```typescript { .api }
70
declare const isVue2: boolean;
71
declare const isVue3: boolean;
72
declare const Vue2: typeof Vue | undefined; // any in Vue 3
73
declare const version: string; // Vue version string (Vue 2/2.7 only)
74
```
75

76
[Version Detection](./version-detection.md)
77

78
### Composition API Compatibility
79

80
Universal access to Composition API functions that work across Vue 2 (with @vue/composition-api) and Vue 3.
81

82
```typescript { .api }
83
declare function install(vue?: any): void; // Vue 2: (vue?: typeof Vue), Vue 3: () => void
84
declare function hasInjectionContext(): boolean;
85
```
86

87
All Vue Composition API functions are re-exported: `ref`, `reactive`, `computed`, `watchEffect`, `onMounted`, etc.
88

89
[Composition API](./composition-api.md)
90

91
### Reactive Utilities
92

93
Vue 2 style reactive utilities with Vue 3 compatibility polyfills for universal reactive data manipulation.
94

95
```typescript { .api }
96
export function set<T>(target: any, key: any, val: T): T;
97
export function del(target: any, key: any): void;
98
```
99

100
[Reactive Utilities](./reactive-utilities.md)
101

102
### CLI Tools
103

104
Command-line utilities for manual version switching and compatibility testing during development.
105

106
```bash
107
npx vue-demi-switch 2
108
npx vue-demi-switch 2.7
109
npx vue-demi-switch 3
110
npx vue-demi-fix  
111
```
112

113
[CLI Tools](./cli-tools.md)
114

115
## Types
116

117
```typescript { .api }
118
// Deprecated export for backward compatibility
119
declare const V: typeof Vue;
120

121
// Vue 2 specific Plugin type
122
type Plugin = PluginObject<any> | PluginFunction<any>;
123

124
// Vue 3 development feature not available in Vue 2
125
type DebuggerEvent = never;
126

127
// Vue 3 Mock Components (throw errors in Vue 2)
128
declare const Fragment: Component;
129
declare const Transition: Component;
130
declare const TransitionGroup: Component;
131
declare const Teleport: Component;
132
declare const Suspense: Component;
133
declare const KeepAlive: Component;
134

135
// Vue 2.7 specific functions
136
declare function warn(msg: string, vm?: Component | null): void; // Vue 2.7 only
137
declare function createApp(rootComponent: any, rootProps?: any): App; // Vue 2.7 only
138

139
// Vue 2.7 App interface for createApp polyfill
140
interface App<T = any> {
141
  config: VueConstructor['config'];
142
  use: VueConstructor['use'];
143
  mixin: VueConstructor['mixin'];
144
  component: VueConstructor['component'];
145
  directive(name: string): Directive | undefined;
146
  directive(name: string, directive: Directive): this;
147
  provide<T>(key: InjectionKey<T> | string, value: T): this;
148
  mount: Vue['$mount'];
149
  unmount: Vue['$destroy'];
150
}
151
```