CODEWITHSUNDEEP
laravellaravel-bladelaravel-livewirelaravel-jetstreamlivewires
dev_ip
dev_ip

Reputation: 61

wire:navigate causes conflicts in my template

I have a template called Minia that includes everything (js, tailwind, jetstream, livewire). However, when I add the wire:navigate to some link, it takes me to the view without loading the page and it works but the template gets completely misconfigured. It seems that livewire conflicts with the js files and styles, leaving the page almost blocked. The only functional are some href, and the rest is not working, ie is almost 100% blocked, but if I do the same exercise in a new project without loading any js, etc., the wire:navigate works perfectly without causing conflicts.

It should be noted that the console does not show me any error.

//sidebar.blade.php
//here I have the wire:navigate
<li>
    <a wire:navigate href="{{ url('starter') }}" >Starter Page</a>
</li>

//master.blade.php
//here I have the main layout where I add the styles and livewire scripts.
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title>@yield('title') | Minia - Laravel 10 & TailwindCss Admin & Dashboard Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta content="Tailwind Admin & Dashboard Template" name="description" />
    <meta content="" name="Themesbrand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="{{ URL::asset('build/images/favicon.ico') }}" />
    <!-- css files -->
    @include('layouts.head-css')
    <!-- Styles -->
    @livewireStyles
</head>

<body data-mode="light" data-sidebar-size="lg" class="group">
    <!-- sidebar -->
    @include('layouts.sidebar')
    <!-- topbar -->
    @include('layouts.topbar')
    <!-- content -->
    @yield('content')
    <!-- rtl-ltr -->
    @include('layouts.customizer')
    <!-- script -->
    @include('layouts.vendor-scripts')
    <!-- Scripts -->
    @vite(['resources/js/app.js'])
    @livewireScripts
</body>
</html>

I have tried everything with the official documentation and nothing. I have done all this: https://livewire.laravel.com/docs/installation

'inject_assets' => false,

Also all this: https://livewire.laravel.com/docs/navigate#javascript-hooks Also all this: https://livewire.laravel.com/docs/navigate#dont-rely-on-domcontentloaded

But nothing has worked for me.

Help please, I want and need to use wire:navigate in this template. I have checked the 21 questions similar to mine here in the forum and none of them worked for me.

Upvotes: 1

Views: 264

Answers (2)

Muhammed Yakubu
Muhammed Yakubu

Reputation: 26

Ok great, I was equally faced with similar challenge but then I keep asking myself how can i drop Livewire just because of this little issues? and how can I not use wire:navigate because of this same issues till i was able to figure out a way.

According to the docs: https://livewire.laravel.com/docs/navigate#dont-rely-on-domcontentloaded

this event listener was suggested

document.addEventListener('livewire:navigated', () => { 
    // any code you place here will be fired after livewire has successfully swapped the initial page with the on you navigated to
})

Great, so in my case i was Using Flowbite so i had to copy a function from their Docs page and that was all.

document.addEventListener('livewire:navigated', () => { 
     // console.log('navigated to a new page');
      initFlowbite();
  })

Upvotes: 0

dev_ip
dev_ip

Reputation: 61

I contacted the support of the template I am using (minia) and they informed me that it is not feasible to use the wire:navigate in the template because it causes conflicts with the libraries and js files that they have. I'll have to start from scratch with a cleaner template. Thank you all.

Upvotes: 1

Related Questions