Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

stayyef's avatar

Laravel Breeze CSS doesn't load with Vite

On a brand new install of Laravel 9, the breeze generated /login and /register pages don't load the css. Upon looking at source code, vite seems to be loading the CSS (and js) using a funny url:

<link rel="stylesheet" href="http://::1:5173/resources/css/app.css" />

I don't understand why this is happening as both layout files have the same vite directive (Breeze uses guest, home uses app, but both use @vite(['resources/css/app.css', 'resources/js/app.js'])

Any tips?

0 likes
14 replies
Sinnbeck's avatar

Try adding this to the vite config and restart the dev command

    server: {
        host: 'localhost',
   },
1 like
stayyef's avatar

@Sinnbeck I saw you wrote this to a different user's question and it worked for them. But I tried the same and it didn't... Maybe I did it wrong? This is how my config file looks:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
            server: {
                host: 'localhost',
            },
        }),
    ],
});
Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@stayyef Close :)

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
                host: 'localhost',
            },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
            
        }),
    ],
});
3 likes
duanyespindola's avatar

I have a similar case. Brand new install ( with Sail over WSL2 ), home page working perfect. Breeze instalation (with Blade), npm install, npm run dev ...

Home page working fine... login can´t get CSS or JS from vite

My localhost:5173/ shows "Laravel+Vite" page

but my localhost/login cant find css on localhost:5173/resources/css/app.css (neither the app.js)

I added and removed the host configuration on vite.. no effect.

Any sugestions?? could be CORS ??

1 like
duanyespindola's avatar

[UPDATE]

  • If I DON'T put the "server" key on vite.config

    • the login page tries to get 0.0.0.0:5173/resources/css/app.css
    • the localhost:5173 page works
  • if i put the "server" key on vite.config

    • the login page tries to get locahost:5173/resources/css/app.css
    • the localhost:5173 page do not work

In both cases the CSS is not loaded ... the network connection fails without any code HTTP code (net::ERR_EMPTY_RESPONDE) like theres is no server listening this port.

1 like
CJTheFirst's avatar

I upgraded to PHP 8.1.0 and reinstall the libraries used then "npm run dev" and it worked

Mick79's avatar

Fresh install - laravel 9.5 and Vite isn't loading css or js. how can this still be a bug?

stkersln's avatar

@Mick79 The solution for me was to rerun the "npm run dev" command. I hope it solves your problem too

Please or to participate in this conversation.