Open in Editor dosent work when Options API disabled
Open
Nobody has claimed this yet.
bug
pr welcome
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 279
- PR merge metrics
- No merged PRs in 30d
Description
Issue
When the Options API is disabled in the @vitejs/plugin-vue plugin options, devtools cannot open any files in my editor of choice. The browser console outputs the following errors:
Firefox 136.0
TypeError: (intermediate value).__VUE_INSPECTOR__ is undefined
Chrome 134.0
TypeError: Cannot read properties of undefined (reading 'openInEditor')
Steps to Reproduce
- Disable the options API in the
@vitejs/plugin-vueconfiguration options - Run the development sever
- Open the devtools, select a Vue component and try and "Open in Editor"
Environment
Versions
- vue 3.5.13
- vite 6.2.1
- vite-plugin-vue-devtools 7.7.2
- vite-plugin-symfony: 8.0.2,
- @tailwindcss/vite 4.0.12
Vite Config
// vite.config.js
import { defineConfig } from 'vite';
import symfonyPlugin from 'vite-plugin-symfony';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import { fileURLToPath, URL } from 'node:url';
import tailwindcss from '@tailwindcss/vite';
import * as fs from 'node:fs';
import dotenv from 'dotenv';
dotenv.config({ path: `.env.local` });
const launchEditor = process.env?.CODE_EDITOR;
const viteHost = process.env.FRONTEND_VITE_HOST;
const host = process.env.FRONTEND_HOST;
export default defineConfig({
plugins: [
vue({
features: {
optionsAPI: false,
},
}),
vueDevTools({
launchEditor: launchEditor,
appendTo: 'assets/app.js',
}),
symfonyPlugin({
viteDevServerHostname: viteHost,
}),
tailwindcss(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./assets', import.meta.url)),
},
},
server: {
host: viteHost,
https: {
key: fs.readFileSync(`${viteHost}-key.pem`),
cert: fs.readFileSync(`${viteHost}.pem`),
},
cors: host,
},
build: {
rollupOptions: {
input: {
app: './assets/app.js',
},
},
},
});
Solution
Don't disable the options API in the configuration options.
- vue({
- features: {
- optionsAPI: false,
- },
- }),
+ vue(),
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with vite.config.js and reproduce the failure using @vitejs/plugin-vue with optionsAPI disabled, then follow the devtools “Open in Editor” entry point and its browser-console error. Done means selecting a Vue component opens its source file without errors while the Options API remains disabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100