DEV Community

Christian Sedlmair
Christian Sedlmair

Posted on • Edited on

3

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay