vite-plugin-vue-jump

vite-plugin-vue-jump

This plugin creates for support jump to source code of the specific element from your web page.

Since this plugin will add pointerenter and pointerleave events for all elements, you should not use this plugin in production, but just for debugging.

Try it: https://volarjs.github.io/

Install

main.ts:

import jumpPlugin from 'vite-plugin-vue-jump/client';

// ...

app.use(jumpPlugin);

Vite config:

import { createVuePluginOptions, searchPackageJson } from 'vite-plugin-vue-jump';
import vue from '@vitejs/plugin-vue';

export default {
	plugins: [vue(createVuePluginOptions(
		// base config
		{ reactivityTransform: true },
		// resolve url for dependencies
		(filePath) => {
			const info = searchPackageJson(filePath);
			if (info.packageJson.name === '@vue/theme') {
				return 'https://github.com/vuejs/theme/tree/main/' + info.fileRelativePath;
			}
			else if (info.packageJson.name === '@volar/docs') {
				return 'https://github.com/volarjs/volarjs.github.io/blob/master/' + info.fileRelativePath;
			}
		},
	))]
};

Usage

Hover any element on your page and press Alt + left click to jump.

Sponsors