SPA Mode

Turbolinks

Livewire recommends you use Turbolinks in your apps to make page transitions faster. It is very possible to achieve a "SPA" feeling application written with Turbolinks & Livewire.

If you have Turbolinks installed on the page (installation instructions here), Livewire will handle the rest.

Single Page Components

If you find yourself writing controllers and views that only return a Livewire component, you might want to use Livewire's routing helpers to cut out the extra boilerplate code. Take a look at the following example:

Before

// Route
Route::get('/home', 'HomeController@show');

// Controller
class HomeController extends Controller
{
    public function show()
    {
        return view('home');
    }
}

// View
@extends('layouts.app')

@section('content')
    @livewire('counter')
@endsection

After

// Route
Route::livewire('/home', 'counter');

Note: for this feature to work, Livewire assumes you have a layout stored in resources/views/layouts/app.blade.php that yields a "content" section (@yield('content'))

Custom Layout File

If you use a different layout file or section name, you can configure these in the standard way you configure laravel routes:

// Customizing layout
Route::livewire('/home', 'counter')
    ->layout('layouts.base');

// Customizing section (@yield('body'))
Route::livewire('/home', 'counter')
    ->section('body');
    
// Passing parameters to the layout (Like native @extends('layouts.app', ['title' => 'foo']))
Route::livewire('/home', 'counter')
    ->layout('layouts.app', [
        'title' => 'foo'
    ]);

You can also configure these settings for an entire route group using the group option array syntax:

Route::group(['layout' => 'layouts.base', 'section' => 'body'], function () {
    //
});

Or the fluent alternative:

Route::layout('layouts.base')->section('body')->group(function () {
    //
});

Route Parameters

Often you need to access route parameters inside your controller methods. Because we are no longer using controllers, Livewire attempts to mimick this behavior through it's mount lifecycle hook. For example:

web.php

Route::livewire('/contact/{id}', 'show-contact');

App\Http\Livewire\ShowContact.php

use Livewire\Component;

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount($id)
    {
        $contact = User::find($id);

        $this->name = $contact->name;
        $this->email = $contact->email;
    }

    ...
}

As you can see, the mount method in a Livewire component is acting like a controller method would as far as it's parameters go. If you visit /contact/123, the $id variable passed into the mount method will contain the value 123.

Route Model Binding

Like you would expect, Livewire components implement all functionality you're used to in your controllers including route model binding. For example:

web.php

Route::livewire('/contact/{user}', 'show-contact');

App\Http\Livewire\ShowContact.php

use Livewire\Component;

class ShowContact extends Component
{
    public $contact;

    public function mount(User $user)
    {
        $this->contact = $user;
    }
}

Now, after visiting /contact/123, the value passed into mount will be an instance of the User model with id 123.