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.

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.

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']) --}}

Leave a Comment