7868342 Jul 26, 2018
2 contributors

Users who have contributed to this file

@Akryum @c01nd01r
52 lines (35 sloc) 1.42 KB

Open component in editor


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


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


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
    openInEditorHost: 'http://localhost:9000/'