I converted a Laravel 11 project to use Livewire, and it all works except for:
document.addEventListener('livewire:load', function () {
console.log("RAWRRRRRRRRRR");
});
In a component I made.
My app.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet"/>
<!-- Tom-Select -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<!-- Confetti -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
@livewireStyles
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@include('layouts.navigation')
<!-- Page Heading -->
@isset($header)
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endisset
<main>
{{ $slot ?? '' }}
<x-toast/>
</main>
</div>
@livewireScripts
@stack('scripts')
</body>
</html>
Am I doing something wrong? I tried wrapping it in:
window.addEventListener('DOMContentLoaded', function () {
And that doesn't work either
In previous versions of Livewire, you could listen for the livewire:load event to execute JavaScript code immediately before Livewire initialized the page. In Livewire 3, that event name has been changed to livewire:init to match Alpine's alpine:init:
Please or to participate in this conversation.