File size: 1,858 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
# 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](https://github.com/yyx990803/launch-editor#middleware) package and modify your webpack configuration:
1. Import the package:
```js
const openInEditor = require('launch-editor-middleware')
```
2. In the `devServer` option, register the `/__open-in-editor` HTTP route:
```js
export default {
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](https://github.com/yyx990803/launch-editor#supported-editors).
```js
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](https://github.com/yyx990803/launch-editor#usage) 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:
```js
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/'
}
}
```
|