Skip to content

feat: Vite 8 support via vite-plugin-inspect v12 and devtools-kit RPC #1085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
skirtles-code wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: Vite 8 support via vite-plugin-inspect v12 and devtools-kit RPC #1085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
"unocss": "^66.5.4",
"vite": "^7.1.10",
"vitest": "^3.2.4",
"vue": "^3.5.22"
"vue": "^3.5.32"
},
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
Expand Down
1 change: 1 addition & 0 deletions packages/applet/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"devDependencies": {
"@types/lodash-es": "^4.17.12",
"unplugin-vue": "^7.0.2",
"vite": "catalog:",
"vite-plugin-dts": "catalog:",
"vue": "catalog:",
"vue-router": "catalog:"
Expand Down
4 changes: 0 additions & 4 deletions packages/chrome-extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,5 @@
"@vue/devtools-core": "workspace:^",
"@vue/devtools-kit": "workspace:^",
"@vue/devtools-shared": "workspace:^"
},
"devDependencies": {
"@vitejs/plugin-vue": "catalog:",
"vue": "catalog:"
}
}
4 changes: 1 addition & 3 deletions packages/electron/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@
"socket.io-client": "^4.8.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "catalog:",
"tsx": "^4.20.6",
"unbuild": "3.6.1",
"vue": "catalog:"
"unbuild": "3.6.1"
}
}
4 changes: 0 additions & 4 deletions packages/firefox-extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,5 @@
"@vue/devtools-core": "workspace:^",
"@vue/devtools-kit": "workspace:^",
"@vue/devtools-shared": "workspace:^"
},
"devDependencies": {
"@vitejs/plugin-vue": "catalog:",
"vue": "catalog:"
}
}
4 changes: 2 additions & 2 deletions packages/playground/basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"serve": "catalog:",
"typescript": "catalog:",
"unocss": "catalog:",
"vite": "catalog:",
"vite-plugin-inspect": "catalog:",
"vite": "^8.0.0",
"vite-plugin-inspect": "12.0.0-beta.1",
"vite-plugin-vue-devtools": "workspace:*"
}
}
4 changes: 2 additions & 2 deletions packages/playground/basic/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Unocss from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'
import inspect from 'vite-plugin-inspect'
// import inspect from 'vite-plugin-inspect'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
Expand All @@ -24,7 +24,7 @@ export default defineConfig({
],
resolvers: [ElementPlusResolver()],
}),
inspect(),
// inspect(),
Copy link
Copy Markdown
Contributor Author

@skirtles-code skirtles-code Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used this playground to test my changes.

I had to remove vite-plugin-inspect from the plugins because it caused an error:

[Vite DevTools] Error setting up plugin vite-plugin-inspect: Error: RPC function "vite-plugin-inspect:clear-module-transform" is already registered

We're already adding another copy of vite-plugin-inspect inside Vue DevTools, and it seems that v12.0.0-beta.1 isn't happy with that duplication.

As a side note, running the playground using pnpm run play from the project root proved problematic because turbo didn't play nicely with the authentication stuff in Vite DevTools. I had to run pnpm run dev from packages/playground/basic instead.

],
server: {
port: 3000,
Expand Down
1 change: 1 addition & 0 deletions packages/playground/options-api/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "catalog:",
"vite": "catalog:",
"vite-plugin-vue-devtools": "workspace:*"
}
}
4 changes: 3 additions & 1 deletion packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@
"floating-vue": "catalog:",
"histoire": "1.0.0-beta.1",
"unocss": "catalog:",
"vite-plugin-dts": "catalog:"
"vite": "catalog:",
"vite-plugin-dts": "catalog:",
"vue": "^3.5.32"
}
}
9 changes: 6 additions & 3 deletions packages/vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,20 @@
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"dependencies": {
"@vitejs/devtools": "0.1.13",
"@vue/devtools-core": "workspace:^",
"@vue/devtools-kit": "workspace:^",
"@vue/devtools-shared": "workspace:^",
"sirv": "^3.0.2",
"vite-plugin-inspect": "catalog:",
"vite-plugin-vue-inspector": "^5.3.2"
"vite-plugin-inspect": "12.0.0-beta.1",
"vite-plugin-vue-inspector": "^5.4.0"
},
"devDependencies": {
"@types/node": "catalog:",
"@vitejs/devtools-kit": "0.1.13",
"fast-glob": "^3.3.3",
"image-meta": "^0.2.2",
"pathe": "catalog:"
"pathe": "catalog:",
"vite": "^8.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/vite/src/overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ addCustomTab({
icon: 'i-carbon-ibm-watson-discovery',
view: {
type: 'iframe',
src: normalizeUrl(`__inspect/`),
src: normalizeUrl(`.vite-inspect/`),
},
category: 'advanced',
})
Expand Down
7 changes: 4 additions & 3 deletions packages/vite/src/rpc/graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { debounce } from 'perfect-debounce'
import { RpcFunctionCtx } from './types'

export function getGraphFunctions(ctx: RpcFunctionCtx) {
const { rpc, server } = ctx
const { getRpc, server } = ctx
const debouncedModuleUpdated = debounce(() => {
getViteRpcServer<ViteRPCFunctions>?.()?.broadcast?.emit('graphModuleUpdated')
}, 100)
Expand All @@ -15,10 +15,11 @@ export function getGraphFunctions(ctx: RpcFunctionCtx) {
})
return {
async getGraphModules(): Promise<ModuleInfo[]> {
const meta = await rpc.getMetadata()
const rpc = getRpc()
const meta = await rpc?.invokeLocal('vite-plugin-inspect:get-metadata' as any)
Copy link
Copy Markdown
Contributor Author

@skirtles-code skirtles-code Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not aware of a good way to type these calls to invokeLocal. I've used as any as that's what Nuxt DevTools does.

const modules = (
meta
? await rpc.getModulesList({
? await rpc?.invokeLocal('vite-plugin-inspect:get-modules-list' as any, {
vite: meta?.instances[0].vite,
env: meta?.instances[0].environments[0],
})
Expand Down
4 changes: 2 additions & 2 deletions packages/vite/src/rpc/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { RpcFunctionsHost } from '@vitejs/devtools-kit'
import { ResolvedConfig, ViteDevServer } from 'vite'
import { ViteInspectAPI } from 'vite-plugin-inspect/index'

export interface RpcFunctionCtx {
rpc: ViteInspectAPI['rpc']
getRpc: () => RpcFunctionsHost | undefined
server: ViteDevServer
config: ResolvedConfig
}
13 changes: 12 additions & 1 deletion packages/vite/src/vite.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import type { DevToolsNodeContext, RpcFunctionsHost } from '@vitejs/devtools-kit'
import type { PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { DevTools as ViteDevTools } from '@vitejs/devtools'
import { createViteServerRpc } from '@vue/devtools-core'
import { setViteServerContext } from '@vue/devtools-kit'
import { bold, cyan, dim, green, yellow } from 'kolorist'
Expand Down Expand Up @@ -89,6 +91,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
const pluginOptions = mergeOptions(options ?? {})

let config: ResolvedConfig
let rpc: RpcFunctionsHost | undefined

function configureServer(server: ViteDevServer) {
const base = (server.config.base) || '/'
Expand All @@ -110,9 +113,11 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
setViteServerContext(server)

const rpcFunctions = getRpcFunctions({
rpc: inspect.api.rpc,
server,
config,
getRpc() {
return rpc
},
})
createViteServerRpc(rpcFunctions)

Expand Down Expand Up @@ -145,6 +150,11 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
configureServer(server) {
configureServer(server)
},
devtools: {
setup(ctx: DevToolsNodeContext) {
rpc = ctx.rpc
},
},
async resolveId(importee: string) {
if (importee === devtoolsOptionsImportee) {
return resolvedDevtoolsOptions
Expand Down Expand Up @@ -216,6 +226,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
}

return [
ViteDevTools(),
Copy link
Copy Markdown
Contributor Author

@skirtles-code skirtles-code Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a hack and definitely not right.

I'm using devtools.setup to get rpc, but that function isn't called by default. I've not been able to figure out what the correct way to trigger that function is. Adding the Vite DevTools plugin here does the job, but that also adds the UI widget, which we don't want.

It'll also fail if something else adds another copy of the Vite DevTools plugin.

inspect as PluginOption,
pluginOptions.componentInspector && VueInspector({
toggleComboKey: '',
Expand Down
Loading
Loading