Get your next remote job on LaraJobs.
1 contributor Edit on GitHub Laravel Packages

A comprehensive guide to the Laravel UI package

Table of contents:

A comprehensive guide to the Laravel UI package

Introduction to the Laravel UI package

When working on a web project destined to get some users, having a user-friendly interface is necessary.

That’s where Laravel UI comes into play. It offers a basic yet effective starting point for incorporating some CSS and a JavaScript framework into your Laravel projects. It even supports scaffolding pages related to the authentication of your users.

Now, before you continue, please note that while Laravel UI is still maintained, it’s also an old package that have better alternatives such as Laravel Jetstream and Laravel Breeze. For instance, Laravel UI does not support as many authentication features as these two.

But I noticed that people are still looking for it, so I told myself that I should write a small article about it anyway!

Installing Laravel UI

Getting started with Laravel UI is straightforward:

composer require laravel/ui

This command installs the Laravel UI package. Next, you can install the frontend scaffolding of your choice. The package supports Bootstrap without JavaScript or Bootstrap combined with Vue.js or React:

php artisan ui bootstrap
php artisan ui vue
php artisan ui react

Installing Laravel UI with authentication

Installing the authentication part of Laravel UI is completely optional. If you want to use it, you can install it using the --auth flag:

php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Now, you have a basic user interface for user registration and authentication and you can customize it to your liking.

Laravel UI in action.

Customizing the CSS and JavaScript Laravel UI provides

After installing Laravel UI, you can dive into customizing the CSS and JavaScript.

Laravel uses Vite out-of-the-box for handling these aspects.

If you are still using a CSS preprocessor like Sass, or Less, Vite streamlines the process and you can learn more about it on the official documentation of Laravel.

For JavaScript, Laravel allows flexibility. You can use Vue.js, React, or anything else and even go without JavaScript.

The setup with Laravel UI just makes it easier to integrate these technologies seamlessly into your project.

Here’s what the Vite configuration file looks like when using Vue.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,
detectTls: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
Benjamin Crozat

Written by Benjamin Crozat

Indie hacker, blogger, and AI enthusiast building things with the TALL stack. 🔥

Follow me on:

Recommended articles

Add Vue.js to any Laravel project Add Vue.js to any Laravel project

Let me walk you through adding Vue.js to your Laravel project and be done with it in 5 minutes.

Published on Oct 13, 2023

A complete history of Laravel's versions (2011-2023) A complete history of Laravel's versions (2011-2023)

What's the current version of Laravel? Is there any LTS release you can rely on? And what about the history of the framework? Let's find out!

Modified on Oct 15, 2023

Laravel 10: the upgrade guide from version 9 Laravel 10: the upgrade guide from version 9

I show you how to upgrade your Laravel 9 project to version 10 and help you decide whether the return on investment is worth it.

Modified on Nov 2, 2023

Laravel 10 is out! Here are every new features and changes. Laravel 10 is out! Here are every new features and changes.

Laravel 10 has been released on February 14, 2023. Let's dive into every relevant new features and changes.

Modified on Nov 2, 2023

Laravel 9: the mindful upgrade guide Laravel 9: the mindful upgrade guide

I show you how to upgrade your Laravel 8 project to version 9 and help you decide whether the return on investment is worth it.

Published on Feb 4, 2023

Gold sponsors New

  • Wire Elements
    Beautiful handcrafted Livewire components.
    Check site
Your business here

Partners

If you buy from one of my partners below, I will be compensated at no cost to you. These are services I use or used, and 100% stand behind.

  • Scalable and reliable VPS hosting.
    Bonus: $200 of free credits
    Check site
  • The Google Analytics alternative without compromise.
    Free trial: 30 days
    Bonus: $10 off your first invoice
    Check site
  • Flare
    Track PHP and JavaScript errors in one place.
    Free trial: 10 days
    Check site
  • Keep track of your Google rankings.
    Free trial: 7 days
    Promo code: WELCOME30
    Check site
- / -