Rendering Components

 
Be amazing at Livewire
with our in-depth screencasts.
Watch Now

Inline Components

The most basic way to render a Livewire component on a page is using the <livewire: tag syntax:

<div>
    <livewire:show-posts />
</div>

Alternatively you can use the @livewire blade directive:

@livewire('show-posts')

If you have a component inside of a sub-folder with its own namespace, you must use a dot (.) prefixed with the namespace.

For example, if we have a ShowPosts component inside of a app/Http/Livewire/Nav folder, we would indicate it as such:

<livewire:nav.show-posts />

Parameters

Passing Parameters

You can pass data into a component by passing additional parameters into the <livewire: tag.

For example, let's say we have a show-post component. Here's how you would pass in a $post model.

<livewire:show-post :post="$post">

Alternatively, this is how you can pass in parameters using the Blade directive.

@livewire('show-post', ['post' => $post])

Receiving Parameters

Livewire will automatically assign parameters to matching public properties.

For example, in the case of <livewire:show-post :post="$post"> , if the show-post component has a public property named $post, it will be automatically assigned:

class ShowPost extends Component
{
    public $post;

    ...
}

If for whatever reason, this automatic behavior doesn't work well for you, you can intercept parameters using the mount() method:

class ShowPost extends Component
{
    public $title;
    public $content;

    public function mount($post)
    {
        $this->title = $post->title;
        $this->content = $post->content;
    }

    ...
}
In Livewire components, you use mount() instead of a class constructor __construct() like you may be used to.

Like a controller, you can inject dependencies by adding type-hinted parameters before passed-in ones.

use \Illuminate\Session\SessionManager;

class ShowPost extends Component
{
    public $title;
    public $content;

    public function mount(SessionManager $session, $post)
    {
        $session->put("post.{$post->id}.last_viewed", now());

        $this->title = $post->title;
        $this->content = $post->content;
    }

    ...
}

Full-Page Components

If the main content of a page is a Livewire component, you can pass the component directly into a Laravel route as if it were a controller.

Route::get('/post', ShowPosts::class);

By default, Livewire will render the ShowPosts component into the {{ $slot }} of a blade layout component located at: resources/views/layouts/app.blade.php

<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>

For more information on Laravel components, visit Laravel's documentation.

Configuring The Layout Component

If you want to specify a different layout file than the default, you can use the ->layout() method on the view instance you return from render().

class ShowPosts extends Component
{
    ...
    public function render()
    {
        return view('livewire.show-posts')
            ->layout('layouts.base');
    }
}

If you are using a non-default slot in the component, you can also chain on ->slot():

public function render()
{
    return view('livewire.show-posts')
        ->layout('layouts.base')
        ->slot('main');
}

Alternatively, Livewire supports using traditional Blade layout files with @extends.

Given the following layout file:

<head>
    @livewireStyles
</head>
<body>
    @yield('content')

    @livewireScripts
</body>

You can configure Livewire to reference it using ->extends() instead of ->layout():

public function render()
{
    return view('livewire.show-posts')
        ->extends('layouts.app');
}

If you need to configure the @section for the component to use, you can configure that as well with the ->section() method:

public function render()
{
    return view('livewire.show-posts')
        ->extends('layouts.app')
        ->section('body');
}

If you need to pass data from your components to your layout, you can pass the data along with the layout method:

public function render()
{
    return view('livewire.show-posts')
        ->layout('layouts.base', ['title' => 'Show Posts'])
}

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 its mount method. For example:

Route::get('/post/{id}', ShowPost::class);
class ShowPost extends Component
{
    public $post;

    public function mount($id)
    {
        $this->post = Post::find($id);
    }

    ...
}

As you can see, the mount method in a Livewire component is acting like a controller method would as far as its parameters go. If you visit /post/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:

Route::get('/post/{post}', ShowPost::class);
class ShowPost extends Component
{
    public $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }
}

If you are using PHP 7.4, you can also typehint class properties, and Livewire will automatically route-model bind to them. The following component's $post property will be automatically injected with no need for the mount() method.

class ShowPost extends Component
{
    public Post $post;
}

The Render Method

A Livewire component's render method gets called on the initial page load AND every subsequent component update.

In simple components, you don't need to define a `render` method yourself. The base Livewire component class has a dynamic `render` method included.

Returning Blade Views

The render() method is expected to return a Blade view, therefore, you can compare it to writing a controller method. Here is an example:

Make sure your Blade view only has ONE root element.
class ShowPosts extends Component
{
    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::all(),
        ]);
    }
}
<div>
    @foreach ($posts as $post)
        @include('includes.post', $post)
    @endforeach
</div>

Returning Template Strings

In addition to Blade views, you can optionally return a Blade template string from render().

class DeletePost extends Component
{
    public Post $post;

    public function delete()
    {
        $this->post->delete();
    }

    public function render()
    {
        return <<<'blade'
            <div>
                <button wire:click="delete">Delete Post</button>
            </div>
        blade;
    }
}
For inline components like above, you should use the --inline flag during creation: artisan make:livewire delete-post --inline
← Previous Topic

Making Components

Next Topic →

Properties