Turbolink is not working in Livewire version 2

Question

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/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>

sorry i didn't understand your question. but i am using normal command "php artisan make:livewire ShowPosts" to create a livewire component — Rajinder
– Rajinder, Commented Feb 19, 2021 at 8:45

Nashwan · Accepted Answer · 2021-11-05 16:35:51Z

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.

add hotwired/turbo package on your layout below @livewireScripts
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/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

answered Nov 5, 2021 at 16:35

Nashwan

3415 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

malichamdan · Accepted Answer · 2021-02-22 17:38:57Z

0

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

answered Feb 22, 2021 at 17:38

malichamdan

11 bronze badge

Comments

Md Arif Islam · Accepted Answer · 2021-06-18 23:28:31Z

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/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

Example:

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

answered Jun 18, 2021 at 23:28

Md Arif Islam

852 silver badges6 bronze badges

1 Comment

Yousef Altaf Over a year ago

did you try this?

Collectives™ on Stack Overflow

Turbolink is not working in Livewire version 2

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related