Open
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(),