Vue Devtools

[mattstrayer]

Feature Request

Is it possible to integrate vue-devtools-next as a vite plugin. Neither that nor the vue devtools chrome extension recognize that I'm using a vue app.

Is your feature request related to a bug?

N/A

What are the alternatives?

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[aklinker1]

For now, use the standalone app:

https://devtools-next.vuejs.org/guide/standalone

I can look into the vite plugin once v1.0 is out.

[pavitra-infocusp]

vuejs/devtools-next#436

I'm interested in getting the Vue devtools plugin to work. How to do I get started? @aklinker1

[aklinker1]

@pavitra-infocusp just try using it on an extension with only a popup. I kinda expect it to work in this case. It definitely won't work for content scripts.

The big thing WXT does to enable dev mode is change URLs from /abc to the dev server's full URL, http://localhost:3000/abc. Vite assumes you're loading files from the server, so it uses absolute paths. WXT has to load scripts from the files in the output directory, so all URLs need to be updated.

So you may need to use a custom vite plugin to transform additional URLs injected by the dev tools plugin.

[pavitra-infocusp]

vuejs/devtools-next#436 (comment)

This worked for me

[alexzhang1030]

// 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',
      }),
    ],
  }),
})

[aklinker1]

Since we have a working solution, I'm gonna close this issue!