vuejs / vuejs/devtools

Open in Editor dosent work when Options API disabled

Open
#824 3 comments 0 reactions 0 assignees View on GitHub

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.