Laravel 10 Sail with Nuxt 3 and Vite: Browser can't connect to 24678

Question

I have a monorepo with Laravel 10 and Nuxt 3 being installed to a subdirectory. I don't want to run the nuxt dev server from my host. Instead I want to run it using Laravel Sail, because Sail already has all dependencies (npm) installed.

The directory structure is:

I also wrote myself some small Artisan commands to make life a bit easier:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;

class InstallFrontend extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'install:frontend';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Install frontend dependencies';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        $result = Process::forever()->run('npm --prefix ./frontend install', function (string $type, string $output) {
            $this->info($output);
        });
    }
}

and

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Process;
use Illuminate\Process\Pipe;

class runFrontend extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'run:frontend';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Runs the frontend in dev mode.';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        Process::path(base_path() . '/frontend')->forever()->run('npm run dev -- --host 0.0.0.0', function (string $type, string $output) {
            $this->info($output);
        });
    }
}

Both commands just run totally fine.

The problem now: I can't connect to the nuxt dev server through websockets. As far as I can see Nuxt 3 uses Vite for the dev server. But the browser always refuses to connect for HMR:

I already opened the needed ports in my docker-compose.yml:

version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        ports:
            - '${APP_PORT:-80}:80'
            - '${FRONTEND_PORT:-3000}:3000'
            - '${VITE_SERVER_PORT:-5173}:5173'
            - 24678:24678
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis

And added this to the nuxt.config.ts:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt', 'nuxt-icon'],
  runtimeConfig: {
    public: {
      baseURL: 'http://localhost'
    }
  },
  vite: {
    server: {
      hmr: {
        protocol: "ws",
        host: "localhost"
      }
    }
  }
})

But nothing helps. The Browser can't connect and I don't know why.

Also there is a very strange behaviour I mentioned accidentally: I had this in my artisan command before:

        Process::path(base_path() . '/frontend')->forever()->run('npm run dev --host 0.0.0.0', function (string $type, string $output) {
            $this->info($output);
        });

Instead of:

        Process::path(base_path() . '/frontend')->forever()->run('npm run dev -- -o --host 0.0.0.0', function (string $type, string $output) {
            $this->info($output);
        });

Which leads to a new subdirectory being created in the /frontend directory with it's own .nuxt folder:

The very strange thing is, that I was able to reach the dev server with working HMR, but it is not my actual app, because the dev server served the newly created subdirectory. So the browser just showed some default Nuxt 3 app:

So the problem does not seem to be related to any connection errors itself. Vite just seems to be unable to serve the already existing app from the .nuxt folder?

Can anyone help me getting this finally working? :)

Thanks in advance!