|
1 | 1 | ---
|
2 |
| -title: Using Vue Devtools |
3 |
| -contributors: [rigor789] |
| 2 | +title: Using Vue DevTools |
| 3 | +contributors: [rigor789, ikoevska] |
4 | 4 | outdated: false
|
5 | 5 | ---
|
6 | 6 |
|
7 |
| -To debug a NativeScript-Vue application with Vue Devtools you need to use the standalone version of Vue Devtools. |
| 7 | +You can debug NativeScript-Vue applications using the standalone version of Vue DevTools. |
8 | 8 |
|
9 |
| -To make integration easier we have published [`nativescript-vue-devtools`](https://github.com/nativescript-vue/nativescript-vue-devtools) which takes care of connecting to Vue Devtools. |
| 9 | +To simplify the integration, you can use the [`nativescript-vue-devtools`](https://github.com/nativescript-vue/nativescript-vue-devtools) plugin which takes care of connecting your app to Vue DevTools. |
10 | 10 |
|
11 |
| -** 1. Install dependencies ** |
| 11 | +## Step 1: Install dependencies |
| 12 | + |
| 13 | +Run the following command: |
12 | 14 |
|
13 | 15 | ```shell
|
14 | 16 | $ cd <project-folder>
|
15 | 17 | $ npm install --save @vue/devtools@beta nativescript-toast nativescript-socket.io nativescript-vue-devtools
|
16 | 18 | ```
|
17 | 19 |
|
18 |
| -** 2. Optionally install Vue Devtools globally ** |
| 20 | +## (Optional) Step 2: Install Vue DevTools globally |
| 21 | + |
| 22 | +To easily access Vue DevTools, you can install the package globally. |
19 | 23 |
|
20 |
| -If you'd like to easily access Vue Devtools, it's a good idea to install it globally. |
| 24 | +Run the following command: |
21 | 25 |
|
22 | 26 | ```shell
|
23 | 27 | $ npm install -g @vue/devtools@beta
|
24 | 28 | ```
|
25 | 29 |
|
26 |
| -This will allow you to run the `vue-devtools` command regardless of the current directory you are in. |
| 30 | +After the installation is complete, you can run the `vue-devtools` command from any directory on your development machine. |
| 31 | + |
| 32 | +## Step 3: Install the `nativescript-vue-devtools` plugin in your app |
27 | 33 |
|
28 |
| -** 3. Install the `nativescript-vue-devtools` plugin into your app ** |
| 34 | +To connect your application to the Vue DevTools, you need to modify `main.js`. |
29 | 35 |
|
30 |
| -To connect your application to the devtools, you will have to make a slight modification to your `main.js`. |
31 |
| -Import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()` |
| 36 | +In your code, import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()`. |
32 | 37 |
|
33 |
| -```js |
| 38 | +```JavaScript |
34 | 39 | import Vue from 'nativescript-vue'
|
35 | 40 | import VueDevtools from 'nativescript-vue-devtools'
|
36 | 41 |
|
37 | 42 | Vue.use(VueDevtools)
|
38 | 43 | ```
|
39 | 44 |
|
40 |
| -*Optional*: If you use a real device instead of an emulator, it will not be able to connect to your host machine by default. You will need to set the host config option to the IP of your dev machine: |
41 |
| -```js |
| 45 | +If you are using a real device instead of an emulator, set the `host` configuration option to point to the IP of your development machine. Otherwise, your device will not be able to connect to your host machine. |
| 46 | + |
| 47 | +```JavaScript |
42 | 48 | Vue.use(VueDevtools, { host: '192.168.1.42' })
|
43 | 49 | ```
|
44 | 50 |
|
45 |
| -** 4. Run Vue Devtools ** |
| 51 | +## Step 4: Run Vue DevTools |
| 52 | + |
| 53 | +Run the following command to launch the Vue DevTools: |
46 | 54 |
|
47 | 55 | ```shell
|
48 | 56 | $ # if installed globally
|
|
51 | 59 | $ npx vue-devtools
|
52 | 60 | ```
|
53 | 61 |
|
54 |
| -** 5. Rebuild and run your app ** |
| 62 | +## Step 5: Rebuild and run your app |
| 63 | + |
| 64 | +Run the following command: |
55 | 65 |
|
56 | 66 | ```shell
|
57 | 67 | $ rm -rf platforms
|
|
60 | 70 | $ tns run ios --bundle
|
61 | 71 | ```
|
62 | 72 |
|
63 |
| -If everything went well, you should see a few components in the component tree of Vue Devtools. |
| 73 | +If your machine and app are configured properly, you should see a few components in the component tree of Vue DevTools. |
0 commit comments