i’m trying to apply a style to my page using a Livewire model but it does not work and i can’t find why.
Here is the code of my model:
<?php
namespace AppHttpLivewire;
use LivewireComponent;
class Home extends Component
{
public function render()
{
return view('livewire.home')
->layout('layouts.tesswimlayout');
}
}
Layout File
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/alpinejs" defer></script>
<meta name="description" content="Welkom bij TS">
<title>TS: {{ $title ?? '' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800
bg-gray-100">
<header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm
z-10">
{{-- Navigation --}}
<nav class="container mx-auto p-4 flex justify-between items-
center">
<a href="{{ route('home') }}" class="underline">Home</a>
</nav>
</header>
<main class="container mx-auto p-4 flex-1 px-4">
{{-- Main content --}}
{{ $slot }}
</main>
<x-layout.footer.footer/>
</div>
@stack('script')
</body>
</html>
I’m sure it’s a simple mistake but i’m totally lost atm so any help is apreciated.
2
Answers
It was simple after all, I forgot to add @LivewireScripts to my layout. Thanks to those who tried to help.
Make sure your file is
/resources/views/layouts/tesswimlayout.blade.php