How to add a frontend framework to your Laravel Breeze setup

After successfully setting up a Laravel application with Laravel Breeze, you have all authentication views, routes, and controllers set up. However, these views use basic HTML and Tailwind CSS. You can extend this to suit your needs by installing a frontend framework.

Laravel allows you to build single-page applications (SPAs) with these authentication features too.

Laravel Breeze lets you use inertia.js (powered by either Vue or React), which you can easily install to generate these scaffolds if you want.

Install preferred framework

To install these SPA scaffolds, run:

php artisan breeze:install vue

// Or
php artisan breeze:install react

The previously generated authentication files (mostly Blade files) will be re-written by Laravel Breeze to use the framework.

Compile assets

We’ll want to minify the CSS and JavaScript files that were generated in the css and js folders in the resources folder, respectively.

This will give us faster load time and will also result in a reduced number of HTTP requests (since all JavaScript and CSS files have been compiled down to one file each).

Also, since Laravel gives you the freedom to use your own CSS pre-processor, you will want to compile your code down to what the browser can interpret.

Now, we need to compile our static assets to complete the installation. Do so by running these commands:

npm install
npm run dev

Also notice that in your public folder, you now have css and js directories that hold compiled files which you can use in your code.