Turbolink не работает в Livewire версии 2

Question

Я работаю над своим новым проектом и технологическим стеком: laravel 8 + Livewire V2 + Jetstream для создания одностраничного приложения (SPA). но я все еще не понимаю, возможно ли это SPA в моем выбранном технологическом стеке или нет.

Я знаю, что Livewire больше не поддерживает Turbolinks из коробки, поэтому они предоставили адаптер Turbolinks . Я следил за документацией, но, похоже, она не работает. пожалуйста, помогите мне разобраться в проблеме и сообщите, возможно ли использование SPA в Livewire версии 2.

вот мой код:

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

Answer 1

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 support in Livewire.

1. add Turbolinks/Turbohotwired/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>

Answer 2

Сначала вам необходимо установить модуль Turbolink, пожалуйста, перейдите сюда в документации Turbolinks .

Answer 3

Следуйте процедуре на скриншоте.

Answer 4

Поддержка Turbolink была удалена в Livewire 2. Поэтому вам нужно добавить дополнительный сценарий JS, чтобы он работал. Подробнее здесь => https://github.com/livewire/turbolinks

Просто добавьте это после вашего скрипта livewire:

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

Пример:

          @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>