Turbo ( SPAs )
Transform your apps into single-page applications ( SPAs ) using Turbo.
You can introduce the speed and functionality of single-page applications (SPA) to your projects using Turbo.
"Turbo bundles several techniques for creating fast, modern, progressively enhanced web applications without using much JavaScript. It offers a simpler alternative to the prevailing client-side frameworks which put all the logic in the front-end and confine the server side of your app to being little more than a JSON API." - Turbo Handbook

Installation

npm

You can install Turbo by running the following npm command in the root of your project.
npm i @hotwired/turbo
Then you can require or import Turbo.
import * as Turbo from "@hotwired/turbo"

Skypack

To avoid manual installation, there is also a Skypack available which you can add to the <head></head> of your layout.
<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>

Livewire/Turbo Plugin

In order for Turbo to work properly with Livewire ( and therefore CBWIRE ), you will also need to include the Turbo plugin below your wireScripts() call in your layout.
#wireScripts()#
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
</body>
Note: You MUST have either the data-turbolinks-eval="false" or data-turbo-eval="false" attributes added to the script tag (having both won't hurt).

Usage

Once Turbo is installed, you should find that clicking links and submitting forms within your app does not require any page refreshes.
Turbo listens for various UI events and fetches the updated content from the server via background XHR requests.
For additional information on how Turbo can be used and configured, please see https://turbo.hotwired.dev/
Export as PDF
Copy link
On this page
Installation
npm
Skypack
Livewire/Turbo Plugin
Usage