@@ -50,6 +50,7 @@ export default defineConfig({
50
50
createVuePlugin (),
51
51
Inspector ({
52
52
vue: 2 ,
53
+ enabled: true
53
54
}),
54
55
],
55
56
})
@@ -63,7 +64,7 @@ import Vue from "@vitejs/plugin-vue"
63
64
import Inspector from " vite-plugin-vue-inspector"
64
65
65
66
export default defineConfig ({
66
- plugins: [Vue (), Inspector ()],
67
+ plugins: [Vue (), Inspector ({ enabled: true } )],
67
68
})
68
69
```
69
70
@@ -77,7 +78,10 @@ import Inspector from "vite-plugin-vue-inspector"
77
78
export default defineNuxtConfig ({
78
79
vite: {
79
80
plugins:[
80
- Inspector ()
81
+ Inspector ({
82
+ appendTo: " entry.mjs" ,
83
+ enabled: true
84
+ })
81
85
]
82
86
}
83
87
})
@@ -86,47 +90,54 @@ export default defineNuxtConfig({
86
90
87
91
### Options
88
92
89
- It provides an option which that controls the enable state.
90
93
91
94
``` 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
124
138
}
125
-
126
- < / script >
127
139
```
128
140
129
-
130
141
### Example
131
142
132
143
- [ vue2] ( https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/example/vue2 )
@@ -185,13 +196,16 @@ export VUE_EDITOR=vim
185
196
186
197
## 💡 Notice
187
198
199
+ - ** From v1.0, ` enabled ` option default value changed from ` true ` to ` false ` .**
188
200
- It only work in develop mode .
189
201
- It does not currently support ` Template Engine (e.g. pug) ` .
190
202
191
- ## 🌸 Thanks
203
+ ## 🌸 Credits
192
204
193
205
This project is inspired by [ react-dev-inspector] ( https://github.com/zthxxx/react-dev-inspector ) .
194
206
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
+
195
209
## 🤖️ Analysis of Theory
196
210
197
211
[ Chinese] [ 点击页面元素,这个Vite插件帮我打开了Vue组件] ( https://juejin.cn/post/7077347158545924127 )
0 commit comments