Get started with laravel/ui; kickstart your project.

Benjamin Crozat

Modified on Jan 25, 2024 • 2 comments • Edit on GitHub

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.

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