Update 5-vue-devtools.md

[Shuunen]

that one was not easy to find :)

[nativescript-vue-bot]

Deploy preview for nativescript-vue ready!

Built with commit 5dfbc78

https://deploy-preview-203--nativescript-vue.netlify.com

[rigor789]

Thanks!

[Shuunen]

Ma pleasure to build a better Vueture 😛

[Shuunen]

@rigor789 I wanted to use this pkg : https://www.npmjs.com/package/address
to dynamically get ip like this :

import { ip } from 'address';

Vue.use(VueDevtools, { host: ip()})

But I got weird error :

ERROR in ../node_modules/address/lib/address.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\me\Projects\green-app\node_modules\address\lib'
 @ ../node_modules/address/lib/address.js 7:12-36
 @ ./main.js

After looking up on the web, it looks like a webpack issue, any idea ?

[rigor789]

@Shuunen no that will not work, it depends on system APIs - and even if you could get it working, it would give you the IP of the device, and not your host machine.

What could work is the following:

Vue.use(VueDevtools, { host: HOST_MACHINE_IP }

and in webpack.config.js (https://github.com/nativescript-vue/vue-cli-template/blob/master/template/webpack.config.js#L207) add

// at the top
import { ip } from 'address';

// around line 207
new webpack.DefinePlugin({
  "global.TNS_WEBPACK": "true",
  "TNS_ENV": JSON.stringify(mode),
  "HOST_MACHINE_IP ": JSON.stringify(ip()),
}),

Make sure address is a devDependency

[Shuunen]

Nice or is it VueDevtools that should detect ip with this kind of param : Vue.use(VueDevtools, { detectHost: true } ?

[rigor789]

It does detect the host when in an emulator/simulator (different emulators use different ips for accessing the host). But on a real device there is no way to detect the ip of your dev machine

[Shuunen]

Ok I see ☺️

Thanks a lot for all the explanations, I was pretty confused with these issues and it's cool to have someone taking time to clarify 👍