how to get it works with "laravel inertia vue stack" ?

[peter-emad99]

i'm using vue with inertia and laravel ..i installed the vite plugin ...opened the devtools url ..it only show wating for connection
is there somthing special to configure ?

[webfansplz]

You can try appendTo option to configure it. see: https://devtools-next.vuejs.org/guide/vite-plugin

[peter-emad99]

i tryed it but it didn't work

[RobertBoes]

I'm also trying to get this to work, what I've tried is this config:

export default defineConfig({
    plugins: [
        VueDevTools({
            appendTo: 'resources/scripts/main.ts',
            clientHost: 'https://my-app.test:5173',
        }),
        laravel({
            input: 'resources/scripts/main.ts',
        }),
	]
})

I'm getting somewhere, except the CSS and JS (ex. @id/virtual:vue-devtools-path:overlay/devtools-overlay.js) is loaded from https://my-app.test, without the 5173 port. So clientHost has no effect here.

Tried setting base to the same URL (from here: https://github.com/vuejs/devtools-next/blob/main/packages/vite/src/vite.ts#L126) but that seems to have no effect either
Setting the base should work according to this, so maybe I'm doing something wrong here..

devtools-next/packages/vite/src/overlay.js

Line 6 in 977ee3c

const overlayDir = `${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay`

[RobertBoes]

Okay got it working, this change would be required:

-const overlayDir = `${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay`
+const overlayDir = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay`

in

devtools-next/packages/vite/src/overlay.js

Line 6 in 977ee3c

const overlayDir = `${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay`

Would this potentially break anything else @webfansplz or can I submit a PR?

[alexzhang1030]

Sure, PR welcome <3

[Smef]

i've tried this change locally, and while it does get the dev tools loading started, it still has an error because of the different domains between the Laravel app host and the Vite host.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://xxxx.test:5173') does not match the recipient window's origin ('https://xxxx.test').

[RobertBoes]

Yeah, that's what I ran into as well, but not sure how to fix it

[Smef]

I think the issue is that the parent doesn't match the domain of the vite server, so when the postMessage command runs there's an error. This is handled in packages/client/src/main.ts:141

event.source?.postMessage('__VUE_DEVTOOLS_CLIENT_READY__')

needs to run postMessage to the domain of the browser, so it should be...

event.source?.postMessage('__VUE_DEVTOOLS_CLIENT_READY__', 'https://myhost.test')

I was trying to link to this package locally, but I'm having trouble running it for some reason to test this. I edited the minified source from the downloaded plugin and it does resolve the error, though the actual iframe with the tool is still stuck loading.

[Smef]

If anyone can help with this, when I pnpm run dev for this package installed locally and use it as a dependency I get a 404 when trying to get the css and .js files. The changes we're discussing here do seem to be working, though.

overlay.js:44 
        
        
       GET https://my-domain.test:5173/@id/virtual:vue-devtools-path:overlay/devtools-overlay.css net::ERR_ABORTED 404 (Not Found)

[Smef]

I think with this change the message is being posted to the browser instead of the iframe we need it posted to, which is why nothing is happening. I'm trying to forward the message back to the iframe by adding a listener on the window and then using iframe.contentWindow.postMessage(data, { targetOrigin: "*" });, but I think it's messing up some check for the message in the devtools which may be looking for a specific origin or something. The message is making it back to the devtools with this, but something still isn't activating.

Also, I think the message post can be event.source?.postMessage('__VUE_DEVTOOLS_CLIENT_READY__', {targetOrigin: '*'}) to let it post anywhere.

[Smef]

This works successfully with stand-alone mode and is a way we can try it out until we have a solution for the nicer integration.

You can add the <script> tag to your app.blade.php like so:

@if(App::environment('local'))
    <script src="http://localhost:8098"></script>
@endif

or add it to your app.ts:

import { devtools } from "@vue/devtools";
...
...
if (import.meta.env.MODE === "development") devtools.connect();

Since this isn't a smooth as the installation we'd like to use (and I definitely want to get that working still) you may want to add a script to your package.json to make launching the dev tools easier, and so you don't forget about them.

    "scripts": {
        "vue-devtools": "vue-devtools"
    },

[plweil]

@Smef I'm running into the exact same problem with the Laravel/inertia/Vue3 stack. I'm trying the standalone mode, but once you add the <script> tag and run the script, what's supposed to happen next? Where are you supposed to see and use the standalone app? I just don't see anything anywhere.

[Smef]

The stand-alone mode doesn't give the icon on your page like the regular integration, and requires launching the stand-alone devtools app. This is done through a CLI command, either the global install run command or the local install run command as listed here. This will actually launch a completely independent electron app on your machine which will receive the data from your site.

[plweil]

thanks @Smef. I may give this a try when I get a chance, but this seems like a lot of extra steps. Sure wish we could get a Vite plugin solution. At this point it almost seems easier (but still a pain) to keep kicking the regular Vue Devtools browser extension an occasional kick in the butt when it dies or becomes non-responsive.

[Smef]

The setup is pretty quick, since it's just install the package (global or local), add the script tag or JS, and then run the app.

That being said, it is definitely much more convenient to not need to run a separate application on your computer to see the dev tools. Having it embedded as designed or like Nuxt DevTools makes it much easier for a team of developers to all see the info very easily without having to be instructed to run the separate app. I hope this can be updated in the near future.

[Smef]

I have this working with Laravel, Inertia, and Vue. Here's the configuration:

in your vite.config.js

import VueDevTools from 'vite-plugin-vue-devtools'
...
...
...
export default defineConfig({
    plugins: [
        VueDevTools({
            appendTo: 'app.ts',
            openInEditorHost: 'https://my-app.test:5173',
            clientHost: 'https://my-app.test:5173',
        }),
...
...
...
})

You need to make sure the clientHost attribute matches where you have vite running and your CSS/JS are being loaded from. If you have multiple apps running at a time vite may load on a different port, or it'll run on a different port if you've specified it in your server configuration.

I'm not happy needing to hardcode the port and protocol in there like that. I would like to see it use the server options a bit more nicely and figure out the port and protocol being used.

[webfansplz]

It will be fixed by #335 and only needs to be configured with the appendTo option to work.

[Smef]

This is available now, and appears to work well. The only config you need is:

        plugins: [
            VueDevTools({
                appendTo: "app.ts",
            }),
            ...
            ...
         ],

It seems the separate window option at https://my-host.test:5173/__devtools__/ isn't yet functional, but this is still significantly better.

[Vorion86]

I can also confirm that the plugin is now working, but the separate window is still just showing "Waiting for connection".

[mreduar]

Hi, I have installed and configured it this way, but it still does not work, when I press Alt + Shift + D, the DevTools does not appear. How can I make it work?

[mreduar]

Maybe it has something to do with the fact that I have to configure the server.hmr.host? because I am using WSL2

export default defineConfig({
    // ...
    server: { 
        hmr: {
            host: 'localhost',
        },
    }, 
});

I have also tried to put instead of app.ts app.js because in no part of my app there is app.ts, but app.js but as soon as I make this change this error appears.

It also looks like this error when I put resources/js/app.js Since the laravel-vite-plugin has as input this path

My vite configuration currently looks something like this

Sincerely I would love to make this new devtools work, since the other one because of the extension does not work well and every time I have to be opening and closing the devtools of the browser so that the information is updated.

[webfansplz]

@mreduar Can you provide a mini repo? Thanks.

[mreduar]

Hi @webfansplz! During these hours debugging and making the new repository and trying to reproduce the issue I realized that in the new project I did not have this problem. So after a lot of trial and error, I realized that the problem was the version of vite. I was using vite ^3.2, I upgraded it to ^5.1 and now it works correctly.

Thank you very much!