Frequently Asked Questions

I can't use the open-in-editor feature

The feature is based on the vite-plugin-vue-inspector plugin and requires configuration, which you can do by looking at the configuration documentation.

How can I specify the editor for open-in-editor feature?

Starting from v7.2.0, you can specify the editor by launchEditor option:

This is a list of supported editors, please ensure that the editor's environment variables are correctly configured beforehand.

import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
  plugins: [
    VueDevTools({
      launchEditor: 'webstorm',
    }),
    Unocss(),
  ],
})

How to work with Laravel Vite Plugin?

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools({
      appendTo: 'resources/js/app.js'
    }),
    laravel([
      'resources/js/app.js',
    ]),
  ],
})

How to work with Nuxt3? (v7.1.3+)

Recommendation

We still recommend using Nuxt DevTools for a better development experience.

// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    plugins: [
      VueDevTools({
        appendTo: /\/entry\.m?js$/,
      })
    ]
  }
})

How to work with Vite Ruby?

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools({
      appendTo: 'app/frontend/entrypoints/application.js', // your app entrypoint (wherever you call createApp())
    }),
    RubyPlugin(),
    vue(),
  ],
})

How to work with WXT?

// wxt.config.ts
import { defineConfig } from 'wxt'
import vue from '@vitejs/plugin-vue'
import devtools from 'vite-plugin-vue-devtools'

export default defineConfig({
  vite: () => ({
    plugins: [
      vue(),
      devtools({
        // your app entrypoint (wherever you call createApp())
        appendTo: '/entrypoints/popup/main.ts',
      }),
    ],
  }),
})