Cannot get vue-devtools standalone app to work, on vue-nativescript

Question

I'm trying to learn nativescript with vue. I've learned about the devtools, and the fact that there should be an Electron standalone app, with npx vue-devtools, but it does'nt open any window., although the Electron processes are spawning.

It's a basic app built with vue init nativescript-vue/vue-cli-template <name>, so it should work "out of the box", kinda.

The app does work, both on emulator and on real device, so I don't know whats wrong. I've already reinstalled and re-init the projects multiple times, but nothing chanded.

This is the package.json

  "name": "test_devtools",
  "version": "1.0.0",
  "description": "A native application built with NativeScript-Vue",
  "author": "none",
  "license": "MIT",
  "nativescript": {
    "id": "org.nativescript.application",
    "templateVersion": "v2",
    "tns-android": {
      "version": "6.5.0"
    },
    "tns-ios": {
      "version": "6.5.0"
    }
  },
  "dependencies": {
    "@nativescript/theme": "^2.2.1",
    "nativescript-socketio": "^3.3.1",
    "nativescript-toasty": "^3.0.0-alpha.2",
    "nativescript-vue": "^2.6.0",
    "tns-core-modules": "^6.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@vue/devtools": "^5.3.2",
    "babel-loader": "^8.1.0",
    "nativescript-dev-webpack": "^1.5.1",
    "nativescript-vue-devtools": "^1.2.0",
    "nativescript-vue-template-compiler": "^2.6.0",
    "nativescript-worker-loader": "~0.11.0",
    "node-sass": "^4.13.1",
    "vue-loader": "^15.9.1"
  }
}

And the main.js

import Vue from "nativescript-vue";
import App from "./components/App";
Vue.use(VueDevtools);
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = TNS_ENV === "production";
Vue.config.devtools = true;
new Vue({
  render: (h) => h("frame", [h(App)]),
}).$start();

Robertino Vasilescu · Accepted Answer · 2020-04-19 07:50:31Z

0

In main.js you need to first import devtools, make it the first import:

import VueDevtools from 'nativescript-vue-devtools'

then, below (doesn't have to necessarily be the next statement you can position it lower in the file):

if (TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}

It works this way.

answered Apr 19, 2020 at 7:50

Robertino Vasilescu

1,0681 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sword8 Over a year ago

No luck, it doesnt work for me I've re-init the file, and it build with your code, but it coninues not to spawn the window for the Vue-Devtools

Collectives™ on Stack Overflow

Cannot get vue-devtools standalone app to work, on vue-nativescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related