0
# CLI Tools
1

2
Command-line utilities for manual version switching and compatibility testing during development. These tools allow developers to test their libraries against different Vue versions and resolve compatibility issues.
3

4
## Capabilities
5

6
### Version Switching
7

8
Manually switch between Vue 2 and Vue 3 compatibility modes for testing and development.
9

10
```bash { .api }
11
# Switch to Vue 2 compatibility mode
12
npx vue-demi-switch 2
13

14
# Switch to Vue 3 compatibility mode  
15
npx vue-demi-switch 3
16

17
# Switch to Vue 2.7 compatibility mode
18
npx vue-demi-switch 2.7
19
```
20

21
**Usage Examples:**
22

23
```bash
24
# Test library with Vue 2
25
npm install vue@2 @vue/composition-api
26
npx vue-demi-switch 2
27
npm test
28

29
# Test library with Vue 3
30
npm install vue@3
31
npx vue-demi-switch 3  
32
npm test
33

34
# Test library with Vue 2.7
35
npm install vue@2.7
36
npx vue-demi-switch 2.7
37
npm test
38
```
39

40
### Package Aliasing
41

42
Switch versions while using a custom package alias instead of 'vue'. This is useful when working with multiple Vue versions or custom builds.
43

44
```bash { .api }
45
# Switch to Vue 2 with custom alias
46
npx vue-demi-switch 2 vue2
47

48
# Switch to Vue 3 with custom alias
49
npx vue-demi-switch 3 vue3
50

51
# Switch to Vue 2.7 with custom alias  
52
npx vue-demi-switch 2.7 vue-compat
53
```
54

55
**Usage Examples:**
56

57
```bash
58
# Use Vue 2 aliased as 'vue2'
59
npm install vue2@npm:vue@2 @vue/composition-api
60
npx vue-demi-switch 2 vue2
61

62
# Use Vue 3 aliased as 'vue3'
63
npm install vue3@npm:vue@3
64
npx vue-demi-switch 3 vue3
65
```
66

67
After running with an alias, vue-demi will import from the specified package:
68

69
```typescript
70
// Generated code will use the alias
71
import * as Vue from 'vue2'; // instead of 'vue'
72

73
var isVue2 = true;
74
var isVue3 = false;
75
var Vue2 = Vue;
76

77
export * from 'vue2'; // instead of 'vue'
78
```
79

80
### Automatic Fix
81

82
Manually trigger the postinstall script to fix vue-demi configuration based on the currently installed Vue version.
83

84
```bash { .api }
85
# Manually run the postinstall fix
86
npx vue-demi-fix
87
```
88

89
This command:
90
1. Detects the installed Vue version
91
2. Automatically switches to the appropriate compatibility mode
92
3. Updates the vue-demi files accordingly
93

94
**Usage Examples:**
95

96
```bash
97
# After installing Vue dependencies
98
npm install vue@3
99
npx vue-demi-fix  # Automatically switches to Vue 3 mode
100

101
# After changing Vue version
102
npm uninstall vue@3
103
npm install vue@2 @vue/composition-api
104
npx vue-demi-fix  # Automatically switches to Vue 2 mode
105

106
# Fix configuration issues
107
npx vue-demi-fix  # Resets to correct configuration
108
```
109

110
### Development Workflow
111

112
Common development workflows using the CLI tools.
113

114
**Cross-Version Testing:**
115

116
```bash
117
#!/bin/bash
118
# test-all-versions.sh
119

120
echo "Testing with Vue 2..."
121
npm install vue@2 @vue/composition-api
122
npx vue-demi-switch 2
123
npm test
124

125
echo "Testing with Vue 2.7..."
126
npm install vue@2.7
127
npx vue-demi-switch 2.7
128
npm test
129

130
echo "Testing with Vue 3..."
131
npm install vue@3
132
npx vue-demi-switch 3
133
npm test
134

135
echo "All tests completed!"
136
```
137

138
**Package.json Scripts:**
139

