open-in-editor.md

Open component in editor

Nuxt.js

Nuxt 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 modifiy your webpack configuration:

1. Import the package:

var openInEditor = require('launch-editor-middleware')

2. In the devServer option, register the /__open-in-editor HTTP route:

devServer: {
  before (app) {
    app.use('/__open-in-editor', openInEditor())
  }
}

3. The editor to launch is guessed. You can also specify the editor app with the editor option. See the supported editors list.

openInEditor('code')

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