maryUI Bootcamp - Jetstream & Breeze

new The real time chat demo: Ping →
Jetstream & Breeze

If you have a project with Jetstream/Breeze the maryUI installer adds a global prefix x-mary- on maryUI
components to avoid naming collision. You are ready to go, just add maryUI components to your project.
Trade-off
Remember that starter kits add a dozen files that you probably will not use. You have to tweak and
maintain them by yourself, because they are copied into your project.
On the other hand you can think it is a waste of time to build everything from the ground. But at least later
you will have minimal code to maintain.
Stater kit: works out of the box, but adds extra code to maintain.
From the ground: needs extra time to setup, but adds minimal code.
Let's see how easy it is to implement exactly the features we need from the ground in no time, without
starter kits.
Layout
Components
Authentication
Register
Go ahead and add Authentication e Register as described on the following sections.
Layout
There's not much to say here. As you can see on this Bootcamp, maryUI ships with a default layout. You
can look for another layout alternative in the docs, but this is very personal.
Components
The maryUI components provide a great DX and you don't have to worry about maintaining the
components by yourself.
Breeze
<div>
<x-input-label for="name" :value="__('Name')" />
<x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name'
<x-input-error :messages="$errors->get('name')" class="mt-2" />
</div>
Jetstream
<div>
<x-label for="name" value="{{ __('Name') }}" />
<x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" re
</div>
maryUI
<x-mary-input label="Name" wire:model="name" />
Authentication
Here is what routes/web.php looks like with Authentication.
Login route.
Logout route.
Protect some routes.
Go ahead and copy/paste this.
use Illuminate\Support\Facades\Route;
use Livewire\Volt\Volt;
// Users will be redirected to this route if not logged in
Volt::route('/login', 'login')->name('login');
// Define the logout

Route::get('/logout', function () {
auth()->logout();
request()->session()->invalidate();
request()->session()->regenerateToken();
return redirect('/');
});
// Protected routes here

Route::middleware('auth')->group(function () {
Volt::route('/', 'index');
Volt::route('/users', 'users.index');
Volt::route('/users/create', 'users.create');
Volt::route('/users/{user}/edit', 'users.edit');
// ... more
});
Create an empty layout at resources/views/components/layouts/empty.blade.php to use it as our login
page.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, vie
<meta name="csrf-token" content="{{ csrf_token() }}">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen font-sans antialiased bg-base-200/50 dark:bg-base-200">
{{-- You could elaborate the layout here --}}
{{-- The important part is to have a different layout from the main app layout --}}
<x-main full-width>
<x-slot:content>
{{ $slot }}
</x-slot:content>
</x-main>
</body>
</html>
And here is the login component.
php artisan make:volt login --class
use Livewire\Attributes\Layout;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Title;
use Livewire\Volt\Component;
new
#[Layout('components.layouts.empty')] // <-- Here is the `empty` layout
#[Title('Login')]
class extends Component {
#[Rule('required|email')]
public string $email = '';
#[Rule('required')]
public string $password = '';
public function mount()

{
// It is logged in
if (auth()->user()) {
}
}
public function login()

{
$credentials = $this->validate();
if (auth()->attempt($credentials)) {
request()->session()->regenerate();
return redirect()->intended('/');
}
$this->addError('email', 'The provided credentials do not match our records.');

}
}
<div class="md:w-96 mx-auto mt-20">

<div class="mb-10">Cool image here</div>
<x-form wire:submit="login">
<x-input label="E-mail" wire:model="email" icon="o-envelope" inline />
<x-input label="Password" wire:model="password" type="password" icon="o-key" inline />
<x-slot:actions>
<x-button label="Create an account" class="btn-ghost" link="/register" />
<x-button label="Login" type="submit" icon="o-paper-airplane" class="btn-primary" sp
</x-slot:actions>
</x-form>
</div>
That is it!
Try to navigate to a protected route, and you will be redirected to the login page. The default app layout
shipped with maryUI shows the authenticated user and logout button for you.
Register
Add this public extra route to web.php .
use Livewire\Volt\Volt;
Volt::route('/register', 'register');
Create the registration form.
php artisan make:volt register --class
use App\Models\User;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Title;
use Livewire\Volt\Component;
use Illuminate\Support\Facades\Hash;
new
#[Layout('components.layouts.empty')] // <-- The same `empty` layout
#[Title('Login')]
class extends Component {
#[Rule('required')]
public string $name = '';
#[Rule('required|email|unique:users')]
public string $email = '';
#[Rule('required|confirmed')]
public string $password = '';
#[Rule('required')]
public string $password_confirmation = '';
public function mount()

{
// It is logged in
if (auth()->user()) {
}
}
public function register()

{
$data = $this->validate();
$data['avatar'] = '/empty-user.jpg';
$data['password'] = Hash::make($data['password']);
$user = User::create($data);
maryUI
auth()->login($user); Search K
request()->session()->regenerate();
}
}
<div class="md:w-96 mx-auto mt-20">

<div class="mb-10">Cool image here</div>
<x-form wire:submit="register">
<x-input label="Name" wire:model="name" icon="o-user" inline />
<x-input label="E-mail" wire:model="email" icon="o-envelope" inline />
<x-input label="Password" wire:model="password" type="password" icon="o-key" inline />
<x-input label="Confirm Password" wire:model="password_confirmation" type="password" ico
<x-slot:actions>
<x-button label="Already registered?" class="btn-ghost" link="/login" />
<x-button label="Register" type="submit" icon="o-paper-airplane" class="btn-primary"
</x-slot:actions>
</x-form>
</div>
It is done!
Hit the /register route on browser and create an account.
As you are logged in, file uploads will work in the HTML Editor component
Spotlight A wrap
maryUI Sponsor

maryUI Bootcamp - Jetstream & Breeze

Uploaded by

Copyright:

Available Formats

maryUI Bootcamp - Jetstream & Breeze

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

maryUI Bootcamp - Jetstream & Breeze

Uploaded by

Copyright:

Available Formats

new The real time chat demo: Ping →

Jetstream & Breeze

you will have minimal code to maintain.

Go ahead and add Authentication e Register as described on the following sections.

<x-mary-input label="Name" wire:model="name" />

Here is what routes/web.php looks like with Authentication.

Protect some routes.

Go ahead and copy/paste this.

// Define the logout

// Protected routes here

Create an empty layout at resources/views/components/layouts/empty.blade.php to use it as our login

php artisan make:volt login --class

public function mount()

public function login()

$this->addError('email', 'The provided credentials do not match our records.');

<div class="md:w-96 mx-auto mt-20">

Add this public extra route to web.php .

Create the registration form.

php artisan make:volt register --class

public function mount()

public function register()

<div class="md:w-96 mx-auto mt-20">

Hit the /register route on browser and create an account.

You might also like