Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Metronic x Livewire Navigate

Hi, I'm using Metronic Demo 44 with Livewire v3.6.x, when I navigated using wire:navigate, the page content changed, but CSS of the whole page is not working. This is where the page work normally https://jmp.sh/M5hnoAly

And this is where the page not working normall https://jmp.sh/nrngDzEA

This is my code





    
    

    {{ $title ?? 'Page Title' }}

    

    
    
    

    
    
    
    

    

@yield('styles')

<style>
    button:disabled {
        pointer-events: unset !important;
        cursor: not-allowed !important;
    }
</style>

@livewireStyles




    
    

        
        

            
            @livewire('header-component')
            

        <!--begin::Wrapper-->
        ...rest of my code
        <!--end::Wrapper-->
    </div>
    <!--end::Page-->
</div>
<!--end::App-->

<!--begin::Scrolltop-->
<div id="kt_scrolltop"
     class="scrolltop"
     data-kt-scrolltop="true">
    <i class="ki-outline ki-arrow-up"></i>
</div>
<!--end::Scrolltop-->

<!--begin::Modals-->
@yield('modals')
<!--begin::Modals-->

@livewireScripts

<script data-navigate-once
        src="{{ asset('admin-assets/plugins/global/plugins.bundle.js') }}"></script>
<script data-navigate-once
        src="{{ asset('admin-assets/js/scripts.bundle.js') }}"></script>

<script>
    document.addEventListener('livewire:navigated', () => {
        KTMenu.init = function() {
            KTMenu.createInstances()
            KTMenu.initHandlers()
        }

        KTMenu.init()
        KTApp.init()

        KTScrolltop.createInstances()
    })

    document.addEventListener('livewire:init', () => {
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": true,
            "progressBar": true,
            "positionClass": "toastr-bottom-center",
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }

        Livewire.on('toastr', (event) => {
            const {
                type,
                message
            } = event[0];

            if (['success', 'error', 'info', 'warning'].includes(type)) {
                toastr[type](message)
            } else {
                console.error(`Invalid toastr type: ${type}`)
            }
        })
    })
</script>

@stack('scripts')

I don't know what's wrong. Could you please help me to fix this?

Thank you.

user
Kien Hoanh 1 year ago
Metronic Laravel Bootstrap 5
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Kien Hoanh 1 year ago

Hi Faizal,

Thank you for replying.
I've tried your way, but still no luck.

I have to temporary remove wire:navigate from all links.

Do you have any other suggestions that I could use to overcome this issue?.


user
MLE - 1 year ago

Yah same. We can't make it work.

Did you manage to find the solution?


user
Faizal Author 1 year ago

Hi Kien Hoanh

When using wire:navigate, Livewire performs a client-side navigation that preserves some elements but doesn't properly reinitialize all Metronic components.

The issue is you're only reinitializing a few Metronic components. You need to reinitialize all relevant components after navigation:


document.addEventListener("livewire:navigated", () => {

 // Core components

 KTApp.init();

 KTMenu.createInstances();

 KTMenu.initHandlers();

 KTScrolltop.createInstances();



 // Additional critical components

 KTImageInput.init(); // For image uploads

 KTDrawer.createInstances(); // For drawers/sidebars

 KTScroll.createInstances(); // For custom scrollbars

 KTSticky.createInstances(); // For sticky elements

 KTToggle.createInstances(); // For toggle elements

 KTDialer.createInstances(); // For number inputs

 KTPasswordMeter.createInstances(); // For password strength

 

 // Initialize Bootstrap components

 var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle="tooltip"]"));

 tooltipTriggerList.map(function (tooltipTriggerEl) {

 return new bootstrap.Tooltip(tooltipTriggerEl);

 });

 

 var popoverTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle="popover"]"));

 popoverTriggerList.map(function (popoverTriggerEl) {

 return new bootstrap.Popover(popoverTriggerEl);

 });

})


Some pages might have specific components that need initialization:


document.addEventListener("livewire:navigated", () => {

 // Core initialization (as above)

 

 // Page-specific components

 // Check if specific elements exist before initializing their components

 if (document.querySelector("[data-kt-image-input]")) {

 KTImageInput.createInstances();

 }

 

 // Add any other page-specific initializations

});


If you continue having issues, you might consider using Livewire without wire:navigate for complex pages:


<!-- For simple pages -->

<a href="/dashboard" wire:navigate >Dashboard</a>



<!-- For complex pages with many components -->

<a href="/complex-page" >Complex Page</a>


This way, full-page reloads handle the complex pages.
Let me know if this helps or if you need further adjustments


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(