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

[alokVishu]

Hello @webfansplz,

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

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

[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

[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,
          },
        },
      },
    };