How can I tell turbo drive is working?

1

I thought that turbo drive, on link navigation, just replaces the body of the html with the new page. I seem to be getting a full page reload. Does anyone know how I can check that turbo drive is working?

// index.js
import * as Turbo from "@hotwired/turbo"

window.Turbo = Turbo

document.addEventListener("turbo:load", function(e) {
  console.group()
  console.log("turbo:load")
  console.log(e)
  console.groupEnd()
})

<!-- index.html -->
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="turbo-root" content="/app">
  <title>Turbo Drive Test</title>
  <meta name"tag" content="index.html">
  <script src="index.js" async></script>
</head>

<body>
  <h1>Hello From Index</h1>
  <a data-turbo="true" href="/next">Go To Next</a>

</body>
</html>

<!-- next.html -->
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="turbo-root" content="/app">
  <title>Turbo Drive Test</title>
  <meta name"tag" content="next.html">
  <script src="index.js" async></script>
</head>

<body>
  <h1>Hello From Next</h1>
  <a data-turbo="true" href="/">Go To Home</a>
</body>
</html>
2

More evidence! It seems that Turbo Drive isn’t hooking into <a href> properly. On initial load a turb-frame is correctly intercepted and makes a fetch request, but when I click a link within a turbo-frame the request type is document

(word is the request from the turbo-frame src)

Initial load
1618876758_grim

3

Link click request
1618876766_grim

4

okay, so this was wrong, word of warning to those copy pasting. But it still seems that turbo isn’t just replacing the body when clicking on an <a href>

5

To be clear, did you ever get this working? I’m trying to play around with Hotwire and I have this script, like yours:

import * as Turbo from "@hotwired/turbo";

Turbo.session.drive = true;

document.addEventListener("turbo:load", function() {
	console.log( "turbo:load event" );
});
document.addEventListener("turbo:before-visit", function() {
	console.log( "turbo:before-visit event" );
});
document.addEventListener("turbo:before-fetch-request", function() {
	console.log( "turbo:before-fetch-request event" );
});
document.addEventListener("turbo:before-render", function() {
	console.log( "turbo:before-render event" );
});

However, when I run the site, nothing seems to be intercepted and the only event that ever gets logged is turbo:load. Furthermore, every link shows a document request in the Chrome network. I’m at a loss.

6

For anyone else that comes here, my issue seems to be related to having a non-.html file extension (I’m using .cfm files) – Remove isHTML by f6p · Pull Request #519 · hotwired/turbo · GitHub

7

Late to it, but because you import Turbo with import * as Turbo from '@hotwire/turbo' Turbo doesn’t actually start. Either import import '@hotwire/turbo' to automatically initialise it, or add Turbo.start() in your main js entrypoint