jump to local IDE source code while click the element of browser automatically

? Introduction

A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.

? Installation

# vite-plugin-vue-inspector 

pnpm install vite-plugin-vue-inspector -D

# unplugin-vue-inspector

pnpm install unplugin-vue-inspector -D

? Usage

Configuration Vite

// for Vue2

import { defineConfig, } from 'vite'
import { createVuePlugin, } from 'vite-plugin-vue2'
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({
  plugins: [
    createVuePlugin(),
    Inspector({
      vue: 2
    }),
  ],
})

// for Vue3

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({
  plugins: [Vue(), Inspector()],
})

// for Nuxt3
// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'
import Inspector from 'vite-plugin-vue-inspector'

export default defineNuxtConfig({
  modules: [
    ['unplugin-vue-inspector/nuxt', {
      enabled: true,
      toggleButtonVisibility: 'always',
    }],
  ],
})

// OR

export default defineNuxtConfig({
  vite: {
    plugins: [
      Inspector({
        appendTo: 'entry.mjs'
      })
    ]
  }
})

Options

interface VitePluginInspectorOptions {
  /**
  * Vue version
  * @default 3
  */
  vue?: 2 | 3

  /**
  * Default enable state
  * @default false
  */
  enabled?: boolean

  /**
  * Define a combo key to toggle inspector
  * @default 'control-shift' on windows, 'meta-shift' on other os
  *
  * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
  * examples: control-shift, control-o, control-alt-s  meta-x control-meta
  * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
  * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
  */
  toggleComboKey?: string

  /**
  * Toggle button visibility
  * @default 'active'
  */
  toggleButtonVisibility?: 'always' | 'active' | 'never'

  /**
  * Toggle button display position
  * @default top-right
  */
  toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

  /**
  * append an import to the module id ending with `appendTo` instead of adding a script into body
  * useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
  *
  * WARNING: only set this if you know exactly what it does.
  */
  appendTo?: string
}

Example

? Configuration IDE / Editor

It uses an environment variable named VUE_EDITOR to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.

For example, if you want it always open VSCode when inspection clicked, set export VUE_EDITOR=code in your shell.

VSCode

install VSCode command line tools, see the official docs
set env to shell, like .bashrc or .zshrc
```
export VUE_EDITOR=code
```

WebStorm

just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)
```
export VUE_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
```

install WebStorm command line tools
then set env to shell, like .bashrc or .zshrc
```
export VUE_EDITOR=webstorm
```

Vim

Yes! you can also use vim if you want, just set env to shell

export VUE_EDITOR=vim

? Notice

[BREAKING CHANGE] From v1.0, enabled option default value changed from true to false .
It only work in develop mode .
It does not currently support Template Engine (e.g. pug) .

?‍? Programmatic Usage

You can also use control inspector programmatically, by accessing the __VUE_INSPECTOR__ global variable.

import type { VueInspectorClient } from 'vite-plugin-vue-inspector'

const inspector: VueInspectorClient = window.__VUE_INSPECTOR__

if (inspector) {
  // enable inspector
  inspector.enable()
  // or
  inspector.disable()
}

? Credits

This project is inspired by react-dev-inspector .

Partially implementation is inspired by vite-plugin-svelte-inspector .

?️ Analysis of Theory

[Chinese] 点击页面元素,这个Vite插件帮我打开了Vue组件

? License

MIT LICENSE

GitHub

View Github