vue-click-to-component

English | 简体中文

Option+Click(Alt+Click) a element in the browser to instantly goto the source in your editor.

Online Demo: https://ctc.zjffun.com/

Features

• Option+Click(Alt+Click) opens the immediate Component's source
• Option+RightClick(Alt+RightClick) opens a context menu with the parent elements
• Supports vscode, vscode-insiders and webstorm's URL handling
• Automatically tree-shaken from production builds

Installation

npm

npm install vue-click-to-component

pnpm

pnpm add vue-click-to-component

yarn

yarn add vue-click-to-component

Even though vue-click-to-component is added to dependencies, tree-shaking will remove vue-click-to-component from production builds.

Usage

If you are using Click To Component Chrome Extension, you will not need to add import 'vue-click-to-component/client'; in main.ts/js.

Vite

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+import vueClickToComponent from 'vue-click-to-component/vite-plugin';

// https://vitejs.dev/config/
export default defineConfig({
-  plugins: [vue()],
+  plugins: [vueClickToComponent(), vue()],
})

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
+import 'vue-click-to-component/client';

createApp(App).mount('#app')

Vue CLI

vue.config.js

const { defineConfig } = require("@vue/cli-service");
+const vueClickToComponent = require("vue-click-to-component/vue-cli-plugin");

module.exports = defineConfig({
  transpileDependencies: true,
+  chainWebpack: (config) => {
+    vueClickToComponent(config);
+  },
});

main.js

import Vue from 'vue'
import App from './App.vue'
+import 'vue-click-to-component/client.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

webpack

webpack.config.js

module: {
  rules: [
+    {
+        test: /\.vue$/,
+        enforce: 'pre',
+        loader: 'vue-click-to-component/loader',
+    },
    {
        test: /\.vue$/,
        loader: 'vue-loader',
    },
  ],
},

main.js

import { createApp } from "vue";
import App from "./App.vue";
+import "vue-click-to-component/client.js";

createApp(App).mount("#app");

package.json

"scripts": {
-  "serve": "webpack serve"
+  "serve": "NODE_ENV=development webpack serve"
},

Configure the URL to open the editor

By default, clicking will open vscode, and generally does not need the following configuration. Those configurations are only required if the following situations are used.

If you use vscode-insiders, you can set editor like:

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    return `vscode-insiders://file/${sourceCodeLocation}`;
+  };
+}

If you use WSL, you can set URL like:

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    // Please change to your WSL target
+    const wslTarget = 'Ubuntu-22.04';
+    return `vscode://vscode-remote/wsl+${wslTarget}/${sourceCodeLocation}`;
+  };
+}

You can find your WSL target in the Remote Explorer panel of VSCode.

If you use Docker development environment, you can fix path like:

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    // Please change to your docker work dir
+    const dockerWorkDir = '/usr/src/app';
+    // Please change to your local work dir
+    const workDir = '/Users/zjf/gh/vue-click-to-component/examples/vite';
+
+    let realSourceCodeLocation = sourceCodeLocation;
+    if (realSourceCodeLocation.startsWith(dockerWorkDir)) {
+      realSourceCodeLocation = `${workDir}${realSourceCodeLocation.slice(dockerWorkDir.length)}`;
+    }
+
+    return `vscode://file/${realSourceCodeLocation}`;
+  };
+}

If you use WebStorm, you can set URL like:

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    const [path, line, column] = sourceCodeLocation.split(':');
+    return `webstorm://open?file=${path}&line=${line}&column=${column}`;
+  };
+}

PS: According to my test, the file can be opened, but the lines and columns do not take effect. If anyone knows how to make lines and columns work please tell me, thanks.

Force enable

By default, this tool is only enabled in the development environment (NODE_ENV is development). If you want to enable it in the production environment, you can configure it like below:

main.ts:

-import 'vue-click-to-component/client';
+import 'vue-click-to-component/client-force-enable';

package.json:

-"build": "vue-tsc && vite build",
+"build": "vue-tsc && VUE_CLICK_TO_COMPONENT_FORCE_ENABLE=true vite build",