Setup Turbo on Vite

Overview

Prerequisites

Vite

Turbo

See also: Hotrails TutorialDocs

Gemfile

gem 'turbo-rails'

I prefere not using the Gem installer, just:

$ npm i @hotwired/turbo-rails

see: GitHub Turbo/Installation

frontend/entrypoints/application.js

import '@hotwired/turbo-rails'

Test

How to check if Turbo works? see Turbo/TurboDrive aproximately on the middle of the page

You have to insert at least two links and correspondending views. Check the network tab on browser. Page Reload loads all the Javascript and Stylesheets while Turbo, by clicking a link, by default, just replaces the body.

=> Turbo should work. Check it by browser > developer tools > Network Tab

Overview

P.S.:
Page Initialization Event

Like described on Foundation Frontend setup needs a Initialization Event.

Full List of Turbo Events are on Turbo/reference/events

Page Initialization is done with turbo:render or turbo:load

Attention: If you work inside a frame, like so:

= turbo_frame_tag 'mainFrame' do
  %h1 TurboFrame#first_content

=> none of that events will work! And it also not updates the Browser History

If you need an initialization Event, check Handbook/Stimulus, MutationObserver.

Changing the same frame to

= turbo_frame_tag 'mainFrame', 'data-turbo-action': :advance do
  %h1 TurboFrame#second_content

=> mentioned events are firing and Browser History is changed

Overview