2

i am working on my new project and technology stack is: laravel 8 + Livewire V2 + Jetstream, to create a single page application (SPA). but I am still confused if its possible SPA in my selected technology stack or not.

I know Livewire no longer supports Turbolinks out of the box so they provided Turbolinks adapter. I have followed the documentation but seems like its not working. please help me to understand the issue and let me know if SPA is possible or not in Livewire version 2.

here is my code:

<div class="min-h-screen bg-gray-100">
        @livewire('navigation-menu')

        <!-- Page Heading -->
        @if (isset($header))
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
        @endif

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>

    @stack('modals')

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
Rajinder
  • 1,131
  • 1
  • 14
  • 29

3 Answers3

2

Livewire Version 1 supported Turbolinks internally. Livewire Version 2 has removed internal support and extracted it into this plugin.

The goal of this livewire version 2 is to provide full Turbolinks/Turbo support in Livewire.

  1. add hotwired/turbo package on your layout below @livewireScripts
  2. add livewire/turbolinks package on your layout below hotwired/turbo package
@livewireScripts

<script type="module">
    import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>

<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
Nashwan
  • 311
  • 4
  • 13
0

You need to install Turbolink module first, Please go Turbolinks documentation Here.

malichamdan
  • 1
  • 1
0

Support for Turbolink has been removed in Livewire 2. So you need to add an extra JS script to make it work. More here => https://github.com/livewire/turbolinks

Just add this after your livewire script:

<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

Example:

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
Md Arif Islam
  • 57
  • 2
  • 6