Livewire Starter Kit without volt

I really liked the starter kits, especially Livewire because that's what I normally use in my applications, but I can't like the choice of using Volt, I don't like the idea it brings of "everything in one file", things don't seem to work well there, wouldn't it be nice to have the option of using traditional Livewire?

LaryAI

1 year ago

Level 58

If you prefer using traditional Livewire components without the Volt approach, you can certainly set up a Laravel project with Livewire in the conventional way. Here's a step-by-step guide to get you started:

Create a New Laravel Project:

First, create a new Laravel project using Composer:
```
composer create-project laravel/laravel your-project-name
```
Install Livewire:

Navigate into your project directory and install Livewire via Composer:
```
cd your-project-name
composer require livewire/livewire
```
Publish Livewire Assets:

Publish the Livewire configuration and assets:
```
php artisan livewire:publish
```
Create a Livewire Component:

You can create a new Livewire component using the Artisan command:
```
php artisan make:livewire ExampleComponent
```
This will create two files: ExampleComponent.php in app/Http/Livewire and example-component.blade.php in resources/views/livewire.

Use the Livewire Component in a Blade View:

You can include your Livewire component in a Blade view like this:

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Livewire Example</title>
    @livewireStyles
</head>
<body>
    @livewire('example-component')

    @livewireScripts
</body>
</html>

Define Component Logic:

In your ExampleComponent.php, you can define the logic for your component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ExampleComponent extends Component
{
    public $message = 'Hello, Livewire!';

    public function render()
    {
        return view('livewire.example-component');
    }
}

Design the Component View:

In your example-component.blade.php, you can design the view:
```
<div>
    <h1>{{ $message }}</h1>
</div>
```
Run Your Application:

Finally, serve your application to see Livewire in action:
```
php artisan serve
```

By following these steps, you can use Livewire in the traditional way without the Volt approach, keeping your components and views in separate files. This setup allows you to maintain a clear separation of concerns and structure your application as you prefer.

Tray2

1 year ago

Level 73

@ivanfuhr-72282810 I agree with you, Volt makes the code look like a mess. I did a test to remove volt, and it wasn't super tricky.

I did the login page.

app/Livewire/Auth/Login.php

<?php

namespace App\Livewire\Auth;

use Illuminate\Auth\Events\Lockout;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Str;
use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;
use Livewire\Component;

#[Layout('components.layouts.auth')]
class Login extends Component
{
    #[Validate('required|string|email')]
    public string $email = '';

    #[Validate('required|string')]
    public string $password = '';

    public bool $remember = false;

    /**
     * Handle an incoming authentication request.
     */
    public function login(): void
    {
        $this->validate();

        $this->ensureIsNotRateLimited();

        if (! Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
            RateLimiter::hit($this->throttleKey());

            throw ValidationException::withMessages([
                'email' => __('auth.failed'),
            ]);
        }

        RateLimiter::clear($this->throttleKey());
        Session::regenerate();

        $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
    }

    /**
     * Ensure the authentication request is not rate limited.
     */
    protected function ensureIsNotRateLimited(): void
    {
        if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
            return;
        }

        event(new Lockout(request()));

        $seconds = RateLimiter::availableIn($this->throttleKey());

        throw ValidationException::withMessages([
            'email' => __('auth.throttle', [
                'seconds' => $seconds,
                'minutes' => ceil($seconds / 60),
            ]),
        ]);
    }

    /**
     * Get the authentication rate limiting throttle key.
     */
    protected function throttleKey(): string
    {
        return Str::transliterate(Str::lower($this->email).'|'.request()->ip());
    }
    public function render()
    {
        return view('livewire.auth.login');
    }
}

`resources/views/livewire/auth/login.blade.php``

<div class="flex flex-col gap-6">
    <x-auth-header title="Log in to your account" description="Enter your email and password below to log in" />

    <!-- Session Status -->
    <x-auth-session-status class="text-center" :status="session('status')" />

    <form wire:submit="login" class="flex flex-col gap-6">
        <!-- Email Address -->
        <flux:input wire:model="email" label="{{ __('Email address') }}" type="email" name="email" required autofocus autocomplete="email" placeholder="[email protected]" />

        <!-- Password -->
        <div class="relative">
            <flux:input
                wire:model="password"
                label="{{ __('Password') }}"
                type="password"
                name="password"
                required
                autocomplete="current-password"
                placeholder="Password"
            />

            @if (Route::has('password.request'))
                <x-text-link class="absolute right-0 top-0" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </x-text-link>
            @endif
        </div>

        <!-- Remember Me -->
        <flux:checkbox wire:model="remember" label="{{ __('Remember me') }}" />

        <div class="flex items-center justify-end">
            <flux:button variant="primary" type="submit" class="w-full">{{ __('Log in') }}</flux:button>
        </div>
    </form>

    <div class="space-x-1 text-center text-sm text-zinc-600 dark:text-zinc-400">
        Don't have an account?
        <x-text-link href="{{ route('register') }}">Sign up</x-text-link>
    </div>
</div>

routes/auth.php

<?php

use App\Http\Controllers\Auth\VerifyEmailController;
use Illuminate\Support\Facades\Route;
use Livewire\Volt\Volt;

Route::middleware('guest')->group(function () {
    Route::get('login', \App\Livewire\Auth\Login::class)->name('login');

    Volt::route('register', 'auth.register')
        ->name('register');

    Volt::route('forgot-password', 'auth.forgot-password')
        ->name('password.request');

    Volt::route('reset-password/{token}', 'auth.reset-password')
        ->name('password.reset');

});

Route::middleware('auth')->group(function () {
    Volt::route('verify-email', 'auth.verify-email')
        ->name('verification.notice');

    Route::get('verify-email/{id}/{hash}', VerifyEmailController::class)
        ->middleware(['signed', 'throttle:6,1'])
        ->name('verification.verify');

    Volt::route('confirm-password', 'auth.confirm-password')
        ->name('password.confirm');
});

Route::post('logout', App\Livewire\Actions\Logout::class)
    ->name('logout');

ivanfuhr-72282810

1 year ago

Level 2

@Tray2 oh cool, I think it won't be that hard to remake the livewire starter kit without volts, I'll try to do it here

Please or to participate in this conversation.