I have docker container with Laravel 11 I have installed the vue dependencies as per the instructions on the official documentation. Issue am having is that my vue components are not loading in. I bash into the laravel container I run npm install and npm run dev it loads successfully. when i click on the http://localhost:5173 I get error on page like it doesn’t work.

VITE v5.4.7 ready in 5458 ms

➜ Local: http://localhost:5173/
➜ press h + enter to show help

LARAVEL v11.23.5 plugin v1.0.5

➜ APP_URL: http://localhost:9000

Here are my config files not sure what am doing wrong

Vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Package JS

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

I was expect vue components to display correctly