[vite-plugin-vue-devtools] Vue Devtools support

[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]

https://github.com/vuejs/devtools-next/issues/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]

https://github.com/vuejs/devtools-next/issues/436#issuecomment-2162099192

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!

[mattstrayer]

This now seems to be broken with the latest versions.

import { defineConfig } from "wxt";
import devtools from "vite-plugin-vue-devtools";

// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ["@wxt-dev/module-vue", "@wxt-dev/auto-icons"],

  srcDir: "src",

  manifest: {
    name: "mindful - stay focused on your goals",
    description: "Stay present, focused, and intentional each day.",
    permissions: ["tabs", "storage"],
  },

  vite: () => ({
    plugins: [
      devtools({
        // your app entrypoint (wherever you call createApp())
        appendTo: "/entrypoints/newtab/main.ts",
      }),
      devtools({
        // your app entrypoint (wherever you call createApp())
        appendTo: "/entrypoints/popup/main.ts",
      }),
    ],
  }),
});

Output

❯ npm i

> [email protected] postinstall
> wxt prepare


WXT 0.19.2                                                                                                                                  1:04:04 PM
ℹ Generating types...                                                                                                                      1:04:05 PM
✖ Command failed after 501 ms                                                                                                              1:04:05 PM

 ERROR  Invalid URL                                                                                                                         1:04:05 PM

  at new URL (node:internal/url:797:36)
  at getVueDevtoolsPath (node_modules/vite-plugin-vue-devtools/dist/vite.cjs:7996:231)
  at VitePluginVueDevTools (node_modules/vite-plugin-vue-devtools/dist/vite.cjs:8017:27)
  at Object.vite (wxt.config.ts:18:40)
  at vite (node_modules/wxt/dist/core/utils/building/resolve-config.mjs:312:59)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async wxt2.config.vite (node_modules/wxt/dist/modules.mjs:30:24)
  at async wxt2.config.vite (node_modules/wxt/dist/modules.mjs:30:24)
  at async getBaseConfig (node_modules/wxt/dist/core/builders/vite/index.mjs:15:20)
  at async Object.importEntrypoint (node_modules/wxt/dist/core/builders/vite/index.mjs:168:30)
  at async getBackgroundEntrypoint (node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:255:27)
  at async node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:58:20
  at async Promise.all (index 0)
  at async Object.run (node_modules/wxt/dist/core/utils/environments/environment.mjs:13:14)
  at async findEntrypoints (node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:45:23)
  at async prepare (node_modules/wxt/dist/core/prepare.mjs:6:23)
  at async node_modules/wxt/dist/cli/commands.mjs:73:5
  at async CAC.<anonymous> (node_modules/wxt/dist/cli/cli-utils.mjs:16:22)
  at async node_modules/wxt/dist/cli/index.mjs:11:1

npm error code 1
npm error path /Users/matt/dev/mindful
npm error command failed
npm error command sh -c wxt prepare

npm error A complete log of this run can be found in: /Users/matt/.npm/_logs/2024-07-28T17_04_03_993Z-debug-0.log

Output log file attached

2024-07-28T17_04_03_993Z-debug-0.log

[mattstrayer]

FYI -- This works with 0.19.0, but breaks when moving to 0.19.1

@aklinker1

[alexzhang1030]

Related https://github.com/wxt-dev/wxt/commit/c8ddc66cfad5a25039917c3b56699d84a4bc952d, you can use entrypointLoader: 'jiti for a temporal workaround.

export default defineConfig({
  entrypointLoader: "jiti",
  modules: ["@wxt-dev/module-vue"],
  vite: () => ({
    plugins: [
      devtools({
        appendTo: "/entrypoints/popup/main.ts",
      }),
    ],
  }),
});

[alexzhang1030]

It’s not entirely clear whether the issue is related to ‘wxt’ or something else. The root cause is:

document was set to null by someone, which makes typeof document === 'undefined' evaluate to false, but it raises an error when executing new URL('vite.cjs', null).

[mattstrayer]

Adding the entrypointloader as you suggested worked for now! Thank you! @alexzhang1030

Vscode is showing that as a deprecated field, is that correct?

[alexzhang1030]

Adding the entrypointloader as you suggested worked for now! Thank you! @alexzhang1030

Vscode is showing that as a deprecated field, is that correct?

As it's a temporary workaround, you can use it until wxt remove it. we should discuss how to resolve it.

[aklinker1]

Likely the problem is that we shouldn't use vite-plugin-vue-devtools when importing entrypoints. By default, all plugins are passed into vite-node. See "Entrypoint Loader" docs for more details about them.

As an alternative, you could add the plugin in the following hooks:

• https://wxt.dev/api/reference/wxt/interfaces/WxtHooks.html#vite-devserver-extendconfig
• https://wxt.dev/api/reference/wxt/interfaces/WxtHooks.html#vite-build-extendconfig

export default defineConfig({
  hooks: {
    'vite:devServer:extendConfig': (config) => {
      config.plugins.push(devtools(...))
    },
    'vite:build:extendConfig ': (config) => {
      config.plugins.push(devtools(...))
    },
  },
});

If you'd like, it might make sense to add devtools to the @wxt-dev/module-vue, and it could abstract away adding the plugin in those two hooks. But I'd prefer to not do this until it's stable :/

[alexzhang1030]

Likely the problem is that we shouldn't use vite-plugin-vue-devtools when importing entrypoints. By default, all plugins are passed into vite-node. See "Entrypoint Loader" docs for more details about them.

As an alternative, you could add the plugin in the following hooks:

• wxt.dev/api/reference/wxt/interfaces/WxtHooks.html#vite-devserver-extendconfig
• wxt.dev/api/reference/wxt/interfaces/WxtHooks.html#vite-build-extendconfig

export default defineConfig({
  hooks: {
    'vite:devServer:extendConfig': (config) => {
      config.plugins.push(devtools(...))
    },
    'vite:build:extendConfig ': (config) => {
      config.plugins.push(devtools(...))
    },
  },
});

If you'd like, it might make sense to add devtools to the @wxt-dev/module-vue, and it could abstract away adding the plugin in those two hooks. But I'd prefer to not do this until it's stable :/

The root reason is that document should be undefined instead of null, it has some fallbacks on node env or browser env, so vite or vite-node should both work properly.