Skip to content

Proofreading DevTools guide #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 16, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 27 additions & 17 deletions content/docs/en/getting-started/5-vue-devtools.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,56 @@
---
title: Using Vue Devtools
contributors: [rigor789]
title: Using Vue DevTools
contributors: [rigor789, ikoevska]
outdated: false
---

To debug a NativeScript-Vue application with Vue Devtools you need to use the standalone version of Vue Devtools.
You can debug NativeScript-Vue applications using the standalone version of Vue DevTools.

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

** 1. Install dependencies **
## Step 1: Install dependencies

Run the following command:

```shell
$ cd <project-folder>
$ npm install --save @vue/devtools@beta nativescript-toast nativescript-socket.io nativescript-vue-devtools
```

** 2. Optionally install Vue Devtools globally **
## (Optional) Step 2: Install Vue DevTools globally

To easily access Vue DevTools, you can install the package globally.

If you'd like to easily access Vue Devtools, it's a good idea to install it globally.
Run the following command:

```shell
$ npm install -g @vue/devtools@beta
```

This will allow you to run the `vue-devtools` command regardless of the current directory you are in.
After the installation is complete, you can run the `vue-devtools` command from any directory on your development machine.

## Step 3: Install the `nativescript-vue-devtools` plugin in your app

** 3. Install the `nativescript-vue-devtools` plugin into your app **
To connect your application to the Vue DevTools, you need to modify `main.js`.

To connect your application to the devtools, you will have to make a slight modification to your `main.js`.
Import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()`
In your code, import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()`.

```js
```JavaScript
import Vue from 'nativescript-vue'
import VueDevtools from 'nativescript-vue-devtools'

Vue.use(VueDevtools)
```

*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:
```js
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.

```JavaScript
Vue.use(VueDevtools, { host: '192.168.1.42' })
```

** 4. Run Vue Devtools **
## Step 4: Run Vue DevTools

Run the following command to launch the Vue DevTools:

```shell
$ # if installed globally
Expand All @@ -51,7 +59,9 @@ $ # or
$ npx vue-devtools
```

** 5. Rebuild and run your app **
## Step 5: Rebuild and run your app

Run the following command:

```shell
$ rm -rf platforms
Expand All @@ -60,4 +70,4 @@ $ # or
$ tns run ios --bundle
```

If everything went well, you should see a few components in the component tree of Vue Devtools.
If your machine and app are configured properly, you should see a few components in the component tree of Vue DevTools.