vuejs / devtools-next

The next iteration of Vue DevTools
https://devtools.vuejs.org/
MIT License
1.48k stars 107 forks source link

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

Closed alokVishu closed 6 months ago

alokVishu commented 8 months ago

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 commented 8 months ago

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

alokVishu commented 8 months ago

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

webfansplz commented 8 months ago

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 commented 7 months ago

Hello @webfansplz,

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

Vorion86 commented 7 months ago

I've got the same problem and it seems other do too, since there already is a discussion without a real result https://github.com/vuejs/devtools-next/discussions/123

scottbrodersen commented 6 months ago

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 commented 6 months ago

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 commented 1 month ago

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