DEV Community

Christian Sedlmair
Christian Sedlmair

Posted on • Updated on

Setup Turbo on Vite

Overview

Prerequisites

Vite

Turbo

See also: Hotrails TutorialDocs

Gemfile

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

frontend/entrypoints/application.js

import '@hotwired/turbo-rails'
Enter fullscreen mode Exit fullscreen mode

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

Overview

Top comments (0)