devtools custom tab ignores app baseURL

[jdhartley]

Describe the bug
When opening the tab on an app that uses a baseURL, the devtools <iframe> loads the incorrect URL

The DEVTOOLS_UI_ROUTE is set to '/__nuxt-i18n-micro' but should support '/prefix/__nuxt-i18n-micro' when a baseURL is defined

To reproduce
Set up your nuxt config with

      app: {
        baseURL: '/prefix/',
      },

You will see the <iframe src> is lacking the baseURL. This is most noticeable when your app is served via a proxy

Additional context
I have seen other libraries join nuxt.options.app.baseURL to fix

nuxt.hook('devtools:customTabs', (tabs) => {
  tabs.push({
    view: {
      type: 'iframe',
      src: joinURL(nuxt.options.app?.baseURL, '/__nuxt-i18n-micro'),

I will try to submit a PR with a fix but wanted to open this issue first

[s00d]

Unfortunately, I haven’t seen a single library that does it the way you described. For example, here: https://github.com/sudongyuer/unocss/blob/339f2b2c9be41a5505e7f4509eea1cf00a87a8d1/packages/nuxt/src/index.ts#L93
There are many similar examples. If you could point me to a working example, I’d try to implement it. On my own, I couldn’t figure out how to do it—only by running it entirely on a separate port, but I’d prefer not to do that for now.

If you can do it yourself, that would be great.

[jdhartley]

Thanks for giving it a shot; I will try to take a stab at this soon too and open a PR.

I think my root cause is that I am running nuxt via a proxy, so the typical localhost/__nuxt-i18n-micro url is not available, but it does load at my-proxy-server/baseURL/__nuxt-i18n-micro. It definitely looks like an edge case, so I really do appreciate the time spent investigating it today

Here's tailwind as an example repo using the baseURL to generate its src url:
https://github.com/nuxt-modules/tailwindcss/blob/f47e093472557d0c9caeb64c0d8612701c8855f9/src/viewer.ts#L10