@@ -17,6 +17,7 @@ $ cd <project-folder>
17
17
$ npm install --save @vue/devtools nativescript-toasty nativescript-socketio nativescript-vue-devtools
18
18
```
19
19
20
+ <!--
20
21
## (Optional) Step 2: Install Vue DevTools globally
21
22
22
23
To easily access Vue DevTools, you can install the package globally.
@@ -28,8 +29,9 @@ $ npm install -g @vue/devtools
28
29
```
29
30
30
31
After the installation is complete, you can run the `vue-devtools` command from any directory on your development machine.
32
+ -->
31
33
32
- ## Step 3 : Install the ` nativescript-vue-devtools ` plugin in your app
34
+ ## Step 2 : Install the ` nativescript-vue-devtools ` plugin in your app
33
35
34
36
To connect your application to the Vue DevTools, you need to modify ` main.js ` (or ` main.ts ` ).
35
37
@@ -49,20 +51,19 @@ If you are using a real device instead of an emulator, set the `host` configurat
49
51
Vue .use (VueDevtools, { host: ' 192.168.1.42' })
50
52
```
51
53
52
- ## Step 4 : Run Vue DevTools
54
+ ## Step 3 : Run Vue DevTools
53
55
54
- Run the following command to launch the Vue DevTools:
56
+ Run the following command in a new terminal to launch Vue DevTools:
55
57
56
58
``` shell
57
- $ # if installed globally
58
- $ vue-devtools
59
- $ # or
60
59
$ npx vue-devtools
61
60
```
62
61
63
- ## Step 5: Rebuild and run your app
62
+ A window should open. Instructions shown in this window are not required in a NativeScript-Vue application, so please ignore them.
64
63
65
- Run the following command:
64
+ ## Step 4: Rebuild and run your app
65
+
66
+ Run the following commands:
66
67
67
68
``` shell
68
69
$ rm -rf platforms
@@ -72,3 +73,18 @@ $ tns run ios
72
73
```
73
74
74
75
If your machine and app are configured properly, you should see a few components in the component tree of Vue DevTools.
76
+
77
+ # Troubleshooting
78
+
79
+ On Android API level 28 and above, cleartext traffic is disabled by default. In order to connect to Vue DevTools you will have to add
80
+ ` android:usesCleartextTraffic="true" ` to the ` App_Resources/Android/src/main/AndroidManifest.xml ` file:
81
+
82
+ ``` xml
83
+ <application
84
+ <!-- ... -->
85
+ android:usesCleartextTraffic="true"
86
+ <!-- ... -->
87
+ </application >
88
+ ```
89
+
90
+ After making the change, delete the ` platforms ` folder, and rebuild the app. Vue DevTools should now connect automatically.
0 commit comments