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

mattstrayer · 2024-03-07T16:41:03Z

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 · 2024-03-07T19:41:30Z

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 · 2024-06-10T08:10:09Z

vuejs/devtools-next#436

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

aklinker1 · 2024-06-10T14:57:45Z

@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, https://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 · 2024-06-12T07:02:36Z

vuejs/devtools-next#436 (comment)

This worked for me

alexzhang1030 · 2024-06-13T05:57:26Z

// 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 · 2024-06-17T20:42:21Z

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

mattstrayer · 2024-07-28T17:06:33Z

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 · 2024-07-28T17:08:08Z

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

@aklinker1

alexzhang1030 · 2024-07-31T02:46:40Z

Related c8ddc66, 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 · 2024-07-31T03:16:45Z

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 · 2024-07-31T15:35:56Z

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

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

alexzhang1030 · 2024-08-01T02:25:14Z

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 · 2024-08-01T03:02:23Z

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:

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 · 2024-08-01T03:12:48Z

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.

mattstrayer added the feature label Mar 7, 2024

aklinker1 added this to the v1.1 milestone Mar 12, 2024

aklinker1 closed this as completed Jun 17, 2024

aklinker1 added the vite plugin Issue related to integrating a specific vite plugin label Jul 6, 2024

aklinker1 changed the title ~~Vue Devtools~~ [vite-plugin-vue-devtools] Vue Devtools Jul 6, 2024

aklinker1 changed the title ~~[vite-plugin-vue-devtools] Vue Devtools~~ [vite-plugin-vue-devtools] Vue Devtools support Jul 6, 2024

aklinker1 reopened this Jul 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mattstrayer commented Mar 7, 2024

aklinker1 commented Mar 7, 2024 •

edited

Loading

pavitra-infocusp commented Jun 10, 2024

aklinker1 commented Jun 10, 2024

pavitra-infocusp commented Jun 12, 2024

alexzhang1030 commented Jun 13, 2024

aklinker1 commented Jun 17, 2024

mattstrayer commented Jul 28, 2024

mattstrayer commented Jul 28, 2024

alexzhang1030 commented Jul 31, 2024

alexzhang1030 commented Jul 31, 2024 •

edited

Loading

mattstrayer commented Jul 31, 2024

alexzhang1030 commented Aug 1, 2024 •

edited

Loading

aklinker1 commented Aug 1, 2024 •

edited

Loading

alexzhang1030 commented Aug 1, 2024 •

edited

Loading

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

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

Comments

mattstrayer commented Mar 7, 2024

Feature Request

Is your feature request related to a bug?

What are the alternatives?

Additional context

aklinker1 commented Mar 7, 2024 • edited Loading

pavitra-infocusp commented Jun 10, 2024

aklinker1 commented Jun 10, 2024

pavitra-infocusp commented Jun 12, 2024

alexzhang1030 commented Jun 13, 2024

aklinker1 commented Jun 17, 2024

mattstrayer commented Jul 28, 2024

Output

mattstrayer commented Jul 28, 2024

alexzhang1030 commented Jul 31, 2024

alexzhang1030 commented Jul 31, 2024 • edited Loading

mattstrayer commented Jul 31, 2024

alexzhang1030 commented Aug 1, 2024 • edited Loading

aklinker1 commented Aug 1, 2024 • edited Loading

alexzhang1030 commented Aug 1, 2024 • edited Loading

aklinker1 commented Mar 7, 2024 •

edited

Loading

alexzhang1030 commented Jul 31, 2024 •

edited

Loading

alexzhang1030 commented Aug 1, 2024 •

edited

Loading

aklinker1 commented Aug 1, 2024 •

edited

Loading

alexzhang1030 commented Aug 1, 2024 •

edited

Loading