Get your next remote job on LaraJobs.
Laravel Packages

Get started with laravel/ui; kickstart your project.

Benjamin Crozat
Modified on Jan 25, 2024 2 comments Edit on GitHub
Get started with laravel/ui; kickstart your project.

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 has 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 why not write a small article about it anyway?

Installing laravel/ui

Getting started with laravel/ui is straightforward. Install it via the following command:

composer require laravel/ui

Next, you can install the frontend scaffolding of your choice. Remember, the next command won’t add any component to your app. It will just make your app ready for whatever front-end framework you want to use. The laravel/ui 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

Finally, install and compile your front-end dependencies:

npm install
npm run dev

Installing laravel/ui with authentication features

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.

Before refreshing your browser, make sure to install and compile your front-end dependencies:

npm install
npm run dev

You now have everything you need to move forward on your project.

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

2 comments

LuisCardeBu
LuisCardeBu 8mos ago

Although the information is correct, the content doesn´t meet the title's promise. How do you invoke your components? What does the --auth option do? Does the installed auth scaffold work through the installed framework?

Benjamin Crozat
Benjamin Crozat Modified 8mos ago

Thanks for letting me know about the shortcomings of this article! I updated it with the missing information and clarifications.

Once you install the authentication related pages and components using the --auth option, run npm install and npm run dev, and refresh your browser to test the new pages. Then, you will be able to make any change you want.

I won't cover how to do that though, because it's not in the scope of this article.

Get help or share something of value with other readers!

Great deals for enterprise developers
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -