vite-plugin-online-vue-jumper v0.0.2

vite-plugin-online-vue-jumper

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

https://user-images.githubusercontent.com/43719490/222096945-5452e4d3-33a3-4346-a61a-cc5a8a803d59.mp4

Example

• vue

• vitepress

Install

// main.ts
import jumpPlugin from 'vite-plugin-online-vue-jumper/dist/client';

// ......

app.use(jumpPlugin)

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createVuePluginOptions, searchPackageJson } from 'vite-plugin-online-vue-jumper'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(createVuePluginOptions(
      // base config
      { reactivityTransform: true },
      // resolve url for dependencies
      (filePath) => {
        const info = searchPackageJson(filePath);
        return 'https://github.com/wip-elonehoo/vite-plugin-online-vue-jumper/tree/main/playground/vue/' + info.fileRelativePath
      },
    ))
  ],
})

Usage

Hover any element on your page and press 「Alt / option」 + left click to jump.