-
Notifications
You must be signed in to change notification settings - Fork 149
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[vite-plugin-vue-devtools] Vue Devtools support #533
Comments
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. |
I'm interested in getting the Vue devtools plugin to work. How to do I get started? @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 So you may need to use a custom vite plugin to transform additional URLs injected by the dev tools plugin. |
vuejs/devtools-next#436 (comment) This worked for me |
// 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',
}),
],
}),
}) |
Since we have a working solution, I'm gonna close this issue! |
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
Output log file attached |
FYI -- This works with 0.19.0, but breaks when moving to 0.19.1 |
Related c8ddc66, you can use export default defineConfig({
entrypointLoader: "jiti",
modules: ["@wxt-dev/module-vue"],
vite: () => ({
plugins: [
devtools({
appendTo: "/entrypoints/popup/main.ts",
}),
],
}),
}); |
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. |
Likely the problem is that we shouldn't use 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 |
The root reason is that |
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.
The text was updated successfully, but these errors were encountered: