What is Laravel/UI and How Does It Work?

Introduction:

Hello, fellow developers. What’s up?, I hope you are doing fine. In this extended tutorial, we will discuss the laravel/ui package. The laravel/ui package is created & managed by laravel core team members. 

This package is for generating front-end scaffolding for your fresh Laravel application. It has very basic front-end presets included. Laravel has various front-end packages in the market, but laravel/ui still trendy because of its simplicity.

As I told you earlier, laravel/ui has some basic front-end presets. But you can do more advanced applications using this package. You can generate both with authentication and without authentication using this package.

Downloading Laravel Application:

Now, Let’s start our tutorial. First, you must download a fresh copy of the Laravel application from the internet. We will use the composer command to do that. Please copy and paste the command into your terminal and hit enter.

composer create-project laravel/laravel laravelui

Installing Laravel/UI Package:

We will go to our project root directory and open a new terminal. Please copy & paste the code below and hit enter to install the package inside the terminal.

composer require laravel/ui

Generating Frontend Scaffolding Without Auth using Laravel/UI Package:

Well, our package installation is complete. Now, we will type the following command to create a front-end scaffolding. We will use one between three presets if you need just front-end scaffolding without authentication. You can check out the below commands.

// Generate basic scaffolding without authentication using Bootstrap.
php artisan ui bootstrap

// Generate basic scaffolding without authentication using Vue.
php artisan ui vue

// Generate basic scaffolding without authentication using React.
php artisan ui react

Generating Frontend Scaffolding With auth using Laravel/UI Package:

Similarly, We will use one between three presets if you need just front-end scaffolding with authentication. You can check out the below commands.

// Generate basic scaffolding with authentication using Bootstrap.
php artisan ui bootstrap --auth

// Generate basic scaffolding with authentication using Vue.
php artisan ui vue --auth

// Generate basic scaffolding with authentication using React.
php artisan ui react --auth

Compiling Frontend CSS Assets of Laravel/UI Package:

Well, our front-end scaffold-generating command is concluded. Now, we will type the following command to compile our CSS. Please copy & paste the code below and hit enter to install the package inside the terminal.

npm install

After completing the upper command then, use the below command in the same way.

npm run dev

Writing Vue Components:

I assume you already used the generate vue front-end scaffold ding command earlier. Now, we will create our first Vue view component. You just copy & paste the following snippet into your views> js > app.js file.

//I’ve changed the default name to demo

import DemoComponent from './components/DemoComponent.vue';
Vue.component('demo-component', DemoComponent);

Next, copy & paste the following code into your home.blade.php file.

@extends('layouts.app')

@section('content')

    <example-component></example-component>

@endsection

You can do the same way for React. Just use the react command, and the rest of the things are similar to vue scaffolding.

TEST THE APPLICATION:

At last, we will start our local server using our artisan command. php artisan serve If there is no problem, our code will work fine, and the project will be running now at http://127.0.0.1:8000/ or http://locahost:8000/. You can learn more from laravel/ui documentation.

CONCLUSION:

Finished! That’s all about our tutorial. I’ve tried to teach you the most updated & tested things in this tutorial. Thank you so much for reading the whole tutorial from the beginning. If this tutorial helps you a little bit, then remember to share this post on social media. If you have questions, suggestions, or tips regarding this post, let us know via our Contact Us page.