DEV Community

Christian Sedlmair
Christian Sedlmair

Posted on • Updated on


Setup Turbo on Vite





See also: Hotrails TutorialDocs


gem 'turbo-rails'
Enter fullscreen mode Exit fullscreen mode

I prefere not using the Gem installer, just:

$ npm i @hotwired/turbo-rails
Enter fullscreen mode Exit fullscreen mode

see: GitHub Turbo/Installation


import * as Turbo from '@hotwired/turbo'
Enter fullscreen mode Exit fullscreen mode

see: Turbo/Installation


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


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
Enter fullscreen mode Exit fullscreen mode

=> 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
Enter fullscreen mode Exit fullscreen mode

=> mentioned events are firing and Browser History is changed


Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another “Coder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.