Cannot able to use `vite-dev-tools` in laravel project.

[alokVishu]

Hello,

I am trying to use the vite-plugin-vue-devtools in a Vuejs + Laravel-based project but I cannot use it because Laravel serves the template in 8000 port by php artisan serve command and vite run on 5173

How to resolve it?

[chiehw]

Is there any output from vite? devtool-next will be injected by vite

[alokVishu]

@chiehw, there is no output from Vite. If you open http://localhost:5173/__devtools__/, you will only see the message "Waiting for connection..."

[webfansplz]

Hello,

I am trying to use the vite-plugin-vue-devtools in a Vuejs + Laravel-based project but I cannot use it because Laravel serves the template in 8000 port by php artisan serve command and vite run on 5173

How to resolve it?

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

[alokVishu]

Hello @webfansplz,

I have tried this, but it doesn't seem to work for me.

[Vorion86]

I've got the same problem and it seems other do too, since there already is a discussion without a real result #123

[scottbrodersen]

My situation is similar but my Vue app that is served by a Go app. The Vue app makes calls to the Go backend as well. I got things working by running the Vue app using vite (port 5173) and configuring a proxy to route backend calls to the Go server (port 3000).

My server config in vite.config.js:

    config.server = {
      hmr: {
        host: 'localhost',
        overlay: true,
      },
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          secure: false,
          },
        },
      },
    };

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

[lighth7015]

Not working for me, I have an example of this not working on stackblitz.

[b-maslennikov]

I have the same problem using netlify dev
{ appendTo: './src/app.ts' } does not work.