How to fix Laravel 8 Breeze CSS not loading with Vite

Breeze is a lightweight authentication scaffold in Laravel that allows developers to set authentication Laravel applications. At times the CSS with Laravel 8 Breeze may not load properly. There are multiple reasons for this. In this article, we will discuss the different methods to fix Laravel 8 Breeze CSS. But, first let us have a short introduction of what Laravel 8 Breeze and Vite are.

There are two solutions you can try to fix css issue

Solution 01

Replace @vite call

Since the plugin cannot work with lower Laravel versions, it comes up just as a raw HTML text on a web page without being used. Therefore, if working with Laravel 8 breeze, you can replace @vite with the following code, in the app.blade, and guest.blade files.

   <link rel="stylesheet" href="{{ asset('css/app.css') }}">
   <script src="{{ asset('js/app.js') }}" defer></script>
    
   {{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}

Solution 02

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

server: {
        host: 'localhost',
   },

Example with more code

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,
            
        }),
    ],
});

What is Laravel 8 Breeze?

Laravel 8 Breeze is a lightweight and simple authentication scaffold that can be used in Laravel applications. It is designed to ease and quickly set up with account management and authentication. Laravel Breeze comes with everything you need to build authentication in your Laravel app. This includes registration, login, email verification, and even password reset features.

Follow the guide to install Laravel Breeze.

What is Vite?

Vite is a build tool for modern web applications. It is a fast and efficient plugin, that allows developers to build their projects quickly with ease. The plugin is built on top of the native ES modules feature in modern browsers, this allows it to be faster than traditional bundlers.

Fix Laravel 8 Breeze CSS not Loading with Vite

VITE build configurations comes with only Laravel 9 & above, if we pull breeze or Jetstream to lower version [Below Laravel 9], it will cause this issue, because lower version got the configuration of Laravel mix. Breeze & Jetstream by default with VITE configuration despite the version of laravel.

You have to update your laravel version above 9, for that you have to update your local PHP version above 8

Upgrade to Laravel 9

VITE build configurations work with Laravel 9 and above. Working with breeze in lower versions can create issues. So when using breeze with Laravel, you should upgrade to Laravel 9.