Open in Editor dosent work when Options API disabled

[joshkrz]

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-vue configuration 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(),

[kevinluo201]

I think the reason behind this is the library to open the file in the editor, vite-plugin-vue-inspector, is still using option api. There is an issue for that webfansplz/vite-plugin-vue-inspector#122. I think it's not related to devtool directly.

[devtobi]

This is also related to: #711