Rendering Components | Livewire (2024)

You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.x.

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

Inline Components
- Parameters
Full-Page Components
- Configuring The Layout Component
- Route Parameters
- Route Model Binding
The Render Method
- Returning Blade Views
- Returning Template String

Inline Components

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

 1<div>
2 <livewire:show-posts />
3</div>

Alternatively you can use the @livewire blade directive:

 1@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:

 1<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.

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

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

 1@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:

 1class ShowPost extends Component
2{
3 public $post;
4
5 ...
6}

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

  1class ShowPost extends Component
 2{
 3 public $title;
 4 public $content;
 5
 6 public function mount($post)
 7 {
 8 $this->title = $post->title;
 9 $this->content = $post->content;
10 }
11
12 ...
13}

In Livewire components, you use mount() instead of a class constructor __construct() like you may be used to.NB: mount() is only ever called when the component is first mounted and will not be called again even when the component is refreshed or rerendered.

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

  1use \Illuminate\Session\SessionManager;
 2
 3class ShowPost extends Component
 4{
 5 public $title;
 6 public $content;
 7
 8 public function mount(SessionManager $session, $post)
 9 {
10 $session->put("post.{$post->id}.last_viewed", now());
See Also
Reference | LivewireInstallation | Laravelwire:model | LaravelMcDonald's Reveals New Collector's Meal Inspired by Fan-favorite Collectibles
11
12 $this->title = $post->title;
13 $this->content = $post->content;
14 }
15
16 ...
17}

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.

 1Route::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

 1<head>
2 @livewireStyles
3</head>
4<body>
5 {{ $slot }}
6
7 @livewireScripts
8</body>

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

Configuring The Layout Component

If you want to specify a default layout other than the layouts.app, you can override the livewire.layout config option.

 1'layout' => 'app.other_default_layout'

If you need even more control, you can use the ->layout() method on the view instance you return from render().

 1class ShowPosts extends Component
2{
3 ...
4 public function render()
5 {
6 return view('livewire.show-posts')
7 ->layout('layouts.base');
8 }
9}

If your layout has an associated class file, you will need to reference that for any custom logic or properties.

 1class ShowPosts extends Component
2{
3 ...
4 public function render()
5 {
6 return view('livewire.show-posts')
7 ->layout(\App\View\Components\BaseLayout::class);
8 }
9}

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

 1public function render()
2{
3 return view('livewire.show-posts')
4 ->layout('layouts.base')
5 ->slot('main');
6}

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

Given the following layout file:

 1<head>
2 @livewireStyles
3</head>
4<body>
5 @yield('content')
6
7 @livewireScripts
8</body>

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

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

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

 1public function render()
2{
3 return view('livewire.show-posts')
4 ->extends('layouts.app')
5 ->section('body');
6}

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

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

In some cases you don't need to pass your layout name or you want to pass layout data separately, you can use layoutData method:

 1public function render()
2{
3 return view('livewire.show-posts')
4 ->layoutData(['title' => 'Show Posts'])
5}

Route Parameters

Often you need to access route parameters inside your controller methods. Because we are no longer using controllers, Livewire attempts to mimic this behavior through its mount method. For example:

 1Route::get('/post/{id}', ShowPost::class);

  1class ShowPost extends Component
 2{
 3 public $post;
 4
 5 public function mount($id)
 6 {
 7 $this->post = Post::find($id);
 8 }
 9
10 ...
11}

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:

 1Route::get('/post/{post}', ShowPost::class);

 1class ShowPost extends Component
2{
3 public $post;
4
5 public function mount(Post $post)
6 {
7 $this->post = $post;
8 }
9}

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.

 1class ShowPost extends Component
2{
3 public Post $post;
4}

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.

 1class ShowPosts extends Component
2{
3 public function render()
4 {
5 return view('livewire.show-posts', [
6 'posts' => Post::all(),
7 ]);
8 }
9}

 1<div>
2 @foreach ($posts as $post)
3 @include('includes.post', $post)
4 @endforeach
5</div>

Returning Template Strings

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

  1class DeletePost extends Component
 2{
 3 public Post $post;
 4
 5 public function delete()
 6 {
 7 $this->post->delete();
 8 }
 9
10 public function render()
11 {
12 return <<<'blade'
13 <div>
14 <button wire:click="delete">Delete Post</button>
15 </div>
16 blade;
17 }
18}

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