Vue Devtools

Open component in editor

When you select a component, you have the option to open the corresponding source file in your code editor.

To able to work, this feature may need some configuration in your project.

Vue CLI 3

Vue CLI 3 supports this feature out-of-the-box when running vue-cli-service serve.

Nuxt & Quasar CLI

Nuxt & Quasar CLI supports this feature out-of-the-box. Make sure to be in debug mode.

Webpack

In your Vue project, install the launch-editor-middleware package and modify your webpack configuration:

  1. Import the package:
var openInEditor = require('launch-editor-middleware')
  1. In the devServer option, register the /__open-in-editor HTTP route:
devServer: {
  before (app) {
    app.use('/__open-in-editor', openInEditor())
  }
}
  1. The editor to launch is guessed. You can also specify the editor app with the editor option. See the supported editors list.
openInEditor('code')
  1. You can now click on the name of the component in the Component inspector pane (if the devtools knows about its file source, a tooltip will appear).

Node.js

You can use the launch-editor package to setup an HTTP route with the /__open-in-editor path. It will receive file as an URL variable.

Customize request

You can change the request host (default /) with the following code in your frontend app:

if (process.env.NODE_ENV !== 'production')
  // App served from port 4000
  // Webpack dev server on port 9000
  window.VUE_DEVTOOLS_CONFIG = {
    openInEditorHost: 'http://localhost:9000/'
  }
}