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
```