Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Laravel tempalte with Livewire

Hello,

I am trying to convert the Laravel template to Livewire so can use it as SPA for the fast loading of the page without loading all script assets on each page load,

I am following this, https://livewire.laravel.com/docs/navigate#scripts-in-head-are-loaded-once

The below code is from mastar.blade.php, where I have tried to use data-navigate-once so that it will load scripts only on the first load.

<!--begin::Javascript-->
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
@foreach(getGlobalAssets() as $path)
    {!! sprintf('<script src="%s" data-navigate-once></script>', asset($path)) !!}
@endforeach
<!--end::Global Javascript Bundle-->

<!--begin::Vendors Javascript(used by this page)-->
@foreach(getVendors('js') as $path)
    {!! sprintf('<script src="%s"></script>', asset($path)) !!}
@endforeach
<!--end::Vendors Javascript-->

<!--begin::Custom Javascript(optional)-->
@foreach(getCustomJs() as $path)
    {!! sprintf('<script src="%s"></script>', asset($path)) !!}
@endforeach
<!--end::Custom Javascript-->
@stack('scripts')
<!--end::Javascript-->

And I have given links with navigate,

		<a href="/futures" wire:navigate class="menu-link">

The problem is, the page loads correctly, but on top header menu normally we get submenu on hover and then we click to go another page, but when I enable navigate in link, it does not open hover menu,

So the question is, which script is responsible for this header layout menu, which opens the menu when hovering over it?

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)


What are the steps to identify the script responsible for the header layout menu in a Laravel template converted dinosaur game to Livewire?



Hi Jigar,

Sorry for the delay in response. Thank you for your feedback. We appreciate it and will look into fixing this issue in future versions of the template. If you have any other questions or need further assistance, please feel free to ask.



Hello,

This has been resolved with below solution, I think you should fix this in next version as everyone wants SPA only with use of livewire,

https://devs.keenthemes.com/question/components-freeze-after-livewire-navigate


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  :(