Skip to content

Commit 0c77cd0

Browse files
committed
docs: readme
1 parent c6cd086 commit 0c77cd0

File tree

2 files changed

+54
-40
lines changed

2 files changed

+54
-40
lines changed

README.md

Lines changed: 53 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export default defineConfig({
5050
createVuePlugin(),
5151
Inspector({
5252
vue: 2,
53+
enabled: true
5354
}),
5455
],
5556
})
@@ -63,7 +64,7 @@ import Vue from "@vitejs/plugin-vue"
6364
import Inspector from "vite-plugin-vue-inspector"
6465

6566
export default defineConfig({
66-
plugins: [Vue(), Inspector()],
67+
plugins: [Vue(), Inspector({ enabled: true })],
6768
})
6869
```
6970

@@ -77,7 +78,10 @@ import Inspector from "vite-plugin-vue-inspector"
7778
export default defineNuxtConfig({
7879
vite: {
7980
plugins:[
80-
Inspector()
81+
Inspector({
82+
appendTo: "entry.mjs",
83+
enabled: true
84+
})
8185
]
8286
}
8387
})
@@ -86,47 +90,54 @@ export default defineNuxtConfig({
8690

8791
### Options
8892

89-
It provides an option which that controls the enable state.
9093

9194
```ts
92-
93-
import { defineConfig } from "vite"
94-
import Vue from "@vitejs/plugin-vue"
95-
import Inspector from "vite-plugin-vue-inspector"
96-
97-
export default defineConfig({
98-
plugins: [Vue(), Inspector({ enabled: false })],
99-
})
100-
```
101-
102-
### [Nuxt3 Usage](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/example/nuxt)
103-
104-
```ts
105-
// App.vue
106-
107-
<template>
108-
<inspector-overlay v-if="isDev"/>
109-
</template>
110-
111-
<script lang="ts">
112-
113-
import InspectorOverlay from "vite-plugin-vue-inspector/overlay.vue"
114-
export default {
115-
name: "App",
116-
components: {
117-
InspectorOverlay
118-
},
119-
setup(){
120-
return {
121-
isDev: process.dev
122-
}
123-
}
95+
interface VitePluginInspectorOptions {
96+
/**
97+
* Vue version
98+
* @default 3
99+
*/
100+
vue?: 2 | 3
101+
102+
/**
103+
* Default enable state
104+
* @default false
105+
*/
106+
enabled?: boolean
107+
108+
/**
109+
* Define a combo key to toggle inspector
110+
* @default 'control-shift' on windows, 'meta-shift' on other os
111+
*
112+
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
113+
* examples: control-shift, control-o, control-alt-s meta-x control-meta
114+
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
115+
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
116+
*/
117+
toggleComboKey?: string
118+
119+
/**
120+
* Toggle button visibility
121+
* @default 'active'
122+
*/
123+
toggleButtonVisibility?: "always" | "active" | "never"
124+
125+
/**
126+
* Toggle button display position
127+
* @default top-right
128+
*/
129+
toggleButtonPos?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
130+
131+
/**
132+
* append an import to the module id ending with `appendTo` instead of adding a script into body
133+
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
134+
*
135+
* WARNING: only set this if you know exactly what it does.
136+
*/
137+
appendTo?: string
124138
}
125-
126-
</script>
127139
```
128140

129-
130141
### Example
131142

132143
- [vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/example/vue2)
@@ -185,13 +196,16 @@ export VUE_EDITOR=vim
185196

186197
## 💡 Notice
187198

199+
- **From v1.0, `enabled` option default value changed from `true` to `false` .**
188200
- It only work in develop mode .
189201
- It does not currently support `Template Engine (e.g. pug)` .
190202

191-
## 🌸 Thanks
203+
## 🌸 Credits
192204

193205
This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .
194206

207+
Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .
208+
195209
## 🤖️ Analysis of Theory
196210

197211
[Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)

src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface VitePluginInspectorOptions {
2222

2323
/**
2424
* Default enable state
25-
* @default true
25+
* @default false
2626
*/
2727
enabled?: boolean
2828

0 commit comments

Comments
 (0)