140
```json
141
{
142
  "scripts": {
143
    "test:vue2": "npm install vue@2 @vue/composition-api && npx vue-demi-switch 2 && npm test",
144
    "test:vue2.7": "npm install vue@2.7 && npx vue-demi-switch 2.7 && npm test",
145
    "test:vue3": "npm install vue@3 && npx vue-demi-switch 3 && npm test",
146
    "test:all": "npm run test:vue2 && npm run test:vue2.7 && npm run test:vue3",
147
    "fix": "npx vue-demi-fix"
148
  }
149
}
150
```
151

152
**CI/CD Integration:**
153

154
```yaml
155
# .github/workflows/test.yml
156
name: Test
157
on: [push, pull_request]
158
jobs:
159
  test:
160
    runs-on: ubuntu-latest
161
    strategy:
162
      matrix:
163
        vue-version: [2, 2.7, 3]
164
        
165
    steps:
166
      - uses: actions/checkout@v2
167
      - uses: actions/setup-node@v2
168
        with:
169
          node-version: '16'
170
          
171
      - name: Install Vue ${{ matrix.vue-version }}
172
        run: |
173
          if [ "${{ matrix.vue-version }}" = "2" ]; then
174
            npm install vue@2 @vue/composition-api
175
          elif [ "${{ matrix.vue-version }}" = "2.7" ]; then
176
            npm install vue@2.7
177
          else  
178
            npm install vue@3
179
          fi
180
          
181
      - name: Switch Vue Demi
182
        run: npx vue-demi-switch ${{ matrix.vue-version }}
183
        
184
      - name: Run tests
185
        run: npm test
186
```
187

188
### Troubleshooting
189

190
Common issues and solutions when using CLI tools.
191

192
**Permission Issues:**
193

194
```bash
195
# If npx fails due to permissions
196
npm install -g vue-demi
197
vue-demi-switch 3
198

199
# Or use local installation
200
./node_modules/.bin/vue-demi-switch 3
201
```
202

203
**Version Detection Issues:**
204

205
```bash
206
# Clear npm cache and reinstall
207
npm cache clean --force
208
rm -rf node_modules package-lock.json
209
npm install
210
npx vue-demi-fix
211
```
212

213
**Multiple Vue Versions:**
214

215
```bash
216
# Remove conflicting versions
217
npm uninstall vue @vue/composition-api
218
# Install desired version
219
npm install vue@3
220
npx vue-demi-fix
221
```
222

223
### Advanced Usage
224

225
**Custom Build Integration:**
226

227
```javascript
228
// build-script.js
229
const { exec } = require('child_process');
230

231
const switchVueVersion = (version) => {
232
  return new Promise((resolve, reject) => {
233
    exec(`npx vue-demi-switch ${version}`, (error, stdout, stderr) => {
234
      if (error) reject(error);
235
      else resolve(stdout);
236
    });
237
  });
238
};
239

240
// Build for all Vue versions
241
async function buildAll() {
242
  for (const version of ['2', '2.7', '3']) {
243
    console.log(`Building for Vue ${version}...`);
244
    await switchVueVersion(version);
245
    // Run your build process here
246
  }
247
}
248
```
249

250
**Configuration Validation:**
251

252
```javascript
253
// validate-config.js
254
const fs = require('fs');
255
const path = require('path');
256

257
const libPath = path.join(__dirname, 'node_modules/vue-demi/lib');
258
const indexFile = path.join(libPath, 'index.mjs');
259

260
if (fs.existsSync(indexFile)) {
261
  const content = fs.readFileSync(indexFile, 'utf-8');
262
  
263
  if (content.includes('isVue2 = true')) {
264
    console.log('Vue Demi configured for Vue 2');
265
  } else if (content.includes('isVue3 = true')) {
266
    console.log('Vue Demi configured for Vue 3');
267
  }
268
} else {
269
  console.log('Vue Demi not properly installed');
270
  process.exit(1);
271
}
272
```