Level 2
you will have to provide some additional code in order for people to understand your problem
Aug 15, 2023
15
Level 6
Livewire page component layout view not found: [components.layouts.app]
I created new Laravel + Livewire 3 and I got error
Livewire page component layout view not found: [components.layouts.app]
this my app.blade
<body class="py-5 md:py-0">
@include('layouts.shared.mobileMenu')
@include('layouts.shared.header')
<div class="flex overflow-hidden">
@include('layouts.shared.sidebar')
<div class="content">
<main>
{{ $slot }}
</main>
</div>
</div>
<!-- JAVASCRIPT -->
@stack('modals')
@livewireScripts
<!-- BEGIN: JS Assets-->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[" your-google-map-api"]&libraries=places"></script>
<script src="dist/js/app.js"></script>
<!-- END: JS Assets-->
</body>
and this is the sample layout
Level 6
@salfel This is a new setup so that's all the code I can provide
I just change the app.blade because I add theme in the project
Level 2
yes, but could you just share your livewire component in which the error is triggered
Level 6
@salfel After the setup I tried to make a livewire component
Sample/SampleList
<div>
<div class="grid grid-cols-12 gap-6 mt-5">
<div class="intro-y col-span-12 lg:col-span-1">
<!-- BEGIN: Table Head Options -->
<div class="intro-y box">
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60">
<h2 class="font-medium text-base mr-auto">
Table Head Options
</h2>
<div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0">
<label class="form-check-label ml-0" for="show-example-5">Show example code</label>
<input id="show-example-5" data-target="#head-options-table"
class="show-code form-check-input mr-0 ml-3" type="checkbox">
</div>
</div>
<div class="p-5" id="head-options-table">
<div class="preview">
<div class="overflow-x-auto">
<table class="table">
<thead class="table-dark">
<tr>
<th class="whitespace-nowrap">#</th>
<th class="whitespace-nowrap">First Name</th>
<th class="whitespace-nowrap">Last Name</th>
<th class="whitespace-nowrap">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Angelina</td>
<td>Jolie</td>
<td>@angelinajolie</td>
</tr>
<tr>
<td>2</td>
<td>Brad</td>
<td>Pitt</td>
<td>@bradpitt</td>
</tr>
<tr>
<td>3</td>
<td>Charlie</td>
<td>Hunnam</td>
<td>@charliehunnam</td>
</tr>
</tbody>
</table>
<table class="table mt-5">
<thead class="table-light">
<tr>
<th class="whitespace-nowrap">#</th>
<th class="whitespace-nowrap">First Name</th>
<th class="whitespace-nowrap">Last Name</th>
<th class="whitespace-nowrap">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Angelina</td>
<td>Jolie</td>
<td>@angelinajolie</td>
</tr>
<tr>
<td>2</td>
<td>Brad</td>
<td>Pitt</td>
<td>@bradpitt</td>
</tr>
<tr>
<td>3</td>
<td>Charlie</td>
<td>Hunnam</td>
<td>@charliehunnam</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="source-code hidden">
<button data-target="#copy-head-options-table"
class="copy-code btn py-1 px-2 btn-outline-secondary"> <i data-lucide="file"
class="w-4 h-4 mr-2"></i> Copy example code </button>
<div class="overflow-y-auto mt-3 rounded-md">
</div>
</div>
</div>
</div>
<!-- END: Table Head Options -->
</div>
</div>
</div>
Level 2
@anonymouse703 can you please share your livewire class, the error should be either there or the layouts name isnt correct
1 like
Level 2
it may also be (not sure though) because of livewirescripts, because those are included in livewire 3 by default, so you dont need them
Level 6
I thought yesterday that the problem is when I add theme to the project so I made another one but still got error
Livewire page component layout view not found: [components.layouts.app]
When I access the livewire component I made...
Case: This is a new setup project, I make a SampleList component under Livewire/Sample/SampleList when I tried to access the route that contain the component the error occure
route:
use Illuminate\Support\Facades\Route;
use App\Livewire\Sample\SampleList;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::middleware([
'auth:sanctum',
config('jetstream.auth_session'),
'verified',
])->group(function () {
Route::get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');
Route::get('sample', SampleList::class)->name('sample-list');
});
and component is blank since it's new for test
<div>
{{-- Stop trying to control. --}}
</div>
Level 2
the error surely is where you defined your layout, as it seems, your using jetstream and im not familiar with it, but take a look where the layout is defined and make sure it is in the right location
Level 6
@salfel I already solved it.. I change layouts.app in the config/livewire.php
4 likes
Level 1
@anonymouse703 I just followed your solved. i change layouts.app in the config/livewire.php. i get problem in Internal Server Error "Attempt to read property "name" on null". whats change the name your config/livewire.php after you deleted components in config?
Level 14
For anyone else having this problem, the solution is in the Livewire Quickstart Guide:
php artisan livewire:layout
If you are creating a new basic Laravel project to try Livewire ( no Jetstream or similar), you do not get a default layout. This command will create one in the location expected by Livewire.
11 likes
Level 1
php artisan vendor:publish elegir la configuración de livewire 'layout' => 'components.layouts.app', cambiar eso por 'layout' => 'layouts.app',
3 likes
Level 1
@cybert22 Thanks, found.
Level 1
There seems to be a slight gap in the docs. On a brand new Laravel install (basic, no starter kits), install livewire, follow the quickstart, create a new livewire layout, use the Layout attribute to define the layout in my component via #[Layout('layouts.optinform')] and it says the layout can't be found. Though it is in /resources/views/components/layouts/optinform.blade.php. Note that I don't have a livewire config file published. So this is the most basic setup on a brand new L11 install.
It seems Livewire expects EVERY component to use the same layout (by default, app). I could publish the config file and specify the optinform layout.. However, that again is expecting every component to use that layout. Which is why we can specify a layout in the component (via attribute, or on the render method view return, etc..) However, the docs lack in telling us we need to prefix the path with "components" and makes it seem like the path should just be layouts.somelayout, which doesn't work.
So, if you want a specific component to use a different layout, you need to tweak the path by adding components before layouts, like so:
#[Layout('components.layouts.optinform')]
The docs say, or imply, to use #[Layout('layouts.optinform')] - and that doesn't work.
I don't think we should have to add "components" to the path. Livewire should expect it's layouts to be in the components directory anyways.
Then of course, your layout file should be at: /resources/views/components/layouts/optinform.blade.php
Hope that helps someone in the future :)
2 likes
Level 4
@WadeShuler Wow, you just saved me from trying to shove my laptop into the garbage disposal. Seriously though, it's odd that it's not specified in the documentation. Thank you!
Please or to participate in this conversation.